Change colour scheme

Hi Sjoerd!

You can change all of your website colors using CSS. If you let us know what colors you would like to change we can suggest the correct code for you.

When you have the code you can paste it into the Appearance -> Theme Options -> Custom CSS box.

If you are looking to make a lot of changes you might consider creating a child theme.

I hope that helps!

Luke the Daft Duke

Hi Luke,

Thank you so much for your reply! I would change all the yellow highlights wits the more orange-yellow of my logo (which is #D09038). However, I cannot figure out what the # of the yellow color is.
Depending on the look & feel, I might consider to leave the headings yellow, or keep everything as it is when it doesn’t feel right. But I just want to try out ??

Regards,

Sjoerd

This will change enough on the front page to see if you like it… ??

.header-title span,
#secondary a {
   color: #d09038;
}

#top-nav #site-navigation a:hover,
#top-nav #site-navigation ul li:hover > a,
#top-nav #site-navigation ul ul,
#parallax .parallax-button  {
  background: none repeat scroll 0 0 #d09038;
}

Hi Daftduke,

Thank you so much for your help! I really like it, perhaps you would help me out turning the rest into orange? For the menu I think it would be nice if the text is orange and the hover darkbrown (transparent?)
As I am also very willing to understand the material I’m working with, I would like to ask why I put this into the custom CSS box instead of the stylesheet.css? I am a bit overwhelmed by all the codes and stuff since it is all kinda new to me ;). When I do understand it a bit more, I can make changes my own without asking for help this much.

kind regards,

Sjoerd

Your welcome, it’s my pleasure.

I suggested you paste it in the theme options CSS box, rather than the style.css because that way, the changes you make will be safe when the theme updates. If you put them directly in the theme’s style.css file (without making a child theme) you lose any changes when it updates.

For the menu hover you’ll have to remove the selectors from the previous snippet I gave you otherwise they will conflict.

You can enter your own HEX color codes:

#top-nav #site-navigation a:hover, /*Menu Hover*/
#top-nav #site-navigation ul li:hover > a,
#top-nav #site-navigation ul ul {
background-color: #??????;
}

#top-nav #site-navigation a { /*Menu Text Color*/
  color: #??????;
}

Btw, I’m very intrigued by the products on your site – as I don’t speak Dutch they are quite a mystery…could you explain? ??

I hope that helps!

Luke the Daft Duke

Hi Luke,

Thanks for your response! The product I offer is a romantic date for two. During a 1,5-2h walk they do different kind of missions in order to get to know each other better ;).

Somehow the code did not work properly.. The background color of the menu during hovering is still yellow. I also noticed yellow accents in the ‘recent posts box’ (meest recente berichten) (arrows), on the ‘reviews page’ (I think this is a blockquote stripe or something like that), fill-out forms and post author and hyperlinks.

The code for hyperlinks would look something like this?

#a:link{
color: #d09038;
text-decoration: none;
}

#a:visited{
color: #d09038;
text-decoration: none;
}

#a:hover{
color: white;
text-decoration: none;
}

#a:active{
color: #d09038;
text-decoration: none;
}

Do I understand well that the hashtags identify an element in the stylesheet.css and overrules it?

Also, the parallax image is not shown properly in all browsers. Can I do something to avoid that or is it just depending on the image size and must I figure it out by trial and error?

Thanks again!!

Sjoerd

Hi Sjoerd!

Cool product ??

I just checked your site and it looks like you got the background hover color for the menu fixed.

I use a tool called Firebug when tracking down the correct code to change. It makes things a lot easier. As you seem keen to learn it might be quite useful for you.

The hashtags are used to select the id of an element…

For example,

<h1 id="headline">My Headline</h1>

The id is ‘headline’ so we select this by using the hashtag:

#headline

When selecting the links, like you did above you don’t need to use the hashtag as the element itself can be selected by just using the name of the element – in that case:

a:link{
color: #d09038;
text-decoration: none;
}

However, when a lot of ids and classes are applied to elements you often have to go through them individually to find the exact class in order to overwrite the rule. (that’s where Firebug comes in handy).

It might be best to start a new thread regarding your Parallax issues.

I hope that wasn’t too long winded! ??

Luke the Daft Duke

Thanks a lot Luke, excuse me for replying this late. I spent quit some time last week on my site, but with regards to the site appearance no luck so far.

I have installed firebug installed, but I rather use chrome since somehow my computer gets really slow to stuck when using FF lately.

A very easy tool, however a lot of things are still quit vague to me. For instance, I have looked the yellow-highlighted elements up via the chrome inspector and was able to find it. When I search for the color code in the style.css, I can’t find it at all. I was always thought that all style related code was in the style.css document.

When I search for the code in all other documents in the WP editor, again no results. I get kinda lost in here. Where does the content get the yellow color from?

Despite your explanation, somehow the changes are not visible. For instance, I added:
a {
color: #d09038;
text-decoration: none;
}
in the custom CSS editor. Somehow this has no result. Some goes for .a and a:link{.

Hopefully I explained it clearly ??

Sjoerd

Hi Sjoerd,

I’m not sure why you are searching for the code in the WP editor. When you find the code you want to change you need to paste it in your child theme’s style.css or in your custom css plugin.

If you make changes in your theme’s style.css then you will lose those changes when the theme updates.

However, when a lot of ids and classes are applied to elements you often have to go through them individually to find the exact class in order to overwrite the rule. (that’s where Firebug comes in handy).

i.e. just selecting the a element isn’t necessarily going to change the appearance – you need to find the correct ID or class of the element you want to change.

Hope that makes sense! ??

Luke the Daft Duke

Hi Luke,

I was searching for it since I thought when I found the yellow # code, I simply could change it into the code of my preference. Sadly it ain’t that easy…

I think I am going to read myself into CSS and elements, since it is still not clear to me, what does what, etc.

Thanks for all your help!

Kind regards,

Sjoerd