customization of 24k theme

Community Forums Forums Design Tips and Tricks customization of 24k theme

This topic is: resolved

This topic contains 7 replies, has 4 voices, and was last updated by  moeblis 1 year, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #29588

    moeblis
    Participant
    Post count: 7

    Hello!

    Wondering if someone can help me make some minor tweaks to my site – vanloonenterprises.com (password to view is: password). I’m using the free 24k theme and have made some slight adjustments, but need a little more help.

    Any help in this direction would be amazing!
    1. Currently when I hover over my logo on the top, the area becomes blue. Can I make it so when I hover there is no color change or overlay?
    2. Is there a way to make the post titles not be all caps?
    3. As far as the menu goes, when I hover it is now blue – the way that I want it. However, the text is hard to read. I’d like to make the menu text white when I hover. This happens for all other hover items within the posts but not for the menu. How can I do this?
    4. I’d like to center my menu items. Currently they are left aligned. How do I do this?

    Thanks you so much!
    Monika

    #29589

    moeblis
    Participant
    Post count: 7

    also, I’m using this theme:

    http://www.studiopress.com/free-themes/24k

    #31323

    Jon Bellah
    Participant
    Post count: 109

    Could you please post a link to your site? It’s much easier to give specific help.

     

    Thanks!


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #31324

    Megan Gray
    Participant
    Post count: 23

    He did. It’s: http://vanloonenterprises.com/ and the password is…password. :)

    #31327

    Jon Bellah
    Participant
    Post count: 109

    Whoa, clearly I can’t read. Sorry about that.

    1. Add this to your CSS:

    #title a:hover {
    background: none;
    }

    2. In your CSS find:

    .page h1,
    .post h2 a,
    .post h2 a:visited {
    border-bottom: none;
    color: #fff;
    display: block;
    font-size: 40px;
    line-height: 40px;
    text-transform: uppercase;
    }

    And remove the text-transform:uppercase; part.

    3. In your CSS find:
    #subnav li a:hover,
    #subnav li a:active,
    #subnav li:hover a,
    #subnav .current_page_item a,
    #subnav .current-cat a,
    #subnav .current-menu-item a {
    color: #222;
    }

    And change color: #222; to color: #fff;

    4. I’m going to have to play around with this one… I’ll let you know when I get an easy solution.


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #31328

    ameeker
    Participant
    Post count: 29

    These changes will be made to your stylesheet.css file, or if you’re using JetPack, you can add them to the custom.css

    To get rid of the blue background when hovering over the title:
    .header-full-width #title-area a:hover {
    background: none;
    }

    To change the titles from uppercase to normal, find:
    .page h1, .post h2 a, .post h2 a:visited
    and remove
    text-transform: uppercase;

    To change the menu colors (I think I caught all of these)… you’ll have to find this:

    #subnav li a:hover, #subnav li a:active, #subnav li:hover a, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item a { color: #222; }

    and change it to this:

    #subnav li a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item a { color: #222; }

    #subnav li a:hover, #subnav li:hover a { color: #fff; }

    And then probably you’ll also want to make this change, too, so that the dropdown items are white instead of the darker color.

     

    #subnav li li a, #subnav li li a:link, #subnav li li a:visited { background-color: #4978bc; border: 1px solid #fddf71; border-top-width: 0; color: #fff; font-size: 11px; padding: 5px 10px; position: relative; width: 128px; }

    Give me another minute and I’ll have the menu centering.

     

     

    #31332

    Jon Bellah
    Participant
    Post count: 109

    So the easiest way to get the menu to center, is to add this to your CSS:

    #subnav .wrap {
    width: 835px;
    margin: 0 auto;
    }

    Note: The 835px is the current width of your menu. If you add any menu items, you’ll want to readjust.

    Sort of a hacky way of doing it, but it works.


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #31426

    moeblis
    Participant
    Post count: 7

    Thank you SO MUCH for your help you guys! Amazing. Kuddos all around!

    Monika

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.