How to change font colour on drop down menu – Freak theme

  • Resolved KiwiDiva

    (@kiwidiva)


    9 years, 2 months ago

    Hi all,

    I’m using Freak theme on my website (www.taralemana.com). I love it, but there are a few things that bug me that can’t be changed through the regular customisation options.

    My main bug bear is the colour of the navigation menu – it’s medium grey on a light grey background, there is not enough contrast to make it easy to read. I have Googled and searched these forums and tried at least 30 different suggested code strings to change this using the stylesheet, with only partial success; I managed to change the menu item colour, but can’t change the colour of the dropdown menus to match. I would like to have menu items change to a different colour on hover as well, but have had no luck adapting that either despite trying many code strings from many tutorials and whatnot.

    Second, I would like to change the title above the text on each page (for example, “HOME”) to match whatever colour I settle on for the menu items – but once again, cannot seem to find the right code to do this. And lastly, I’d like to increase the size of the body text a little to make it easier for visitors to my site to read.

    If someone could help me achieve this, I would be very grateful. Many thanks in advance!!

    Tara

Viewing 9 replies - 1 through 9 (of 9 total)

  • Use a Custom CSS plugin for any changes, as when the main theme updates, all the changes you may have made to the main theme will be lost.

    After installing the plugin, paste this code in it:

    /* 1 menu links color */
menu-drop-down-menu.menu li a,
menu-drop-down-menu-1.menu li a {
	color: #000000;
}

/* 2 menu links hover color */
menu-drop-down-menu.menu li a:hover,
menu-drop-down-menu.menu li a:focus,
menu-drop-down-menu-1.menu li a:hover,
menu-drop-down-menu-1.menu li a:focus {
	color: #aa0000;
}

/* 3 content title color */
h1.entry-title {
	color: #000000;
}

/* 4 content font size */
.entry-content p,
.entry-content p a {
	font-size: 1.25rem;
}

    The color codes are “hex” (combinations of 6 letters/numbers) and they have to have this “#” in front of them.
    Here is a link for colors: https://www.color-hex.com/color-names.html.
    Pick the “Color Code” from the right column, and replace the colors in numbers 1,2,3.
    (hint: #000000 is black – #ffffff is white)

    #4 is the font size in “rems”. An “rem” is css code that refers back to the body font-size and enlarges it. 1.25rem is one and a quarter times bigger. 1.5 would be one and a half times bigger. 1.125rem is one and an eighth times bigger. Change it how you wish.

    Thread Starter KiwiDiva

    (@kiwidiva)

    Thank you so much, that was very helpful! I tried the code and had partial success: the font size of the content was fixed, which is great! I had no luck with the colour changes, though. Here is the code as I inserted it, with colour codes from the link you provided. What am I doing wrong?

    /* 1 menu links color */
menu-drop-down-menu.menu li a,
menu-drop-down-menu-1.menu li a {
	color: #551a8b;
}

/* 2 menu links hover color */
menu-drop-down-menu.menu li a:hover,
menu-drop-down-menu.menu li a:focus,
menu-drop-down-menu-1.menu li a:hover,
menu-drop-down-menu-1.menu li a:focus {
	color: #b8860b;
}

/* 3 content title color */
h1.entry-title {
	color: #551a8b;
}

/* 4 content font size */
.entry-content p,
.entry-content p a {
	font-size: 1.5rem;
}

    I tried clearing my cache but it made no difference. I also tried adding “!important” to the end of each section as I’ve seen that suggested at times but again, no colour change. Any idea where I’m going wrong?

    If it’s any help, the bit of code I did have some success with, to change the colour of the menu items (but not the drop down menus, or the hover colour or any of the other changes) was this: 

    #top-menu ul li a {
	font-size: 22px; color: #4c035e;
}

    (that colour code was taken from Photoshop, hence why it’s different than the one I used above, which came from your link)

    Thanks again for your help!

    Sorry, my mistake… this will work…

    /* 1 menu links color */
#menu-drop-down-menu.menu li a,
#menu-drop-down-menu-1.menu li a {
	color: #000000;
}

/* 2 menu links hover color */
#menu-drop-down-menu.menu li a:hover,
#menu-drop-down-menu.menu li a:focus,
#menu-drop-down-menu-1.menu li a:hover,
#menu-drop-down-menu-1.menu li a:focus {
	color: #aa0000;
}

/* 3 content title color */
h1.entry-title {
	color: #000000;
}

/* 4 content font size */
.entry-content p,
.entry-content p a {
	font-size: 1.25rem;
}
    Thread Starter KiwiDiva

    (@kiwidiva)

    That’s awesome, thank you, nearly there!!! ?? The menu item colour and hover colour worked, but the dropdown menu is still grey (hover colour works, but the non-hover items in the drop down menus haven’t changed colour), and the content title didn’t change colour. Any ideas?

    Missed the sub-menus…

    /* 1 menu links color */
#menu-drop-down-menu.menu li a,
#menu-drop-down-menu-1.menu li a,
#menu-drop-down-menu.menu li ul li a,
#menu-drop-down-menu-1.menu li ul li a {
	color: #551a8b;
	font-size: 1.5rem; /* 21px */
}

/* 2 menu links hover color */
#menu-drop-down-menu.menu li a:hover,
#menu-drop-down-menu.menu li a:focus,
#menu-drop-down-menu-1.menu li a:hover,
#menu-drop-down-menu-1.menu li a:focus,
#menu-drop-down-menu.menu li ul li a:hover,
#menu-drop-down-menu.menu li ul li a:focus,
#menu-drop-down-menu-1.menu li ul li a:hover,
#menu-drop-down-menu-1.menu li ul li a:focus {
	color: #b8860b;
}

/* 3 content title color */
#primary-mono h1.entry-title {
	color: #551a8b;
}

/* 4 content font size */
.entry-content p,
.entry-content p a {
	font-size: 1.25rem; /* 18px */
}

    Better.

    Thread Starter KiwiDiva

    (@kiwidiva)

    So close!!! ?? That’s got everything but the items in the sub-menus, which are still grey when not hovered over.

    Must need to be identified precisely. Ususally “li ul li” works. Try this:

    /* 1 menu links color */
#menu-drop-down-menu.menu li a,
#menu-drop-down-menu-1.menu li a,
#menu-drop-down-menu.menu li ul.sub-menu li a,
#menu-drop-down-menu-1.menu li ul.sub-menu li a {
	color: #551a8b;
	font-size: 1.5rem; /* 21px */
}

/* 2 menu links hover color */
#menu-drop-down-menu.menu li a:hover,
#menu-drop-down-menu.menu li a:focus,
#menu-drop-down-menu-1.menu li a:hover,
#menu-drop-down-menu-1.menu li a:focus,
#menu-drop-down-menu.menu li ul.sub-menu li a:hover,
#menu-drop-down-menu.menu li ul.sub-menu li a:focus,
#menu-drop-down-menu-1.menu li ul.sub-menu li a:hover,
#menu-drop-down-menu-1.menu li ul.sub-menu li a:focus {
	color: #b8860b;
}

/* 3 content title color */
#primary-mono h1.entry-title {
	color: #551a8b;
}

/* 4 content font size */
.entry-content p,
.entry-content p a {
	font-size: 1.25rem; /* 18px */
}
    Thread Starter KiwiDiva

    (@kiwidiva)

    You are an absolute STAR, thankyouthankyouthankyou!!!! That worked beautifully!!! I can’t thank you enough, it looks fab!!!

    You’re welcome. ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to change font colour on drop down menu – Freak theme’ is closed to new replies.