5.1.22 MenuBar colors

[Damon Pritchett]

Hey all,

I don't know if many people have played with the menubar yet, but I'm wondering how I can change the colors of the menu items. For example, I have the sidebar selected as being part of the sidebar. When I select that and move down the sidebar menu items, the item I'm hovering over has the background color of the palette's general primary color. I'd like to be able to change this without changing the general primary color for the rest of the TW. Any ideas? I've played with the inspect feature to look at the styles and such, but that hasn't helped me yet because it's a hover thing.

Thanks,

Damon

[Mat]

https://github.com/Jermolene/TiddlyWiki5/issues/4568

<:-)

[Sylvain Naudin]

Le vendredi 17 avril 2020 03:13:24 UTC+2, Damon Pritchett a écrit :

I've played with the inspect feature to look at the styles and such, but that hasn't helped me yet because it's a hover thing.

Hi Damon,

With Firefox you can click on hover to see CSS rules in action, see this capture :

[Damon Pritchett]

Thanks. That's exactly what I was looking for.

Damon

On Friday, April 17, 2020 at 4:12:30 AM UTC-7, Mat wrote:

https://github.com/Jermolene/TiddlyWiki5/issues/4568

<:-)

[Damon Pritchett]

Well, that CSS helped a little bit, but it did nothing to help the blue background of the menu items. I've looked at the tiddler $:/plugins/tiddlywiki/menubar/styles and tried many different things, but have found nothing that changes it. The only thing that affects that color is the general primary color in the palette. This works great for link text, but not for a background.

Damon

[Sylvain Naudin]

Le vendredi 17 avril 2020 23:28:47 UTC+2, Damon Pritchett a écrit :

Well, that CSS helped a little bit, but it did nothing to help the blue background of the menu items. I've looked at the tiddler $:/plugins/tiddlywiki/menubar/styles and tried many different things, but have found nothing that changes it. The only thing that affects that color is the general primary color in the palette. This works great for link text, but not for a background.

Damon

Yes, it use color palette in CSS stylesheet, since it apply from global tc.drop.down rules.

You can add your own style if you want, for example :

nav.tc-menubar .tc-drop-down a:hover {
    text-decoration: none;
    background-color: #d8575d;
}

[Damon Pritchett]

Thanks so much (or should I say merci)! I was trying background not background-color.

Damon

[Damon Pritchett]

Alright folks,

Yet another menubar colors question. I've enabled the page controls for the menubar, but I've noticed that the save button does not turn red when the TW has been changed like it does in the sidebar page controls. I've managed to permanently color it red, but not have it dependent on whether the TW has been edited a lot. I've found the inspect feature of Chrome very handy in all of this styling investigation, but it's not readily apparent how the color of that button is dependent on whether the TW has been edited or not. Can anyone point me in the right direction on this?

Thanks again,

Damon

[Damon Pritchett]

Well, after some fiddling further with no luck, I decided to take the brute force approach. I modified the tiddler from the menubar plugin entitled $:/plugins/tiddlywiki/menubar/items/pagecontrols and added <div class="tc-page-controls"> around the outer list widget. I also modified the menubar stylesheet and took out the fill properties of the following statement:

Before:

nav.tc-menubar li.tc-menubar-item svg {

 transition: none;
 width: 1em;
 height: 1em;
 fill: <<colour foreground>>;
 fill: <<colour menubar-foreground>>;

}

After:

nav.tc-menubar li.tc-menubar-item svg {
 transition: none;
 width: 1em;
 height: 1em;
}

Here's what the modified pagecontrols tiddler looks like:

\whitespace trim
\define config-title()
$:/config/PageControlButtons/Visibility/$(listItem)$
\end
<div class="tc-page-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]" variable="listItem">
<$set name="hidden" value=<<config-title>>>
<$list filter="[<hidden>!text[hide]]" storyview="pop" variable="ignore">
<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">
<$transclude tiddler=<<listItem>> mode="inline"/>
</$set>
</$list>
</$set>
</$list>
</div>

While this achieved what I desired, I don't like modifying the tiddlers that come with a plugin. I'd rather do this by adding my own stylesheets. In this case, I was at a loss as to how to do this. There's probably something obvious that I'm missing and I'm hoping someone can enlighten me.

Stay safe and healthy out there,

Damon

[Damon Pritchett]

I should have also included the stylesheet I'm using to customize the menubar. In that stylesheet, the styles at the button seem a little redundant, but have the effect that I want. Otherwise there is a big space at the top of the screen. This goes away if I have both of the last classes in the stylesheet.

/* Color of the text in the menubar */
nav.tc-menubar li.tc-menubar-item > a, nav.tc-menubar li.tc-menubar-item > button {
  color: #555;
}


/* Menubar subitem color */

nav.tc-menubar .tc-drop-down a:hover {
  text-decoration: none;

  background-color: #d7dee8;
}


/* Menubar dropdown item color */
nav.tc-menubar li.tc-menubar-item > a:hover, nav.tc-menubar li.tc-menubar-item > button:hover {
  background-color: #d7dee8;
  color: #000000;
}


/* Menubar non-dropdown item color */
nav.tc-menubar > button:hover {
  background-color: #d7dee8;
  color: #000000;
}


/* Menubar down arrow color */
nav.tc-menubar li.tc-menubar-item > button:hover svg, nav.tc-menubar li.tc-menubar-item > a:hover svg {
  background-color: transparent;
  fill: #000000;
}


/* Dropdown items color */
nav.tc-menubar .tc-reveal > button:hover, nav.tc-menubar .tc-reveal > a:hover {
  background-color: #d7dee8;
  fill: #000000;
}


/* Dropdown items color with no further levels (no arrow present) */
nav.tc-menubar .tc-drop-down a:hover, .tc-drop-down button:hover, .tc-drop-down .tc-file-input.wrapper:hover button {
  background-color: #d7dee8;
}


/* Page controls size */
nav.tc-menubar .tc-btn-rounded {
  font-size: 0.7em;
}


/* Page control styling for menubar */
nav.tc-menubar .tc-page-controls {
  margin-top: 0;
  font-size: 1.0em;
}