Topic Title and CSS

[TW Smith]

Hi all,

So, I was playing with CSS. I identified that I could apply CSS styles to h1, in the way you would expect.

However, is there a way to apply styles to the title of the tiddler that displays at the top of the tiddler, like a heading.

Cheers,

Sean

[Mat]

Yes. 

If you want the same styling applied to all titles, you can use:

.tc-title {...}

The very tricky one is how to apply it to specific tiddler titles. Here is a solution from deep in my lab drawer:

It requires that you have set "titles to show as links" in the Controlpanel. 

Then, you can do:

<style>

<$wikify name=xx text={{{ [[New Tiddler 15]] +[encodeuri[]] }}}>

.tc-tiddler-frame a[href="#<<xx>>"] { background:red }

</$wikify>

</style>

As seen, the title must be uriencoded (e.g spaces become %20)

It's pretty cool though because you can do things like this 

.tc-tiddler-frame a[href="#<<xx>>"]:before { content:"Yo!"; position:absolute; left:-1em; }

<:-)

[TW Smith]

Brilliant, thank you. Fortunately, I want consistent style use. However, I am very tempted to give your specific-title approach a whirl, just because.

Cheers,

Sean

[RichardWilliamSmith]

If you're restyling the wiki, it's very useful to open the developer tools and use the inspector (in chrome for mac, I can press opt-command-j to open the console and the inspector is the left-most tool, it looks like a cursor, clicking a small rectangle. I think all the browsers have equivalent tools).

Hovering over page elements should then highlight them and display the element type, along with any classes and ids that they have.

If you click on an element, you should see a styles pane in the console that will let you fiddle with the css and see your changes reflected immediately (though they won't be persisted).

Regards,

Richard