CSS Colours

  • Hi,

    I’m building a website using WordPress, on this website there will be general information about a charity i support. They asked me if i could help building a website and manage their Facebook, for charity i always say yes but after looking for hours on google i still can not find the solution that fits me.

    https://dpsspijkenisse.url.ph/ is the website we are talking about, and a few things i want to change to it. First of all the menu font color, i tried to search in the style.css for #access and found it, changed colors but it doesnt show up on the website. So i tried to use a plugin for it called “font”. It allows me to click the text and change the color but i lose the hover over function when i use that, so it doesnt work for me.

    Second, the dropdown menu. I finally managed to get it working but also here i would like to change the colors and i have no clue where to do that.

    And for last, the main color of the “white” website. Would like to have a bit gray into it but again.. I cant find it in the style.css
    Any help would be nice so this charity can have their website online.

    Thanks in advance !

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

  • Hi,

    For the top level menu, in Appearance > Editor > style.css

    Where you see:

    #access a {
	color: #777;
	display: block;
	float: left;
	font-size: 14px;
	text-transform: uppercase;
	padding: 16px 0 0;
	height: 39px;
}

    Change the color: #777 to color: #000 // for black, since #000 is black. Change it to whatever color you need. That’s the element you need to change, and probably missed.

    Thread Starter BrianVogel

    (@brianvogel)

    Thank you very much ! That did the job for the menu color. If you hover over “op weg naar werk” you see blue hover over letters and a line of blue. Any idea for that ?

    Scroll down a little more, you’ll see:

    /* Dropdown */

    That’s the section for the sub menu.

    To change the submenu background:

    #access ul li ul {
	position: absolute;
	background-color: #fff;
	border-top: 4px solid #05A9C5;
	top: 55px;
	left: 0px;
	width: 190px;
}

    The background-color: #fff controls that.

    To change the submenu font color when hovered:

    #access ul li ul li a:hover, #access ul li ul li:hover > a, #access ul li.current-menu-item ul li a:hover {
	background-color: #F9F9F9;
	color: #05A9C5;
}

    The background-color: #F9F9F9; controls the background and the color: #05A9C5; controls the font (currently a light blue when hovered).

    To edit the blue border at the top of the submenu:

    #access ul li ul {
	position: absolute;
	background-color: #fff;
	border-top: 4px solid #05A9C5;
	top: 55px;
	left: 0px;
	width: 190px;
}

    The background-color: #fff; controls the submenu background. The border-top: 4px solid #05A9C5; controls that little blue bar. The 4px is the thickness, solid is the line type, and #05A9C5 is the color for the little top bar.

    Thread Starter BrianVogel

    (@brianvogel)

    I found that one aswell, used google chrome to find the hex code and searched in style.css to change it ! Thnx

    No problem ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Be aware that changes made to the theme’s files will be erased when the theme updates.

    If it’s just CSS changes then use a Custom CSS plugin to hold and manage your CSS modifications.
    If it’s more then set up a Child Theme.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS Colours’ is closed to new replies.