SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Editing style.css of the Comet Wordpress Theme

    Hi Guys,

    Here's my site:
    http://constantword.com/wordpress/

    And here's the css:
    http://constantword.com/wordpress/wp...omet/style.css

    I'm trying to get the width of the top menu and all pages to match the width of the Header.
    I've tried adjusting:

    #c2 {
    width: 600px;
    float: left;
    margin: 0px 10px 0px 0px; padding: 0px 30px 30px 30px;
    overflow: hidden;
    border: solid 4px #D2D2D2; border-left: 0; border-right: 0;
    background: #FFFFFF;
    line-height: 170%; }

    But none of my changes take effect, which indicates that I'm editing the wrong thing. Can someone help with this?

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    There's a few things you need to do here, but before changing the c2 styles, you need to reduce the width of the site wrapper div:

    Code:
    #wrap {
    width: 788px;
    margin: 0px auto 0px;
    padding: 0px;
    clear: both;
    }

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There's a few things you need to do here, but before changing the c2 styles, you need to reduce the width of the site wrapper div:

    Code:
    #wrap {
    width: 788px;
    margin: 0px auto 0px;
    padding: 0px;
    clear: both;
    }
    Thanks Ralph! Now do I adjust the wrapper's padding for all my text to be visible?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    No, you now need to change the width on c2:

    Code:
    #c2 {
    width: 728px;
    margin: 0;
    }
    The 728 figure is 788 minus the 30px of padding on each side.

    Also make sure to remove the other width declaration of 600px, and you don't need float, either:

    Code:
    #c2 {
    width: 600px;
    float: left;
    margin: 0px 10px 0px 0px;
    padding: 0px 30px 30px 30px;
    overflow: hidden;
    border: solid 4px #D2D2D2;
    border-left: 0;
    border-right: 0;
    background: white;
    line-height: 170%;
    }
    Edit:

    By the way, you don't actually need to set a width on c2 at all. You can just remove both of those widths and not set one at all.

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No, you now need to change the width on c2:

    Code:
    #c2 {
    width: 728px;
    margin: 0;
    }
    The 728 figure is 788 minus the 30px of padding on each side.

    Also make sure to remove the other width declaration of 600px, and you don't need float, either:

    Code:
    #c2 {
    width: 600px;
    float: left;
    margin: 0px 10px 0px 0px;
    padding: 0px 30px 30px 30px;
    overflow: hidden;
    border: solid 4px #D2D2D2;
    border-left: 0;
    border-right: 0;
    background: white;
    line-height: 170%;
    }
    Edit:

    By the way, you don't actually need to set a width on c2 at all. You can just remove both of those widths and not set one at all.
    Ok, here's my new edits

    .attachment #content #c2 {
    margin: 0px;
    }

    and

    #c2 {
    margin: 0px 10px 0px 0px; padding: 0px 30px 30px 30px;
    overflow: hidden;
    border: solid 4px #D2D2D2; border-left: 0; border-right: 0;
    background: #FFFFFF;
    line-height: 170%;
    }

    But no changes occur. No padding on the right.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You've still got this:

    Code:
    #c2 {
    width: 900px;
    margin: 0;
    }
    Remove that line in red. It's in the head of your page:

    Code:
    <style type="text/css">
    	body, input, select, textarea { font-family: Georgia, Verdana, Tahoma, Helvetica, sans-serif; }
    body, input, select, textarea { font-size: 15px; }
    #c2 { width: 900px; margin: 0; }
    #c3 { display: none; }
    .post-author { display: none; }
    
    	</style>
    If you can't work out how to remove that, than perhaps just override it in your style sheet with

    Code:
    #c2 { width: 728px !important; }

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Ralph. I just used the override.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    No worries, glad that helped. As a general rule, it's best to keep your site as clean as possible and not have to keep overriding things like this, but it's not a sin or anything. You will probably find those styles in some header file somewhere, by WordPress is not my thing. That would be a question for the CMS & WordPress forum.

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No worries, glad that helped. As a general rule, it's best to keep your site as clean as possible and not have to keep overriding things like this, but it's not a sin or anything. You will probably find those styles in some header file somewhere, by WordPress is not my thing. That would be a question for the CMS & WordPress forum.
    I needed some sleep but here it was

    if( $fp_options['fp_layout'] == 'hidden') { // no sidebars
    echo "#c2 { width: 900px; margin: 0; }\n";
    echo "#c3 { display: none; }\n";
    }

    Thanks again

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Cool, glad you found it.

  11. #11
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since it's the on the same topic, I'll post again here:
    http://constantword.com/wordpress/

    Is there any way to edit the tiny grey border around the header image? Thanks.

  12. #12
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bladefist View Post
    Since it's the on the same topic, I'll post again here:
    http://constantword.com/wordpress/

    Is there any way to edit the tiny grey border around the header image? Thanks.
    Edit: Never mind, the client decided (thankfully) that it wasn't a big deal.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    If you're talking about the border around the Constant Word image, it's part of the image itself.

  14. #14
    Non-Member
    Join Date
    Aug 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use Firefox browser and install a plugin "Firebug" then open your website in firefox and press F12 key to activate firebug. Select inspect element, this will show you html alongwith css in a window. Now make changes in css file and this tool will also tell you which css file is being edited. Just not the selector of element and css file. Then download your css file or edit through online editor but this time you will be edit the exact file.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •