2

[Anonymous]

Anonymous

#18524

Do me a favor, and paste your child theme style.css file here. Please remember to wrap your code in backticks when posting (the key in the upper left corner of your keyboard with the ~ on it).

[saraf]

saraf

#18525

OK, here goes:

/*

Theme Name: Graphene Child

Theme URI: http://happycatshaven.org/

Description: Child Theme for Graphene theme

Author: Sara

Author URI: http://happycatshaven.org/

Template: graphene

Version: 1.1.4

*/

@import url("../graphene/style.css");



#header-menu {

background: #C2BAD9;

}



#header-menu > li > a {

background: none repeat scroll 0 0 #C2BAD9;

color: #007272;

}



#header-menu > li > a {

color: #C2BAD9;

line-height: 16px;

padding: 9px 10px 10px;

}

#header-menu > li.menu-item-ancestor > a {

background: #C2BAD9 -877px -236px no-repeat transparent;

padding-left: 26px;

}



#header-menu > li:hover,

#header-menu > li.current-menu-item,

#header-menu > li.current-menu-ancestor {

background: #C2BAD9 left -100px repeat-x #eee;

}

#footer {

background: url("images/sprite_h.png") repeat-x scroll left -117px #009687;

box-shadow: 0 -3px 5px 0 #000000;

height: 29px;

color: #000000;

position: relative;

}

#header{

text-align:right;

}



#copyright h3 {

display: none;

}

#sidebar_bottom {

background: none repeat scroll 0 0 #c9e9de;

clear: both;

margin-top: -10px;

padding: 0 0 20px;

}

Hope I did that right?

Sara

[Anonymous]

Anonymous

#18526

Okay… try this and see how it turns out:

/*

Theme Name: Graphene Child

Theme URI: http://happycatshaven.org/

Description: Child Theme for Graphene theme

Author: Sara

Author URI: http://happycatshaven.org/

Template: graphene

Version: 1.1.4

*/

@import url("../graphene/style.css");



#header-menu {

background: #C2BAD9;

}



#header-menu > li {

background-color: #C2BAD9;

font: 14px arial;

margin: 0 2px;

}



#header-menu > li > a {

background: none repeat scroll 0 0 #C2BAD9;

color: #007272 !important;

line-height: 16px;

padding: 9px 10px 10px;

}

#header-menu > li.menu-item-ancestor > a {

background: #C2BAD9 -877px -236px no-repeat transparent;

padding-left: 26px;

}



#header-menu > li:hover,

#header-menu > li.current-menu-item,

#header-menu > li.current-menu-ancestor {

background: #C2BAD9 left -100px repeat-x #eee;

}

#footer {

background: url("images/sprite_h.png") repeat-x scroll left -117px #009687;

box-shadow: 0 -3px 5px 0 #000000;

height: 29px;

color: #000000;

position: relative;

}

#header{

text-align:right;

}



#copyright h3 {

display: none;

}

#sidebar_bottom {

background: none repeat scroll 0 0 #c9e9de;

clear: both;

margin-top: -10px;

padding: 0 0 20px;

}

[saraf]

saraf

#18527

Thank you so much, Josh. I’ll study the code and see if I can see where I went wrong (duplications, I assume). Now to get the hovered over tab with the sub menu to not be black. I think I had it changed once in the sprite but lost it along the way.

Again, recommended refs for a quick learn of these terms? With a nonprofit, I’m on WordPress because I don’t have time to study to developer level, but would like to do more than flail around, trying out code.

Thanks again for your time,

Sara

[saraf]

saraf

#18528

Thanks for everyone’s help, especially Josh. Your code gave me plenty to learn from. The menu isn’t perfect, but at least the colors are no longer annoying. I think I get now that sprites are a way to make a gradient image or images upload as fast as possible; hope that’s a good interpretation.

I think I also finally understand that terms in CSS are coder-specific, which is why I couldn’t find much help for interpreting the terms specific to Graphene.

I found this page useful, BTW:

http://www.elated.com/articles/css-positioning/

Maybe it will help other newbs like me.

Sara

[Kenneth John Odle]

Kenneth John Odle

#18529

I like your color scheme. Your menu looks really great!

terms in CSS are coder-specific

I think you’re referring to id’s (preceded by #) and classes (preceded by .), and you’re right–when you design things you can use whatever names work for you. Figuring out what someone else calls things can be a challenge–which is why Firebug is so handy!

[saraf]

saraf

#18530

Thanks for clarifying that Kenneth. I wish I had more time to really delve into it instead of learning by trial and error.

Sara

[Anonymous]

Anonymous

#18531

Haha… trial and error is EXTREMELY beneficial though. I honestly can’t think of a better way to learn CSS. You might also want to give these sites a quick look:

http://www.geekstogo.com/forum/topic/139592-css-explained/

http://www.hongkiat.com/blog/css-back-to-basics-terminology-explained/

http://www.htmldog.com/guides/cssbeginner/

All three of those sites, although brief, hold some great info for someone just beginning to learn CSS.

[saraf]

saraf

#18532

Perfect. That’s exactly what I was looking for; thanks!

But now I’m back to tab color problems. I tweaked the code you gave me in my child theme and got the hover changed, but when I upgraded to the newest Graphene version, it changed the tab hover back to black. I had a ticker plugin in the header.php file (thanks to the developer for making that so easy in the latest version!), but even with removing it, the colors are still wrong. The other colors are fine. It’s just the hover.

Any ideas?

[Anonymous]

Anonymous

#18533

Add this to your child css:

#header-menu > li.menu-item-ancestor:hover > a, #header-menu > li.current-menu-item > a, #header-menu > li.current-menu-ancestor > a {

background-color: #ADCFE6;

}