CSS Stylesheet Edit...

This may be outside of your support, but I thought it wouldn't hurt to ask! I'm using the wordpress theme Yoko by elmastudio. I've tried lots of themes, but this one best suits my needs in terms of use and appearance. There are, however, two things I'd like to change about it and after hours of staring at code, I've still been unable to do so. (I don't know anything! about CSS except that it moves things on my page.)

my site is terrysloan.com, if that helps.

What I'm trying to edit:
I'd like to move my main navigation menu to below my site title (& that grey line!) I'd like my sidebar 1 to be wider.

Thanks in advance, if you're able to help, if not, thanks anyway!
Melanie

  • mort3n
    • The Crimson Coder

    Hi melaniesloan,

    Disclaimer : I'm no css wiz :slight_smile:

    Take a look at the page source (FireFox, right click, View page source).

    The navigation menu is in a nav tag with id=mainnav inside a header tag with id=branding.

    Now take a look at the style.css file in your theme.

    Here you find the code

    /* Navigations
    --------------------------------------------- */
    /* --- Main Nav --- */
    #branding #mainnav {
    	margin: 30px 0 0;
    	max-width: 70%;
    	float:right;

    The line with margin specifies that the navigation has a 30 px top margin. Increase this and the navigation moves down.

    A useful tool is the FireFox addon FireBug, where you can do these changes live and then modify your css file when you have found the desired values.

    Caveat: Test on mobile devices.

    Cheers
    Mort3n

  • JosephLee1179
    • The Incredible Code Injector

    I don't have that theme. I think it has a subnavigation ( a second menu ) exactly where you want it. Go to the menu area in admin. Make a second menu called secondary menu, then on the left drop down and list that second menu as the subnav ( subnav may be called secondary menu or anything else).

    If that doesn't work then we can move the <nav>.

    The first thing you need to do is go in to the CSS.STYLE sheet. This sheet controls the style of html (structural) elements.

    #branding #mainnav {
    margin: 30px 0 0;
    max-width: 70%;
    float: right;
    }
    Remove the float: right; from the css sheet.

    The next step is more difficult. It's in the html.

    You now need to go to the page.php file. Move the <nav> and everything in between </nav> below the H1 line.

    So basically copy from <nav> to </nav> then delete it. You need to move it below the <hgroup></hgroup>.

  • DSafari
    • Design Lord, Child of Thor

    The best way to do this would be creating child themes - so you can keep with yoko updates. It's not good practice to directly edit theme files.

    Here's a guide to doing child themes:
    http://codex.wordpress.org/Child_Themes

    This is what you need in the new child theme:

    copy header.php to new child theme
    Select <nav id="mainnav"…> to </nav> select all code in between
    Move right below </hgroup>

    create new style.css file with just this:
    /*
    Theme Name: Yoko Child
    Theme URI: http://terrysloan.com/
    Description: Child theme for the Yoko
    Author: Terry Sloan
    Author URI: http://terrysloan.com/
    Template: Yoko
    Version: 1.0
    */

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

    #site-title { border-bottom: 1px solid #ddd !important; }

    #wrap { border-top: none !important; }

    The rest will be just playing with numbers in CSS to get proportions right (including the sidebar)

    Let us know how this goes for you.

  • aecnu
    • WP Unicorn

    Greetings Melanie,

    Thank you for bringing this item to our attention.

    You are indeed correct that we do not support custom coding directly, however if we know the answer or have direction we will certainly provide it and would not withhold an answer.

    In this case it appears that other members of the community have come through for us with several attempts to help as indicated above. Bravo! folks.

    You may also want to check out: http://www.w3schools.com/css/

    Thank you for being a WPMU DEV Community Member!

    Cheers, Joe

  • melaniesloan
    • New Recruit

    Thanks so much for your help, everyone! I took your advice, DSafari, and made a child-theme directory before changing anything. As of now, it holds a style.css file with the content you suggested:
    /*
    Theme Name: Yoko Child
    Theme URI: http://terrysloan.com/
    Description: Child theme for the Yoko
    Author: Terry Sloan
    Author URI: http://terrysloan.com/
    Template: Yoko
    Version: 1.0
    */

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

    #site-title { border-bottom: 1px solid #ddd !important; }

    #wrap { border-top: none !important; }

    followed by the additional suggestion of

    #branding #mainnav {
    margin: 30px 0 0;
    max-width: 70%;
    }

    (I removed the 'float: right;" )
    I read on http://codex.wordpress.org/Child_Themes that I might need to switch to another theme and back again for the child theme to take effect, so I did that. As of now, however, nothing has moved.

    In your reply, you mentioned "The rest will be just playing with numbers in CSS to get proportions right (including the sidebar)." Where do I do this? in the original yoko style.css form?

    Thanks for bearing with me, guys!
    Melanie

  • DSafari
    • Design Lord, Child of Thor

    It doesn't look like you've switched to the new child theme as yoko is still selected.

    You'll need to open up ftp and create your new child theme directory in wp-content/themes with the new style.css and header.php

    Also in: #branding #mainnav add:
    float: left !important;

    All you are doing with the child theme is overriding css.

    Let me know how you go :slight_smile:

  • aecnu
    • WP Unicorn

    Greetings Melanie and DSafari,

    @DSafari it is great to have you aboard. I am a server and network administrator professionally and never really dug into the theme development arena but certainly happy that we have you here.

    @Melanie when you create a child theme one must activate the child theme itself in the admin dashboard or it will not have any effect.

    Please advise as to how you are making out with this.

    Cheers, Joe

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.