Custom CSS for below-story tiddlers

#1

Hi, guys.

I need some help with CSS. I had a wiki (rel. 5.3.1) with a tiddler named SiteFooter which should act, as from its title, as the site footer, via $:/tags/BelowStory tag. I set up custom CSS for the SiteFooter tiddler, by the use of custom CSS attribute [data-tiddler-title]:

[data-tiddler-title="SiteFooter"] {
    background-color: #000000;
    color: #ffffff;
}

So far, so good. What I expected was to have custom CSS applied to the site footer, but it works only for the tiddler opened in the story river.

How can I make my custom CSS work while the SiteFooter tiddler is transcluded in the below-story area? Thanks in advance for your help,

)+(

#2

If it works like AboveStory, it doesn’t include any tiddler boilerplate code. Cheapest solution is to place your CSS inside a <style>...</style> element in your tiddler.

#3

The $:/tags/BelowStory tiddler content is rendered inside a section element that has class="story-frontdrop". Thus, to apply your CSS, you could write:

.story-frontdrop {
    background-color: #000000;
    color: #ffffff;
}
#4

Thanks @EricShulman, for your suggestion. It works, but now that I can see the result I think I need to investigate further the way the section size is defined.

Actually it shows a black rectangle containing the tiddler text. I would like to have the whole width of the page with my custom background color, starting from the below-story section to the bottom page margin.

I suppose I have to tweak the section size, but I don’t know how.

#5

Just solved with a little tweak to $:/core/ui/PageTemplate/story.

The default shadow tiddler defines the below-story section as nested into the main story-river section

<section class="tc-story-river" role="main">

    <!-- above-story section -->
    <section class="story-backdrop">
    ...
    </section>

    <!-- story-river -->
    <$list filter="[list[$:/StoryList]]" ...  />

    <!-- below-story section -->
    <section class="story-frontdrop">
    ...
    </section>

</section>

I simply moved the below-story section out, at the same level as the main story-river section:

<section class="tc-story-river" role="main">

    <!-- above-story section -->
    <section class="story-backdrop">
    ...
    </section>

    <!-- story-river -->
    <$list filter="[list[$:/StoryList]]" ...  />

</section>

<!-- below-story section -->
<section class="story-frontdrop">
...
</section>

This way the below-story section takes the whole page width and ends at the page bottom margin. This trick combined with the CSS definition suggested by @EricShulman works as I expected.

To be more TW5 compliant I should turn all of this into an alternative page layout, but I am quite satisfied by now.