[Theme: Clean Home] How do I increase width of sidebar widget area?

Hi mikebrownvb,

It seems the entite site is a bit ‘narrow’ for it’s content.
Most themes will allow you to choose the width of the site.
I suggest you widen it to 1024px -currently approx. 875px- .
This should give you a bit more space to play with.

Should your theme not have such an option, call again on this post and I’ll guide you through an alternative solution.

Hello W.P,

Thank you so much for assisting me. DO you know where in the admin panel I would be able to find the option to change the width of the site? Would I change it in the style.css file and if so which line of code am I looking for.

I look forward to hearing back from you and thank you again for your assistance.

Best Regards,
Mike B

Hi Mike,

I need more info to give a ‘made to measure’ advice.
What is the url of your site?
What theme did you use?

Hello W.P. Ginfo

Thank you for your response.

My site is projectvideoviral.com and the right sidebar widget area is cutting off my widgets so my adsense ads are not showing correctly and neither is my Facebook Social plug-in. Can someone please tell me how to adjust this (make wider i guess) so these things do not get cut off?

The theme I am using is Clean Home By Mid Mo Design

I greatly appreciate any and all help.

Best Regards,
Mike B

Hi Mike,

I’ve had a look at the theme ‘clean home’ and it is what it’s advertises to be:

• ‘Lightweight – A grand total of two images, both 2×6. The rest is XHTML and CSS.
• Minimalistic – No more distracting of your users, with our theme, your content stays king.’

As stated HTML and CSS are the mainstay of it all. Thus there are very few / no frills when it comes to an ‘easy user-interface’ for setting up and changing things to fit your needs. This means you’ll need to get to grips with HTML and CSS.

The other thing that strikes me is that the theme was released in nov. 2008. The last response I could find was sep 2011.
I cannot find any info on updates etc.
It makes me wonder if this theme is well maintained by the author[s].

This does not make it a bad theme, it is what it is. If however you’re fairly new to WP, websites, HTML and CSS, you might choose differently.
== == ==

To make these kind of changes to your site requires you to make changes to your CSS and / or html and php.
Before you do anything else…

Make a backup of your site!!

1. Use FTP to backup the files.
2. Make sure to also backup your database.

https://codex.www.ads-software.com/Backing_Up_Your_Database

Next: Create a childtheme

3. Don’t make any changes to a theme itself. Instead make the changes to a childtheme. Should the author of your original theme update the theme, your changes will not be overwritten. Your site with your adaptations will remain intact.
   (see: https://codex.www.ads-software.com/Child_Themes )

Suggestion: use the ‘one click childtheme plugin’.

4. Installed the childtheme? Now activate it.
   Check if things look ‘normal’.
5. Use FTP to access the files of your site and it’s childtheme.
6. Use NOTEPAD++ or proper EDITOR [not wordprosessor] to edit css and php.
7. Make the changes in the CHILDtheme!
   – copy php files / css-file(s) of the original theme [as required] to the childtheme directory and edit them as required.
8. https://www.w3.org/Style/Examples/011/firstcss.nl.html
   https://codex.www.ads-software.com/Getting_Started_with_WordPress
   https://codex.www.ads-software.com/CSS
   https://codex.www.ads-software.com/Finding_Your_CSS_Styles
   https://codex.www.ads-software.com/FAQ_Troubleshooting

Now that you’ve done the basics – regardless of the theme you are using-… Let’s make the desired changes.

NOTE!!
These changes we make to style.css of the CHILD-Theme!!
Add top style.css:

/*
Theme Name:     child clean home
Description:
Author:         webmaster
Template:       clean-home

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../clean-home/style.css");

body {
/*addition*/
width:1024px;
margin:0 auto;
}

#wrapper {
/*width:900px; changed */
margin:40px auto;
}

#header {
float:left;
/*width:900px; changed*/
border-bottom:1px dotted #ccc;
margin:0;
}
#content {
/*width:620px; changed*/
width:700px;
float:left;
border-right:1px dotted #ccc;
padding:0 0 30px 0;
min-height:420px;
overflow:hidden;
}
#sidebar {
/*width:250px; changed*/
width:300px;
float:right;
margin:0 0 25px 0;
overflow:hidden;
}
#footer {
font-size:0.9em;
/*width:900px; changed */
width:100%;
float:left;
border-top:1px dotted #cccccc;
text-align:center;
padding:30px 0 40px 0;
}

