Editing style.css of the Comet Wordpress Theme

Get Started
1

Hi Guys,

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

And here’s the css:
http://constantword.com/wordpress/wp-content/themes/comet/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

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:


#wrap {
width: [COLOR="#FF0000"]788px[/COLOR];
margin: 0px auto 0px;
padding: 0px;
clear: both;
}
3

Thanks Ralph! Now do I adjust the wrapper’s padding for all my text to be visible?

4

No, you now need to change the width on c2:

#c2 {
width: [COLOR="#FF0000"]728px[/COLOR];
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:

#c2 {
[COLOR="#FF0000"]width: 600px;
float: left;[/COLOR]
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

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

You’ve still got this:

#c2 {
[COLOR="#FF0000"]width: 900px;[/COLOR]
margin: 0;
}

Remove that line in red. It’s in the head of your page:

<style type="text/css">
	body, input, select, textarea { font-family: Georgia, Verdana, Tahoma, Helvetica, sans-serif; }
body, input, select, textarea { font-size: 15px; }
[COLOR="#FF0000"]#c2 { width: 900px; margin: 0; }[/COLOR]
#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

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

Thanks again Ralph. I just used the override.

8

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. :slight_smile:

9

I needed some sleep but here it was

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

Thanks again

10

Cool, glad you found it. :slight_smile:

11

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

Edit: Never mind, the client decided (thankfully) that it wasn’t a big deal.

13

If you’re talking about the border around the Constant Word image, it’s part of the image itself.

14

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.