Help with header menu colors and fonts

  • ksmadhav

    #2912

    Hello,

    First of all i want to thank Khairul Syahir for this wonderful theme!! it has really solved my needs!

    Secondly i am going to change my main site theme from what ever it is to graphene, for that i am testing this theme and trying to tweak it in a test wordpress blog. I currently have a few issues i am not able to answer. i am not much of a coder so i need help.

    1) in the header menu bar, i want to change the following

    i) the color that shows up when i hover over color, drop down menu color to what ever i want. is there any custom CSS that i can add?

    ii) i want to change the font of the menu items, and sub menu items to “folksolid” is this possible?

    iii)last but not the least, is it possible to make the home page panes of the same size, if you can see in the site i am tweaking right now (www.studentlive.in/chennai) they are of different sizes, this according to me is due to the size of the featured images or the lack of it. So kindly give me some suggestions here.

    rest is all great and as it should, graphene is a theme that truly rocks!!!

    All help is truly appreciated.

    Thanks a ton!

    madhav

    Prasanna SP

    #22604

    Hi Madhav,

    CSS to change menu hover colour, (It changes the hover, current menu background colour of the header menu only. For dropdown menus, see next code)

    #header-menu > li:hover > a,
    #header-menu > li.current-menu-item:hover >a,
    #header-menu > li.current-menu-ancestor > a
    {
    background: #123456;
    color: #000099;
    }

    (Where #123456 is the background colour and #000099 is the font colour)

    To change the hover colour of both header menu and dropdown menu, use this,

    #header-menu > li:hover > a,
    #header-menu > li.current-menu-item:hover >a,
    #header-menu > li.current-menu-ancestor > a,
    #header-menu ul li:hover > a,
    #header-menu ul li.current-menu-item > a,
    #header-menu ul li.current-menu-ancestor > a {
    background: #995500;
    color: #000099;
    }

    To change the menu font, try something like this,

    #header-menu > li > a {
    font: 14px folksolid;
    }

    Edit: You can remove the homepage panes featured image by adding this to stylesheet,

    .homepage_pane img {
    display: none;
    }

    – Prasanna SP

    ksmadhav

    #22605

    somehow it does not seem to work. i copied and pasted the code and changed the hex numbers of the colors for what i want, but nothing changes. maybe i am doing something wrong here. should i give an admin level access or something that would make it easier for everybody?

    and many thanks for the very prompt reply! this forum really is a very helpful one!!

    thanks again

    madhav

    Mod

    Kenneth John Odle

    #22606

    ksmadhav

    #22607

    no, i even tried those steps. i will paste the CSS here. pls look into it.

    this is what i have in my custom css area.

    .home .page{

    display: none;

    }

    .homepage_pane {

    border: solid 0px #000000;

    }

    .featured_slider {

    background: none repeat scroll 0 0 ;

    margin-bottom: 2px;

    padding-bottom: 25px;

    padding-top: 0;

    position: relative;

    width: 100%;

    }

    .sliderpost_featured_image img {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #container {

    -webkit-box-shadow: 0 0 10px #000;

    box-shadow: none;

    margin: 0px auto;

    width: 960px;

    #header-menu > li:hover > a;

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

    #header-menu > li.current-menu-ancestor > a,

    {

    background: #000000;

    color: #fb9f04;

    }

    #header-menu > li > a {

    font: 14px folksolid;

    }

    #header-menu > li:hover > a,

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

    #header-menu > li.current-menu-ancestor > a,

    #header-menu ul li:hover > a,

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

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

    background: #000000;

    color: #fb9f04;

    }

    ksmadhav

    #22608

    i dont know if i made a mistake. I just looked around in this forum and copied the code that was suggested. it worked for most of the tweaks. i guess i will have to try learn some css and html to not have these problems in future since i will be with this website for a very long time.

    Mod

    Kenneth John Odle

    #22609

    This is one issue:

    #header-menu > li.current-menu-ancestor > a,
    {
    background: #000000;

    The last selector should not have a comma after it. This causes all sorts of problems for the rest of the code that comes after that.

    i guess i will have to try learn some css and html to not have these problems

    Yes, you will–thank you for realizing that. But you will still have problems (no one gets it right the first time), but the good news is that you will have bigger and better problems because you are trying bigger and better things. It’s frustrating at first, I know, but it gets to be a lot of fun after a while.

    Fortunately, there are lots of good resources out there. Check out my blog, Josh’s blog, & Prasanna’s blog — we all have articles and links to other really good sources. When I get the time, I intend to write some very basic introductions to CSS and HTML, but that might not be for a few weeks.

    Cheers,

    Ken

    Mod

    Kenneth John Odle

    #22610

    Here is another issue:

    #container {
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: none;
    margin: 0px auto;
    width: 960px;

    Much of this is already defined in the theme’s style sheet, so you are duplicating code. Also, in the second line, you are saying “use a black 10 pixel wide box shadow” and in the third line you are saying “don’t use a box shadow at all.” A browser that only understands the webkit box shadow will display the box shadow, but a browser that doesn’t need the webkit declaration will show it, since it comes second.

    Josh

    #22611

    Yeah… with all due respect… that is some pretty messy code.

    Try this instead:

    .home .page {
    display: none;
    }

    .homepage_pane {
    border: solid 0px #000000;
    }

    .featured_slider {
    background: none repeat scroll 0 0;
    margin-bottom: 2px;
    padding-bottom: 25px;
    padding-top: 0;
    position: relative;
    width: 100%;
    }

    .sliderpost_featured_image img {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    #container {
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: none;
    margin: 0px auto;
    width: 960px;
    }

    #header-menu > li:hover > a;
    #header-menu > li.current-menu-item:hover >a,
    #header-menu > li.current-menu-ancestor > a, {
    background: #000000;
    color: #fb9f04;
    }

    #header-menu > li > a {
    font: 14px folksolid;
    }

    #header-menu ul li:hover > a,
    #header-menu ul li.current-menu-item > a,
    #header-menu ul li.current-menu-ancestor > a {
    background: #000000;
    color: #fb9f04;
    }

    And I’m still not sure what this is???

    #header-menu > li > a {
    font: 14px folksolid;
    }

    There are still a few small issues with the code (as Ken mentions above), but it’s hard to fix without knowing how you want it to behave. But, that should get you pointed in the right direction.

    There was also an element which didn’t have a proper closing bracket, breaking everything below that entry. I have fixed it as well in the code above.

    Prasanna SP

    #22612

    @Madhav, if any of the codes above doesn’t work in child theme style sheet, try adding them in Graphene Options –> Display –> Custom CSS

    Josh wrote,

    And I’m still not sure what this is???

    It changes the font of the header menu to folksolid. It’s working in my test site. But, may need to add this in font-family.

Viewing 10 posts - 1 through 10 (of 23 total)

You must be logged in to reply to this topic.