Hello to all CSS wizards out there
I am experimenting with creating custom buttons using CSS and have made the following stylesheet
.button1
{
width: auto ;
height: auto ;
border:none ;
border-bottom: 1px solid grey ;
border-radius: 0 ;
outline: none ;
background-color: #e7e7e7 ;
font-size: 12px ;
}
This works perfectly when used in a wiki with the basic Vanilla theme.
When I change the theme to the Notebook Theme the custom buttons are replaced by the default style. ( see my reply below!!)
I have done some research and have checked the position of my custom stylesheet in the list of stylesheets and it is at the bottom the list. I have also tried adding !important to the stylesheet entries and that has no affect.
Please, can anyone offer some guidance?
Cheers, Rob
Hi all
I have subsequently found that it is not the Notebook Theme that is causing the issue.
The two wikis have similar plugins and themes installed and yet the stylesheet works in one and not in the other !!
I’m not sure how to debug this and from the above it is probably difficult for anyone to say what is going wrong!
But still any advice would be appreciated
Cheers, Rob
Have a look at the ControlPanel → Info → Advanced → Stylesheets
There you can see, the order the style sheets are evaluated. The lower in the list will take precedence.
So in the screenshot tw-com the 17. Custom data-styles will win
Rather than changing global styles perhaps write a custom class and apply that on the $button widget for targeted buttons.
There are oh so many ways to apply CSS and tiddlywiki adds to the cascade with its own style sheet ordering. It is wise to keep it as simple as possible according to your needs and avoid !importantat all cost or it just gets more difficult.
- Remember in many browsers r-click inspect may help identify the style/class applied and then you can use advanced search to find where it is defined. Similarly keep this in mind in your own styles, make it easy for the future you.
