Discussion:
[tw] Topic Title and CSS
Add Reply
TW Smith
2017-07-24 23:55:33 UTC
Reply
Permalink
Raw Message
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
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f171b670-ac5a-4e42-a395-152dc0eeefa8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Mat
2017-07-25 02:02:12 UTC
Reply
Permalink
Raw Message
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; }


<:-)
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c9ac161b-2427-477d-8b23-bb00d29f1aae%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
TW Smith
2017-07-25 17:07:40 UTC
Reply
Permalink
Raw Message
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
Post by Mat
Yes.
.tc-title {...}
The very tricky one is how to apply it to *specific* tiddler titles. Here
It requires that you have set *"titles to show as links"* in the
Controlpanel.
<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
absolute; left:-1em; }
<:-)
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/fc821fcc-6641-47b7-ab11-f67b849fa2cf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
RichardWilliamSmith
2017-07-25 23:31:47 UTC
Reply
Permalink
Raw Message
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
Post by 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
Post by Mat
Yes.
.tc-title {...}
The very tricky one is how to apply it to *specific* tiddler titles.
It requires that you have set *"titles to show as links"* in the
Controlpanel.
<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
absolute; left:-1em; }
<:-)
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/32ae2457-8a40-4260-9ebd-986dfd0ee20a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Loading...