Future Theme: Navigation White on White, how to change navigation background

RapidWeaver Classic General
1

Hello all,
Two questions:

First question

I am building a site Halverscience FPGAs for Sci and Eng. using one of RapidWeaver’s standard “themes”, the “Future” theme. It works great on old Waterfox (56.2.11) and a newer Firefox (78.0.2) and on Safari (11.1.1). But on the latest Waterfox (2020.03) the navigation banners are unreadable. White lettering on white background. I’m adding a screen shot of (a) the problem and (b) what Safari shows.
Is this a problem with the latest Waterfox? Or with Rapidweaver?
a
What Waterfox shows.

b
What other browsers show.

2nd question

I’m looking for a way to control the background color of the navigation boxes. I can see how to change font colors, but not the background. Where is it?

Thanks,
Peter Halverson

2

2nd question
Can’t see a way to do it in the settings but this CSS seems to work. Just change the # bit to the colour you want.

.dropdown-menu {
	background-color: #D493B7;
}

1st question
Never heard of Waterfox and it looks to have almost no marketshare. Not sure I’d expect RW to support it.

Rob

3

Thank you Rob,

Being able to control the menu background color is very helpful.

Is there a similar property to control the font color?
I tried simply color: #00ff00; and I did not see a green font in the menu.
Rather, the font color appears to be locked to the “Body Text” color in the master style or style for that page.

Also I noticed that cell phones don’t see the menu background color. They see a semi-transparent black background. That’s a problem because I use black as my “Body Text” color and of course that’s invisible against the black background.

As far as Waterfox goes, it’s basically Firefox that has been tweaked to function on old Macs, such as my Macbook Pro. Its been a lifesaver. But as you point out, Rapidweaver has no incentive to support it.

Sincerely,

Peter H.

4

You can change the hover colour for the menu item by altering the Primary colour but I couldn’t work out how to change the actual menu text without changing all the body text as well. Maybe someone with more CSS skills than i can help.

Rob

2 Likes
5

I learned a couple things. If you want the drop-down menu background color to apply on mobile devices, you have to add !important to the CSS. Like this:

.dropdown-menu {
	background-color: #96875d !important;
}

Also, it is possible the change the color of links without changing the color of the body text by doing this:

a {
 color: #16c616 !important;
}

The trouble is that this changes all the links everywhere on the page which may not be appropriate.

I figured this out by looking here:
https://www.w3schools.com/CSSref/css_selectors.asp

Peter

6

For the drop-down menu links, try this:

.dropdown-menu .nav-item .nav-link:link {
    color: #16c616;
}
1 Like
7

It works! Thank you!

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.