Return to Support

Help with header menu colors and fonts

Home Forums Graphene WordPress theme Support Help with header menu colors and fonts

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #2912
    ksmadhav
    Member

    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

    #22604
    Prasanna SP
    Member

    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

    #22605
    ksmadhav
    Member

    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

    #22606
    #22607
    ksmadhav
    Member

    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;

    }

    #22608
    ksmadhav
    Member

    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.

    #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

    #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.

    #22611
    Josh
    Member

    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.

    #22612
    Prasanna SP
    Member

    @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.

    #22613
    Prasanna SP
    Member

    Also try, background-color

    #22614
    ksmadhav
    Member

    i copied the whole thing that Josh gave me and replaced the pretty messy code i had in my Custom CSS. Still no avail with the menubar.

    @prasanna: you are right, i dont think folksolid is added in the font family could you guide me as to how i should do that?

    **and i dont have child themes in my wp. is that an issue? pls. guide me there also.***

    @kenneth: i even implemented your corrections, except for the font, nothing else changes. i probably could give an admin user and pass maybe one of you could look into what the issue actually is. this is asking too much from a forum, but i am totally new to tweaking themes..

    pl. do respond.

    #22615
    ksmadhav
    Member

    my other issue is, now i am tweaking a test site and finally in a day or two i have to implement this onto the main site we have. is there any way to just lift this theme from the test site and put it to the main site with all the custom edits in place? coz, doing it all again would be cumbersome and i might make mistakes again and again and might have to keep asking for help here which wont look good!

    #22616
    ksmadhav
    Member

    there are so many more things i need to do to this tweaking-the-theme process. probably i should start off with learning the basics of css so that i can atleast understand what code says what. for starters all i need

    -> is the menu hover to change to a color (the golden yellow one)

    -> menu font to be changed to folksolid

    -> and home-page pane’s excerpt to be in justified alignment.

    -> and if possible i want the sidebar, but not as wide as it is in default. more like 60-70% of the original width.

    pls. let me knw of these tweaks if they are possible and guide me through.

    a million thanks in advance 🙂

    madhav

    #22617
    Prasanna SP
    Member

    Try adding !important after the colour code,

    Try 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 !important;
    color: #000099 !important;
    }

    If you don’t know how to set up a child theme, you might download the graphene child theme from here – http://www.prasannasp.net/graphene-child-theme-template/

    If you’re in hurry, it’s better to hire a professional.

    Else, you can give me the login credentials, and I’ll inspect what’s happening in your site. And I can tweak one or two things for free.. 😉 Use my contact form to send UN and PW – http://prasannasp.net/contact

    Custom page width is implemented in the 1.6 version. We are now testing the beta version. Wait a few days for it.

    BTW, where do you live? Chennai?

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

You must be logged in to reply to this topic.