Wootique Sidebar size

Hi all.

I have tried to sort this myself but have had little luck.

I have copied the code below into the custom.css file in the theme direcotry and changed 2 values.
That of #main(width:504px; padding-right:40px; )
to #main(width:544px; padding-right:40px; )
and #sidebar{width:280px;}
to #sidebar{width:240px;}

Thats +40 for main and -40 for sidebar.

This does seem to adjust the widths of information shown in the ‘panels’ but the actual ‘panels’ them selves do not change.

My site is avaiable below with the custom.css file containing the code in the code box. What else would I need to change ? Or should I be changing something else ?

Any help would be much appriciated.

web site : https://www.robsbots.co.uk/
Have added note to front page of site to help explain.

Thanks

Rob

/*-------------------------------------------------------------------------------------------*/
/* 2. SITE STRUCTURE & APPEARANCE */
/*-------------------------------------------------------------------------------------------*/

/* 2.1 Containers & Columns */
#wrapper  { }
#container { background: #fff; -webkit-box-shadow:0 0 40px rgba(0,0,0,0.1); -moz-box-shadow:0 0 40px rgba(0,0,0,0.1); box-shadow:0 0 40px rgba(0,0,0,0.1); }

#main{width:544px; padding-right:40px; }
.layout-full #main, #main.fullwidth { width:880px; }

#sidebar{width:240px;}

.col-left { float: left; }
.col-right { float: right; }
.col-full  { width: 980px; margin: 0 auto; }

.layout-right-content #main.col-left { float: right; }
.layout-right-content #sidebar.col-right { float: left; border-left:0; }

.col2-set:after { content:""; display: block; clear: both; }
.col2-set .col-1, .col2-set .col-2 , .form-row { width:48%; float: left; }
.col2-set .col-2, .form-row-last { float: right; }
.form-row-first { clear: left; }
.form-row label { display: block; }
.form-row input, .form-row textarea, .form-row select { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; }
.form-row input.button, .form-row input.button { width: auto; }
.form-row-wide { width:100%; float: left; clear:both; }

Anybody have any ideas ?

If not I’ll have to move to a different theme.

Thanks

Rob

You are halfway there. The last thing you have to do is edit the background colour by editing the sidebar-right.png in Photoshop and upload it with ftp.

The path of the file is: https://www.robsbots.co.uk/wp-content/themes/wootique/images/sidebar-right.png

Thats great Sheann

Thanks for the info. Thought it was a layout thing/ccs thing. Didn’t even think to check graphic files.

One last question.

How do I move this file to the side of the page. I have edited it, but it now sits to far to the left.

Thanks for your help

Rob

What did you do to the file? Don’t change the position or size of the file.
All you have to do is make the white part of the background wider. It’s kind of hard to explain. Do you have Photoshop?

Sorry. I’m a tart. I misunderstood and shrunk the image down. DOH!!

The image was so thin when I edited it I didn’t realise it was white and grey. Just thought it was the grey bit. Will edit a new image and upload.

Thanks for your help.

Rob

No problem, glad to be of service. Looks like you got it to work!

Just got it sorted.

Thanks for all your help.

Been trying to suss this for days. So easy once you know how.

Thanks for your help again.

Rob
(Tall cause I’m standing on the shoulders of giants.)

You should try installing the firebug addon in firefox. It will make your life so much easier.

I have just installed it. I’ll need a bit of time to get used to it. I have no idea when it comes to CCS/HTML etc. I can do a bit of C, but web programming is all new to me. It does look like it could be very handy for tracking down the code to adjust though.

Thanks for the tip.

I’ll have a play and see what it can do for me.

Rob

Hi, Sheann and Robsbots,

Just wondering… what is the purpose of that sidebar-right.png image ?
I try to disable / striped down that image with firebug, and nothing happen.. The page remains the same.

So that sidebar-right.png image is useless, right ?

Why the theme developer uses an image instead of ‘background-color’ CSS rule?

Alvbayu: The sidebar-right.png isn’t useless. It gives color to the background. If you open the png it will look like it’s white but if you zoom in you’ll see that the main part is white and the sidebar is grey.

I’m guessing that the reason they use an image for the background instead of a background color in css is because if the content of the main part is longer than the content of the sidebar the background color of the sidebar (grey) will stop halfway through the page. However, if you use an image for the background the color of the sidebar will go down to the bottom of the page.

Got the same problem. And solved because of you guys.
Thanks so much

This is not working for me on localhost. I added the snippet shared by @robsbots, it moved the text in main area as well as the sidebar.

However, replacing the sidebar-right.png with https://www.robsbots.co.uk/wp-content/themes/wootique/images/sidebar-right.png doesn’t move the sidebar border.

:/

Chirag: Did you make the white part of the .png wider before replacing it?