[Epheistos]

Hello,

i use these Theme with the color blue. But, i want to change the color in another blue. Only for the Menu, for the rest, the link-color at the themeoptions are enough. I tried with childtheme – but no chance to change. Perhaps the problem ist the blue.css with the color-folder.
Usually i can change colors at the style.css from the parent theme.
And I still noticed something. when I move the mouse over the “no comments”, the font is unreadable because the color is the same as the font color. I hope I have made myself clear.
Can you help?
Short Note: I am a beginner and not a professional programmer in terms css.
Thx.

[Sakin]

@Epheistos: For minimal style changes, then you can use Custom CSS box at “Appearance => Theme Options => Custom CSS” box. You need to build child theme only when you need advance customization of styles and functions.

You can simply change the color code in the following css and then add it in “Appearance => Theme Options => Custom CSS” box:

//Border Color
#branding ul.menu li 
    border-color: 1b4266;
}
//Menu background and text color
#branding #access, #branding ul.menu ul a {
    background: none #1b4266;
    color: #fff;
}
//Menu Hover background and text color
#branding ul.menu li:hover > a,
#branding ul.menu a:focus {
	background: none #286298; 
	color: #fff;
}

[Epheistos]

Hello,

advance I apologize for the late feedback.

I have so implemented like you described, with your code. The color code changed, but it has not been modified! Only in IE (compared to FF) I could find a small change (no change from dark / light, but still the originally blue color ).

[Epheistos]

Hello again,

one part i could solve with this code:

#branding #access, #colophon #access-footer {
    border-bottom: 1px solid #252FE9;
    margin-bottom: 0;
}
#branding #access, #colophon #access-footer, #branding ul.menu ul a {
    background: linear-gradient(#0579FF, #252FE9) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
	color: #fff;
}

But still the problem with this code, when i move with the mouse over the menue – still the “old” blue. I think, this must be the code below, but i tried to change the colors – unsuccessful.

#branding ul.menu li:hover > a,
#branding ul.menu a:focus,
#colophon #access-footer ul.menu a:hover,
#colophon #access-footer ul.menu a:focus {
	background: #286298; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#1b4266, #286298);
	background: -o-linear-gradient(#1b4266, #286298);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b4266), to(#286298)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#1b4266, #286298);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b4266', endColorstr='#286298'); /* for IE */
	color: #fff;
}

[Sakin]

@Epheistos: Post in your site URl so that I can check in what’s not working. Also let me know the color code that you want to change to.

[Epheistos]

So, here i go again 😉

Has taken some time because I tested the WP-installation locally with XAMPP. I uploaded now a Testinstallation to a Freehoster.

Here ist the url: sfzh.cwsurf.de

My favorite colors are: #0579FF, #252FE

I choose in the options the color blue and have written the code (first part) above to the theme option. Also i changed the linkcolor to 0579FF.

So you can see the current state. Please move with the mouse over menu (this is the blue from the color scheme) and “1 Kommentar” (blue bar).

But what I have found:
when i change the Linkcolor to standard, themecolor to bright, … this is a state, i can live with ist, but it would be nicer, when i have my lbue colors above.

For your efforts, I will already now say thank you.

[Sakin]

@Epheistos: Then add in the second part as well.

[Epheistos]

I so so, but only one part works, and the rest will not work.

At theme-option this is my complete code:

#branding #access, #colophon #access-footer {
    border-bottom: 1px solid #252FE9;
    margin-bottom: 0;
}
#branding #access, #colophon #access-footer, #branding ul.menu ul a {
    background: linear-gradient(#0579FF, #252FE9) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
	color: #fff;
}

