[TW5] How do I change font colors?

[charleyc...@gmail.com]

I need to change the font colors for the tabs and contents in the sidebar. How do I do that?

Thank you in advance!

[Mark S.]

What you want to do is change the styles that create the colors. There's different style selectors for the tabs and for the list items.

CSS is always something of a mystery (why did it apply *that* style but not *this* style). Fortunately, Firefox (and probably other browsers) make this somewhat easier. From firefox, do a right click on, say, the button text you want to change. Select "Inspect Element (Q)" from the popup. This will open a dialog where you can see what's happening inside the code. Find the "computed" tab. The style attribute you're looking for is "color". Find color and open up the expansion arrow. It tells you that the selector rule it's using to decide the color is:

.tc-sidebar-lists .tc-tab-buttons button

Now create a new tiddler and tag it $:/tags/Stylesheet

Inside the style sheet you can specify the color:

.tc-sidebar-lists .tc-tab-buttons button {color: blue;}

You can change the color to whatever you want. If it's not a standard color you can use the rgb(0,0,0) thingy instead. You can find online places that will display the colors and rgb numbers for 1000s of colors.

If you repeat the discover process for the menu items, you will find the selector:

.tc-sidebar-lists a.tc-tiddlylink

You can add this to your stylesheet so you might end up with:

.tc-sidebar-lists .tc-tab-buttons button {color: blue;}
.tc-sidebar-lists a.tc-tiddlylink {color: rgb(255,0,0);}

HTH
Mark

[charleyc...@gmail.com]

Wow! I figured it out.

Thank you!

[charleyc...@gmail.com]

What about the font color of search results?

[Mark S.]

One way is to back out in the CSS inspector tool and find what other classes or tags apply to the current situation, and create styles based on that. For instance, for the search box, it appears that :

div.tc-sidebar-lists .tc-search-results a.tc-tiddlylink { color: blue; }

will make search results blue.

But if you want to make a lot changes, and and want things to work together, it might be better to make your own colour palette. Under the tools tab on the right hand side you can find a button for colour palettes. Experiment to find which one is closest to what you want. The palette you last selected can be found inside $:/palette. Open the one you like as a tiddler, clone it, and change the name and description fields at the bottom. Then see how things work by changing colors of various attributes.

For instance, you can change the color of the sidebar, both for search and for menu linking in the sidebar by changing this attribute:

sidebar-tiddler-link-foreground: red

Using the colour palette button from the tools tab again, you can make your palette the one currently in use.
In this way you can customize your TW and quickly apply it to other TW5 files that you make.

Good luck,
Mark

[charleyc...@gmail.com]

Oh wow. There's a lot of options here. Amazing...

Thank you so much!