Normally thesis theme has no border and has background is in white color. Now you can change your site border and background as per your wish. By default the thesis theme has more options to change style of your webpage.
We know a theme has number of sections in its webpage display like header, navigation menu, content, sidebars, footer and etc. In order to get more visibility and attraction towards your site you need to customize your webpage each section with separate border. If you want you can change your section background.
In this tutorial I am going to give some code to segregate your webpage section. For this
- Login your word press admin.
- Goto ‘Thesis options’ in left sidebar of the dashboard.
- Under thesis options we have three options select the third ‘custom file editor’ option.
- Here we have options to edit three files cusom.css, layout.css and custom_function.php.
- Choose ‘custom.css’ file and enter ‘edit selected file’.
- Indside custom.css copy and paste the following code.
code for border change
/* border for whole site*/
body.custom {
background: #44443f;
}
.custom #container {
margin-top: 0.9em;
margin-bottom: 0.9em;
padding: 0.3em;
background: #33332f;
border:0.3em solid #3e3e3a;
}
.custom #page {
background: #fff;
}
The above code you can change your site border width, color, margin and padding of the page container. If you want you can and footer and sidebar border by adding
.custom #footer and .custom#sidebar use similar coding and change your site as per your concern.
Finaly save the ‘custom.css’ file by clicking ‘Big ass save Button’.
Now check your site with better look.
Related Tutorials:
- How to Change sidebar widget background and Border in Thesis Theme
- How to make Post Sub heading box and change its Background Color in Thesis Theme?
- How to Customize Side Bar Heading Background colors and Fonts in Thesis Theme?
- How to add Background Image in Thesis Theme Navigation Menu
- How to Add Background Image for Sidebar Heading in Thesis Theme
{ 10 comments… read them below or add one }
Is this for the interior layout borders? Like the red you have? The code is a bit messed up in the yellow box though
hai tony,
where we have used red in fourblogger and yellowbox? i don’t understand what you are mentioning..tell me clearly..
Hi Pascal,
I love your site the articles are very informative and have plenty of the necessary details.
I think you may have inadvertently used the wrong video for you post. I think this video is about uploading a logo. You have an awesome site and quality articles. Keep up the good work.
hai Joseph,,
Thank you… just now i updated the the post with proper video..
once again thanks for specifying our mistakes…
Hi,
How do you reduce the border size, one of my sites has a left border bigger than the right border?
thanks
Thks, this worked perfectly
Appreciate all the help you giving out here
Cheers
Sandeep
Hi! I used the above code and changed my border around the whole page, however I want borders around each section of my blog just like this blog http://www.thetamom.com/
Can you tell me what code to use and where to put it?
Thanks so much!!
Bunch of thanks to 4blogger. You help us to customize thesis very easily. Keep up good work.
How would I make my page and posts pages look like this?
http://candlewoodretreat.com/
I can add a background as you have described , but how do I make all my pages
utilize the background image as that site does with no ” white post space ” in it?
I hope I have explained what I mean, not good at this stuff.
YOur site is great though, has learned so much!
Hi, I have been trying to put a border around my site using your code but nothing shows up. I aso tried changing the background color of the sidebar and nothing happened. I was able to do these things on another site that I made. I don’t know what I’m doing wrong or what it is about the site that is stopping it. Some of the site was set up by someone else, and he put some css into the custom css, is it possible that what he put is blocking the new stuff? What he put does not have any border or sidebar color so I don’t know why it would do that. Thanks.
Thanks.