SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  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
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 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
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 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
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 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)
    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.

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

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

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