choose style for h2 inside tiddler, not ALL h2.

110 views
Skip to first unread message

Shay Shaked

unread,
Nov 2, 2016, 9:02:25 PM11/2/16
to TiddlyWiki
So, another CSS question from yours truely. 

I'm trying to figure out how to write CSS for just the h2 headers inside a tiddler, following a title. 

TiddlyWiki currently use h2 in many places, including the Tiddler's title and the Wiki's title. I don't want these affected. I would create a class for that, but I don't know how to tell TW to run this class every time I write in !! for a title. Is this part editable? Can I find the line of code where TW gets that !! is, in fact, <h2>? If I can find that, then I can change !! to a certain class of <h2> and all will be good. 

Thanks! 

Mark S.

unread,
Nov 2, 2016, 10:28:37 PM11/2/16
to TiddlyWiki
Something like this might work:

.tc-tiddler-body h2{
color
:blue;
}

If you have firefox, you can right click on an element and use "Inspect Element" to see what the various classes used in setting up the tiddler.

Good luck,
Mark

Shay Shaked

unread,
Nov 2, 2016, 10:33:02 PM11/2/16
to TiddlyWiki
Mark, 

wish it was that easy hehe. I've been playing with styles (and inspecting elements) for a while. The problem is that tc-tiddler-body is not a class, it's a <div>... however the only way I know to call a div in CSS is if it has an ID, and these divs do not. 
Message has been deleted

Mark S.

unread,
Nov 2, 2016, 11:41:47 PM11/2/16
to TiddlyWiki
tc-tiddler-body is a class used in a div. The H2 tags nests inside it. My grasp of CSS may be rusty, but I don't think CSS cares what tags the classes live in or are nested in unless there happens to be a more specific CSS rule. In any event, the style I showed seems to work on mine. I don't see it turning anything blue except the internal !! lines. Perhaps your actual use-case is something else?


Good luck,
Mark

Shay Shaked

unread,
Nov 3, 2016, 8:07:27 AM11/3/16
to TiddlyWiki
I do not agree. I don't have a better idea of what exactly tc-tiddler-body is, but from what I know, classes have a period (so, it should be .tc-tiddler-body and it's not). Either way, I did try to call tc-tiddler-body in my CSS code and nothing happened. It is not recognized. I have a certain font for <h2> right now, so all h2 are affected. if I add tc-tiddler-body for that, so that h2.tc-tiddler-body, nothing happens. Even if call tc-tiddler-body itself was possible, it would affect the entire div, so I will not get a highlight under the <h2> in it. 

Let me know if you have more ideas? Thanks for helping out!

Shay Shaked

unread,
Nov 3, 2016, 8:16:55 AM11/3/16
to tiddl...@googlegroups.com
Yes! This one worked Riz. Thanks! 

On Wed, Nov 2, 2016 at 11:19 PM Riz <madapeed...@gmail.com> wrote:


div.tc-tiddler-body h2 { color:blue; }


--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/Fgj_eYy3D6k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@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/8a7a466c-a422-4e3c-8963-27773a6521fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Riz

unread,
Nov 3, 2016, 8:25:49 AM11/3/16
to TiddlyWiki
Hi Shay,


from what I know, classes have a period (so, it should be .tc-tiddler-body and it's not).

Yes they do have a period - when declared in the stylesheet, not when called. Did you try adding Mark's code to a stylesheet and try?

if I add tc-tiddler-body for that, so that h2.tc-tiddler-body, nothing happens
,
h2.tc-tiddler-body won't work because tc-tiddler-body is not a class of h2, rather h2 is a child of .tc-tiddler-body.


Shay Shaked

unread,
Nov 3, 2016, 9:49:39 AM11/3/16
to TiddlyWiki
Riz and Mark, 

I did try what Mark suggested, and it did not work. 
In the HTML, I know that classes are defined as class="[value]" as indicated here: http://www.w3schools.com/tags/att_global_class.asp. Riz solution's works, which means the syntax was wrong. 

I still don't understand the logic of how this class is called in the HTML generated by TW. I feel I have 90% of the answer in my head, and I want to know for future reference. 

By the way, I apologize if I sound harsh or anything, I'm just trying to be specific so I get the facts, and if the facts I have are wrong, I want to see where exactly so I can learn. Hope this makes sense, and thanks! :)

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/Fgj_eYy3D6k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
Reply all
Reply to author
Forward
0 new messages