Support » Theme: Forever » Lines surrounding menu bar

  • Hi,

    I am using forever theme and want to delete the double lines that are above and below the menu buttons. Then I want to create one line that goes from tip to tip of the page (horizontally) under the menu bar.

    I have a childs theme.

    My blog : winepug.com
    Line example : cupcakesandcashmere.com

    Also, how do I add the search bar on the same line as my menus like cupcakesandcashmere.com has as well.

    thank you for your help!!

    Heather

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi Heather, I’ll answer your questions separately.

    Using Firebug* I can see that those lines are coming from this part of the CSS:

    #access {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #EEEEEE;
        border-image: none;
        border-style: double;
        border-width: 3px 0;
        clear: both;
        display: block;
        float: left;
        margin: 1.615em auto;
        min-height: 43px;
        position: relative;
        width: 100%;
    }

    The four border- attributes are the ones at play here.

    To remove the double border above your navigation bar, you’d put this in your child theme:

    #access {
        border-top: none;
    }

    But since you also want to replace the bottom double border with a single border, you’d make it something like this instead to cover both borders:

    #access {
        border-top: none;
        border-bottom: 1px solid #eee;
    }

    You can adjust the width as you like by changing 1px.

    Forever is different from the theme used by Cupcakes and Cashmere in that all content in Forever, including the top navigation and header section, is contained within an HTML element that has a restricted width, so it would require some structural changes to the theme to have the horizontal line below the menubar to continue outside the bounds of the main container.

    *Extremely useful tool for web development

    To place the search box within your top menu strip, you’ll need to copy the file masthead.php into your child theme.

    Add this code below line 28 to display the search box:

    <div class="topsearch"><?php get_search_form(); ?></div>

    Next you’ll want to move the box to the right, by adding this to your child theme’s CSS file:

    .topsearch {
       float: right;
       display: inline;
    }

    Finally, you’ll need to add this to your CSS as well to push the menubar to the left, so it doesn’t overlap the search box:

    #access ul {
        float: left;
        right: 0%;
        text-align: left;
        margin-left: -145px;
    }

    Here’s the final result:

    Automattic Theme Testing Break and fix Rinse and repeat 1

    If you’ve already made modifications to your child theme you may need to adjust some of the above code.

    Thread Starter Winepug

    (@winepug)

    thank you so much! The only thing that didn’t work for me is the Search.. I added it underneath line 28 in Child’s theme however nothing happened. Please let me know and thanks for your help!

    Also, is there an easy way to redo the lines on the side bar and for the posts? not sure if there is a standard code I can use.

    Thanks!

    Hi there, it looks like you added the masthead.php code to the style.css file itself? Only CSS code can go into the style.css file.

    For a child theme you actually have to create a copy of the entire masthead.php file and place this second copy of the file, with your changes in it, into the child theme folder. Be sure to remove the PHP code from style.css as well. Let me know how it goes!

    Here are some guides to child-theming in case you’d like to have a look:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/49770088

    Also, is there an easy way to redo the lines on the side bar and for the posts? not sure if there is a standard code I can use.

    I’m not sure what you mean by this – mind explaining a bit more what you mean by “redoing the lines”? Thanks!

    Thread Starter Winepug

    (@winepug)

    I did it! Thank you for explaining and for the resources.

    For example:

    Posts: Is there a way to just have one line at the bottom of each posts Tags to separate posts instead of having the line below the post’s title, line at end of post before social buttons, then line above the tags. Would like one solid line after the tags. If so, can I play with line width?

    Side Bar: Is there a way to omit the vertical side bar line that separates posts and sidebar? Is there a way to put line horizontal line above and below each widget to separate?

    Again this is basically like cupcakesandcashmere.com’s idea.

    THank you again!

    I did it! Thank you for explaining and for the resources.

    Wonderful!

    Posts: Is there a way to just have one line at the bottom of each posts Tags to separate posts instead of having the line below the post’s title, line at end of post before social buttons, then line above the tags. Would like one solid line after the tags.

    Again, using the Firebug tool I mentioned earlier, I was able to find the right CSS selectors for the existing horizontal lines.

    To remove the lines below the sharing buttons and the post title, you’d add this to your child theme’s CSS:

    div.sharedaddy div.sd-block, .entry-header .entry-meta {
       border: none;
    }

    To remove the line above the tags (and other meta-information below each post) and place one below it instead, add:

    footer.entry-meta {
       border-bottom: 1px solid #eee;
       border-top: none;
    }

    If so, can I play with line width?

    Absolutely. Just replace the number 1 in this line to however many pixels wide you’d like your border to be:

    border-bottom: 1px solid #eee;

    CSS can be really fun and powerful once you get the hang of it. I have some good resources for learning basic CSS in the bottom two sections here: http://zoonini.wordpress.com/

    This is a great post about finding CSS selectors on your site:
    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Why don’t you have a look and see if you can figure out the sidebar tweaks you want on your own? I’m here if you run into any stumbling blocks along the way. 🙂

    Thread Starter Winepug

    (@winepug)

    Hi,

    I changed the lines surrounding posts however there is still a link above the social media/comments etc. Any suggestions?

    I tried fooling with the other code for the side bar but am stumped… I added this but it didn’t work……. Any help would be great. THank you!

    div.sharedaddy div.sd-block, .margin-right .entry-meta {
    border: none;
    }
    margin-right.entry-meta {
    border-top: none;
    border-bottom: none;
    }

    Hi there, so strange, as it works in my child theme.

    Could you try adding !important before the semi-colon:

    div.sharedaddy div.sd-block {
        border-top: none !important;
    }
    Thread Starter Winepug

    (@winepug)

    hmm I tried that and it doesn’t work….

    Hi Heather,

    Could you try:

    #content div.sharedaddy div.sd-block {
      border-top: none;
    }

    Also, make sure there are no other styles below this one that could be overriding it. Try putting it at the very bottom of your CSS file.

    Hi Kathrin,

    Can you help me? I wanna know what the theme used by Cupcake & Cashmere…
    Thank you!

    Rayssa Mateus

    Moderator Kathryn Presner

    (@zoonini)

    Hi Rayssa – it looks like cupcakesandcashmere.com is not currently running WordPress at all.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Lines surrounding menu bar’ is closed to new replies.