Change font color, style and size of the Navigation / Main menu - and in general « Support Forum | Kriesi.at

Support Forum » Flashlight

Change font color, style and size of the Navigation / Main menu - and in general

5 posts from 3 voices

Started 5 months ago by bruwa
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

bruwa
Member

Hi

I tried to change the font color in the navigation / main menu to white with this code:

#top .main_menu .menu a {
color: #ffffff;
}

Unfortunately it does not work (adding "!important") did not work either.

How can I also change the font size and style of the navigation / main menu?

**************

As I changed the background to gray:

.box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget {
background: #636466;
}
#top .main_menu .menu ul {
background: #636466;
}

I want tho change any font color in the theme to white.
Is there a way to do this once for all?
Setting the Flashlight styling option "Font Color on colored background" to white ("#ffffff") did not do the trick!

Thanks,

Bruno

Posted 5 months ago #
Ismael
Moderator
Hi Bruno,

Try this code instead:
```
.main_menu .menu li a strong {
   color: #ffffff;
   font-size: 12px;
   font-style: italic;
}
```
Just change the values. Also, if it doesn't change you can use the !important.

If you want a dark background and white font you can just switch your theme skin to dark, by going to Flashlight > Styling > Which general color scheme should be used? and set this to "Dark"

Hope this helps. :)

Regards,
Ismael
Posted 5 months ago #
bruwa
Member

Hi Ismael

thanks for the input. It worked, but did not entirely solve my problem.

As there are some additional questions, I started a new thread: http://www.kriesi.at/support/topic/changes-to-woocommerce-product-detail-page#post-88058

Regards,

Bruno

Posted 5 months ago #
Ismael
Moderator

Hey,

Let us close this one then. :)

Regards,
Ismael

Posted 5 months ago #
Nick
Moderator

Hi,

I just wanted to add that I made a video showing how everyone should be going about finding what CSS to change using Google Chrome Developer Tools. I showed through trial and error, it is very possible to stumble along and hack your way around by trying various combinations without getting frustrated, until the colors of the menu are just how you want them. This is not rocket science. Creating it from nothing is art, but manipulating it is not difficult.

Please notice I have notepad waiting open where I paste the css once I see that it has the desired effect. Then I add it to Quick CSS at the very end to save it. Even if someone has no idea what CSS is, it is still possible to get results.

https://docs.google.com/open?id=0B8hqGBMSfHtKNE51dUJPZGJwdlE

Thanks,

Nick

* The video is a dramatization illustrating a process. In reality, Nick got a black belt in CSS, and a pair of boots to match.*

Posted 5 months ago #