Editing the width of the margins on a wordpress blog. WordPress
I've created a wordpress blog using the Neutica theme. It's very suitable for the purposes of this site, however I would like to change the margins so that when you read a blog post it isn't all cluttered to the left. The site has a useful sidebar, so I don't want to interfere with that, and the margin width works well for the homepage, it's mainly for about pages and individual blog posts.
Please can someone advise me on how to edit the code, is it the stylesheet I need to edit?
Please look at the site here: www.scenofestexchange.com
I'm ideally looking for someone to send me the code, so I can copy and paste it in the right place.
Answers (5)
Nilesh shiragave answers:
If you want to center your website then open
http://scenofestexchange.com/wp-content/themes/neutica/css/layout.css
layout.css and change
#wrapper{margin:20px 0px 0px 20px; max-width:1000px; min-width:1000px;}
to
#wrapper{margin:20px auto 0px auto; max-width:1000px; min-width:1000px;}
Ehthisham tk answers:
edit /wp-content/themes/neutica/css/layout.css and change the following
for aligning change line 3 to
#wrapper{
margin:20px auto;
width:1000px;
}
and line 33 to
.entry-title, .entry-title a {
display: block;
font-size: 20px;
margin-bottom: 10px;
width: 200px;
}
I suggest you to edit the following
at the bottom in your type.css file add
h3.widgettitle{
padding-bottom: 2px;
}
layout.css line 103
#initial.sidebar {
float: left;
padding-right: 0;
width: 340px;
}
layout line 81
#menu {
float: left;
min-height: 135px;
padding: 15px 0 0 15px;
width: 324px;
}
Duncan O'Neill answers:
Hi James,
add the following code to the bottom of your layout.css to leave the home page as is , but centre inner pages;
body.page #wrapper {margin-left:auto;margin-right:auto;}
best,
Duncan
James Cawson comments:
Hi Duncan,
Thank you for your response.
Is the layout.css a file in my wordpress files folder, or can I edit using the wordpress online editor? I haven't used an ftp client in building this site yet, so I'm worried that if I start using one now I may loose changes I made from the dashboard.
All the best,
James
Duncan O'Neill comments:
James,
the layout.css file is at
http://scenofestexchange.com/wp-content/themes/neutica/css/layout.css
You should be able to edit it via
http://scenofestexchange.com/wp-admin/theme-editor.php
If not, then you'll need to use a FTP programme. If you make sure to only edit the one file, and add only the code given, you should be ok.
One other thought; posts, as opposed to pages, probably have a body class of 'post', among others, so you may need a small addition to the code I gave you above;
body.page #wrapper, body.post #wrapper {margin-left:auto;margin-right:auto;}
best,
Duncan
James Cawson comments:
On the wordpress admin edit area there is no layout.css. There is a style.css, is that the right place?
Also, am I putting it right at the bottom of the layout.css? That is in the footer section. When I tried this with the ftp client provided by my hosting, it didn't work.
I'm sorry, I'm such a novice. Can you please spell it out for me.
James
Duncan O'Neill comments:
James,
sorry about the delay in replying.
Yes, it will also work, because of specificity, if you add the code to the bottom of style.css;
body.page #wrapper {margin-left:auto;margin-right:auto;}
best,
Duncan
Duncan O'Neill comments:
Ach, sorry! Second piece of code, that is, to the bottom of style.css;
body.page #wrapper, body.post #wrapper {margin-left:auto;margin-right:auto;}
Duncan O'Neill comments:
James,
last edit I hope. The code below will make sure archive ( and category ) pages as well follow the same pattern as the other 'inner' pages. Take out previously added code, and replace with;
body.page #wrapper,
body.post #wrapper,
body.archive #wrapper {margin-left:auto;margin-right:auto;}
James Cawson comments:
Hi Duncan,
Thanks for all your help so far, I'm learning a lot from your guidance!
Once again I cannot get this edit to work. I have tried using my cpanel's ftp client, as well as using filezilla to attempt to edit the layout.css and the edit has made no change to the margins of the pages or the posts. I'm right in using text-editor to add the new code right at the bottom of the page and then to upload it to replace the old layout.css file, aren't I?
Is there anything else I can do? I'm afraid that the Neutica theme is controlling how the pages are viewed.
I'm prepared to raise the $12 fee if I can get this issue accomplished soon.
Thanks again,
James
Duncan O'Neill comments:
James,
you can make the changes I gave you above to the style.css file, which means you won't have to mess around with an FTP client or CPanel. Because the styles are more specific [1], they should "over-write" earlier styles in layout.css.
Put them at the bottom of the file, and they should work.
UPDATE: It seems that you /have/ made the changes I suggested to your layout.css file. So the fact that you're not seeing them is either a browser, or a cache issue. More likely to be the latter. In Firefox, do CTRL+Shift+R ( hold down the CTRL and Shift and press R ). In IE do CTRL+F5. If that DOESN'T work, it's probably a browser issue. In which case, which browser are you using please?
[1]http://www.htmldog.com/guides/cssadvanced/specificity/
best,
Duncan
Duncan O'Neill comments:
James,
just in case my previous post wasn't clear, since you've made the changes to layout.css ( which is probably the best place for them anyway ), you don't NEED to duplicate them in style.css
best,
Duncan
James Cawson comments:
Hi Duncan, thanks for the update.
I'm using Safari. Curiouser and curiouser!
James
Mathias Stav answers:
Looks like it came double up here :S
BTW, margin works like this:
margin: top right bottom left;
or
margin: top&bottom left&right;
Mathias Stav comments:
Hi James,
The easiest thing to do is to add:
#wrapper{margin:20px auto;}
To the bottom of your style.css
This will center your page.
99 posts answers:
interesting... just wondering; can this be done with just a single category? and subsequently applied to all the posts within it?
i have a different theme, but would absolutely love to incorporate a single #wrapper line into the style.css in order to have my posts 'full width' yet the remaining parts of the site as-is.
i can find the place to put it no problem, but just wondering about applying full width to a single category.
any ideas?
thanks in advance.