NOTE: width of sidebar and content combined, must stay within the value of the body-width!!

You should now have enough space …

Wow,

Thank you so much for this information. This information is vital and wonderful to have. I really appreciate you going above and beyond to assist me. Thank you!

I am going to get started making the backup and childtheme. I will inform you on my progress and let you know if I run into any questions.

Again, thank you for the assistance this is wonderful!

PS: After seeing the site is there a theme that you would recommend I use and how difficult is it to switch themes while keeping all the plug-ins and content intact?

Best Regards,
Mike B

Hell0 W.P. Ginfo,

Thank you again for your help.

I followed your instructions as laid out in your previous post above. I made the backup and installed the childtheme plug-in and changed the style.css file of the child theme through the file manager.

Please take a look at the site again. Projectvideoviral.com it looks like the adjustment worked and made the sidebar wider but for some reason it is not aligned correctly with the top of the site. It is like the entire sidebar widget area got pushed down below the content area.

Can you please take a look and let me know how I can fix this. Thank you again for you assistance. I have already learned a lot from your help.

I look forward to hearing back from you.

Best Regards,
Mike B

Hi Mike,

To change themes is very easy indeed.

1. Dashboard > appearance > themes > Install themes[tab]
2. either search by keyword, or tick a number of boxes that are the criteria / your wishes
3. a list of themes appear
4. install / preview / details
5. Found one you like? > install now
6. have a more indepth evaluation and see if it really is the beezzz kneezzzz
7. don’t like it? Just re-activate a previous theme, delete the discarded one and the search continues…
8. once you’ve found yourself ‘a keeper’, reactivate the menu you made in the old version [if that applies]
9. the content of your site is not affected by changing themes. The way the content displays, may be affected; But that’s exactly why there are many different themes!

Hi Mike,

I tested the above childtheme-style-sheet on your theme; It worked fine… so it makes me wonder…

Looking at your site I wonder if your style.css of the childtheme is identical to the one published above, or not.

Did you activate the childtheme?
Dashboard >appearance > themes > activate the appropriate theme

What I see is that TWO sets of styles are defined / active for the items such as content, sidebar and body.

To test if the childtheme is active and dominant, try the following:

Add to the childtheme style.css:

h1,h2,h3,p{color:#99cc66;}

and save upload and check the result [press <F5>];
Your text should be ‘apple-green’. If that’s the case, the childtheme is active and dominant.
Let me know…

Hello W.P.Ginfo,

Thank you for the information. I did as you said and copy and pasted the code into the style.css at the top and it turned most of the content apple green but one paragraph remained black and the very top header areas remained red but the vast majority of the content in the body area did turn apple green.

Also, I did previously try to change the theme uploaded and activated a different one but for some reason nothing changed. I am not sure why or if I am doing something wrong. I have used WordPress a few times and the theme usually changes when activated no problem.

I am going to give it another shot with installing a different theme. Is there anything special I need to do since I am running the child theme?

Thank you for your help. I look forward to hearing back from you.

Best Regards,
Mike B

I am going to hold off on changing the theme until we are able to get the sidebar widget area back in the correct place.

I am sure I have the child clean home theme installed and activated.

Copied and pasted the exact code from above again into the style.css child theme and it is still dropping the sidebar widget area below the content main body area.

Did we make the sidebar area too wide and now it does not fit?

Please help me get the sidebar area back in the correct place.

I look forward to hearing back from you.

Best Regards,
Mike B

reduce the size of the content to approx 580px.

Style line 29:

#content {
    float: left;
    border-right: 1px dotted rgb(204, 204, 204);
    padding: 0px 0px 30px;
    min-height: 420px;
    overflow: hidden;
    width: 580px;
}

Hello W.P Sup,

Thank you. Analyze and execute. This worked. Thank you.Joint effort closed this thread.

I appreciate this entire thread. I learned so much from everhone envoleved.

The WordPress coummuinity is strong!

You guys have no idea how this CMS has effected the world in a positive way!

This engine is going to drive humanity!

You’re welcome