Overriding class style

[demon...@gmail.com]

I was wondering how to modify a style of a plugin using my own stylesheet. So in this case there is an element in the plugin <span class="graybox"> but this graybox class does not look good in my theme. I am looking for a way to override it in a way that even if I update the plugin at some point (or reset or something) my style will still be in use.

I did notice that if I just make my own .graybox {foo;} style then it will supercede the one give in the stylesheet of the plugin, but Inspect Element -> Style Editor shows that my definitions come later than the ones in the plugin. This would be fine, however, I have no idea why this happens. Is there some sort of order to how the styles are laid out? I tried to remove the $:/tags/Stylesheet tag from my own style tiddler and the plugin's own and add it back to see if that makes a difference in which order the styles are but there was no difference.

So what would be correct way of doing this? I did read about CSS specificity etc but if I understood it correctly then I would have to change the <span class="graybox"> part, which would then be replaced again in the event of my refreshing / updating the plugin.

[Mat]

Keep the $:/tags/Stylesheet tags. Click one of them to see the global title list of tiddlers using that tag. And, you can rearrange the titles there so to ensure that your stylesheet is placed below the other one. That is how it is evaluated later and "wins", it has the same specificity.

Another way is to increase it's specificity. In this specific case I'd probably go this route and use  !important, i.e like so:

.graybox {foo !important;}

<:-)

[Eric Shulman]

Yet another way:

Define your style override like this:

.myStyles .graybox { your styles here }

Then, you can add your class ("myStyles") to the PageTemplate by creating a global macro tiddler (tagged with $:/tags/Macro) containing:

\define containerClasses()
tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$ myStyles
\end

This will override the default "containerClasses" definition found in $:/core/ui/PageTemplate.

Thus, any page content that uses class="graybox" will automatically be within

a wrapper that has a class of "myStyles", and your definition of .graybox will

take precedence due to increased specificity.

-e

[PMario]

Hi,

The ControlPanel : Info : Advanced : Stylesheet  - menu

allows you to drag & drop sort the stylesheets. ... So the lower in the list, the higher the priority.

-mario

[demon...@gmail.com]

Ah thank you all, I think the easist for the time being is just to sort the stylesheets in my own order!