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;
}
On Saturday, April 18, 2020 at 6:40:55 PM UTC-7, Damon Pritchett wrote:
>
> 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
>
>
> On Saturday, April 18, 2020 at 2:18:11 PM UTC-7, Damon Pritchett wrote:
>>
>> 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
>>
>> On Friday, April 17, 2020 at 3:37:09 PM UTC-7, Damon Pritchett wrote:
>>>
>>> Thanks so much (or should I say merci)! I was trying background not
>>> background-color.
>>>
>>> Damon
>>>
>>> On Friday, April 17, 2020 at 3:28:28 PM UTC-7, Sylvain Naudin wrote:
>>>>
>>>>
>>>>
>>>> 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;
>>>> }
>>>>
>>>>
>>>>
>>>>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/80929157-2838-4671-9497-28e166db090b%40googlegroups.com.