/*media all*/
#branding ul.menu li:hover > a, #branding ul.menu a:focus, #colophon #access-footer ul.menu a:hover, #colophon #access-footer ul.menu a:focus {
    background: #252FE9;
    background: -moz-linear-gradient(#252FE9, #0579FF);
    background: -o-linear-gradient(#252FE9, #0579FF);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252FE9), to(#0579FF));
    background: -webkit-linear-gradient(#252FE9, #0579FF);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#252FE9', endColorstr='#0579FF');
    color: #fff;
}

But see at my example-site http://sfzh.cwsurf.de/ , .. when you move with the mouse over the menue, there ist always the old “blue”. What do i wrong?

And: when you move to the word “1 Kommentar”, there appears a “beam”, so you can´t read this word. Where is my error?

[Sakin]

@Epheistos: There is problem in your Custom CSS. So, just remove all your custom css and then add the following css in “Appearance => Theme Options => Custom CSS” box:

/* Menu Background Color */
#branding #access {
	background: #252FE9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#0579FF, #252FE9);
	background: -o-linear-gradient(#0579FF, #252FE9);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0579FF), to(#252FE9)); /* older webkit syntax */
	background: -webkit-linear-gradient(#0579FF, #252FE9);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0579FF', endColorstr='#252FE9'); /* for IE */
}
/* Menu Text Color */
#branding ul.menu ul a {
	color: #fff;
}

/* Menu Hover Background Color */
#branding ul.menu li:hover > a,
#branding ul.menu a:focus {
	background: #0579FF; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252FE9, #0579FF);
	background: -o-linear-gradient(#252FE9, #0579FF);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252FE9), to(#0579FF)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#252FE9, #0579FF);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#252FE9', endColorstr='#0579FF'); /* for IE */
	color: #fff;
}

For comment below title, you can add the following css in “Appearance => Theme Options => Custom CSS” box:

.hentry .entry-header .comments-link a:hover,
.hentry .entry-header .comments-link a:focus,
.hentry .entry-header .comments-link a:active {
	background-color: transparent;
}

[Epheistos]

YEAH, this is the solution, now it works!!!
Very, big, big, thx for your support and patience.
Although i don´t understand, what was the error (i´m only beginner) – but for this, we have you 😉

But another abnormalitie, not bad: There are different appearences (Menu) to Firefox (is ok) an for example IE11. Is this normal? Use my link to see it live.

[Sakin]

@Epheistos: Not sure about that.

[Epheistos]

Sorry Sakin, i need your help again. I´m almost done, but there is still something not quite clean code about the colors.

i create a page “Beispiel-Seite”, and then a subpage “Unterseite”. But when you move to “Bespiel-Seite” you can´t read the text from the suppage (all in white). It only change the color if you move with the mouse over the subpage.

See again here: http://sfzh.cwsurf.de/

Please help me again. Great Thx.

[Sakin]

@Epheistos: Ok then replace your current custom css to the following css:

/* Menu Background Color */
#branding #access,
#branding ul.menu ul a {
	background: #252FE9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#0579FF, #252FE9);
	background: -o-linear-gradient(#0579FF, #252FE9);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0579FF), to(#252FE9)); /* older webkit syntax */
	background: -webkit-linear-gradient(#0579FF, #252FE9);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0579FF', endColorstr='#252FE9'); /* for IE */
}
/* Menu Text Color */
#branding ul.menu ul a {
	color: #fff;
}

/* Menu Hover Background Color */
#branding ul.menu li:hover > a,
#branding ul.menu a:focus {
	background: #0579FF; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252FE9, #0579FF);
	background: -o-linear-gradient(#252FE9, #0579FF);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252FE9), to(#0579FF)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#252FE9, #0579FF);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#252FE9', endColorstr='#0579FF'); /* for IE */
	color: #fff;
}

.hentry .entry-header .comments-link a:hover,
.hentry .entry-header .comments-link a:focus,
.hentry .entry-header .comments-link a:active {
	background-color: transparent;
}

.category .page-header { display: none; }

[Epheistos]

You´re GREAT!

Although I still do not understand why the optics with IE is different , but whatever.

[Author]

Posts