Changing menubar font

Rika Sukenik

unread,

Mar 20, 2021, 12:47:33 PM3/20/21

to TiddlyWiki

I'm styling the menubar and I've found plugins to change colors (helpful!) but i'm also looking to change the font and font size. Does anyone know of a plugin or a stylesheet to help me with that? Thanks!

Eric Shulman

unread,

Mar 20, 2021, 1:54:14 PM3/20/21

to TiddlyWiki

On Saturday, March 20, 2021 at 9:47:33 AM UTC-7 rika.s...@gmail.com wrote:

I'm styling the menubar and I've found plugins to change colors (helpful!) but i'm also looking to change the font and font size. Does anyone know of a plugin or a stylesheet to help me with that? Thanks!

Use the ".tc-menubar" class, like this:

.tc-menubar {

font-family: monospace;

font-size:18pt;

}

enjoy,

-e

Rika Sukenik

unread,

Mar 22, 2021, 6:34:27 PM3/22/21

to TiddlyWiki

Hmm, I must be doing something wrong because the font/size didn't change. Here's what I added:

.tc-menubar {

font-family: Arial;

font-size:28pt;

}

I've added a screenshot of what the tiddler looks like when saved.

Screen Shot 2021-03-22 at 3.28.54 PM.png

Soren Bjornstad

unread,

Mar 23, 2021, 8:18:19 PM3/23/21

to TiddlyWiki

That looks right, so you might have a different (more specific) CSS rule interfering. Try this: right-click on your page and choose Inspect, then click the select icon in the upper-left corner of the developer tools and click on the part of the menu bar that's not appearing in the correct font. In the right pane under “Styles,” with any luck you'll be able to see what other rules are setting the font (you will see the ones that are not winning crossed out).

You could also just try adding !important to your rules (e.g., “font-family: Arial !important;”, which is considered bad practice if you don't understand why you're doing it, but might solve the issue.

Rika Sukenik

unread,

Mar 23, 2021, 11:24:26 PM3/23/21

to TiddlyWiki

Soren, that was really helpful. Thank you! I realized that I needed to update the Shiraz framework (part of Kookma plugin library) that I'm using for styling the sidebar. It took me a few hours to figure it out, but I did it! By the way, Shiraz is awesome. For reference, here is a link to find it https://kookma.github.io/TW-PluginLibrary/

Mohammad Rahmani

unread,

Mar 24, 2021, 2:49:17 AM3/24/21

to tiddl...@googlegroups.com

Hi Rika,

On Wed, Mar 24, 2021 at 7:54 AM Rika Sukenik <rika.s...@gmail.com> wrote:

Soren, that was really helpful. Thank you! I realized that I needed to update the Shiraz framework (part of Kookma plugin library) that I'm using for styling the sidebar. It took me a few hours to figure it out, but I did it! By the way, Shiraz is awesome. For reference, here is a link to find it https://kookma.github.io/TW-PluginLibrary/

You can see all Shiraz classes in its demo page! or look at the plugin content and see all styles tiddler! To my best knowledge on installing Shiraz, it does not automatically apply any styles to any of TW elements except the sidebar tab color which can be unchecked simply from Sidebar/More/Shiraz tab!

See my reply here: https://groups.google.com/d/msgid/tiddlywiki/45a91bd4-cbf9-42d1-beb4-58014158f2f3n%40googlegroups.com?utm_medium=email&utm_source=footer

On Tuesday, March 23, 2021 at 5:18:19 PM UTC-7 Soren Bjornstad wrote:
That looks right, so you might have a different (more specific) CSS rule interfering. Try this: right-click on your page and choose Inspect, then click the select icon in the upper-left corner of the developer tools and click on the part of the menu bar that's not appearing in the correct font. In the right pane under “Styles,” with any luck you'll be able to see what other rules are setting the font (you will see the ones that are not winning crossed out).

You could also just try adding !important to your rules (e.g., “font-family: Arial !important;”, which is considered bad practice if you don't understand why you're doing it, but might solve the issue.

On Monday, March 22, 2021 at 5:34:27 PM UTC-5 rika.s...@gmail.com wrote:
Hmm, I must be doing something wrong because the font/size didn't change. Here's what I added:

.tc-menubar {
font-family: Arial;
font-size:28pt;
}

I've added a screenshot of what the tiddler looks like when saved.

On Saturday, March 20, 2021 at 10:54:14 AM UTC-7 Eric Shulman wrote:
On Saturday, March 20, 2021 at 9:47:33 AM UTC-7 rika.s...@gmail.com wrote:
I'm styling the menubar and I've found plugins to change colors (helpful!) but i'm also looking to change the font and font size. Does anyone know of a plugin or a stylesheet to help me with that? Thanks!

Use the ".tc-menubar" class, like this:

.tc-menubar {
font-family: monospace;
font-size:18pt;
}

enjoy,
-e

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/deddcb73-4a64-413e-a05a-ab13ee710c84n%40googlegroups.com.

Reply all

Reply to author

Forward