WordPress.org

Forums

[resolved] Wootique Sidebar size (20 posts)

  1. robsbots
    Member
    Posted 3 years ago #

    Hi all.

    I'm just setting up a shop using Woocommerce and Wootique. I would like to slim down the sidebar on the Wootique theme but have been unable to do so. I can't find a setting anywhere, so I assume I should be playing with css in the custom.css file but I have no idea what I need to do.

    Currently the sibebar is about 1/3 for the total page width (sidebar + content area) and I would like to slim it down to about a 1/4. I'm using the latest version of Woocommerce and Wootique.

    Any advice would be much appreciated.

    Thanks

    Rob

  2. robsbots
    Member
    Posted 3 years ago #

    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 : http://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; }
  3. robsbots
    Member
    Posted 3 years ago #

    Anybody have any ideas ?

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

    Thanks

    Rob

  4. sheann
    Member
    Posted 3 years ago #

    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: http://www.robsbots.co.uk/wp-content/themes/wootique/images/sidebar-right.png

  5. robsbots
    Member
    Posted 3 years ago #

    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

  6. sheann
    Member
    Posted 3 years ago #

    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?

  7. robsbots
    Member
    Posted 3 years ago #

    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

  8. sheann
    Member
    Posted 3 years ago #

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

  9. robsbots
    Member
    Posted 3 years ago #

    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.)

  10. sheann
    Member
    Posted 3 years ago #

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

  11. robsbots
    Member
    Posted 3 years ago #

    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

  12. alvbayu
    Member
    Posted 3 years ago #

    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?

  13. sheann
    Member
    Posted 3 years ago #

    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.

  14. Hans Hamid
    Member
    Posted 2 years ago #

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

  15. Chirag Vora
    Member
    Posted 2 years ago #

    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 http://www.robsbots.co.uk/wp-content/themes/wootique/images/sidebar-right.png doesn't move the sidebar border.

    :/

  16. sheann
    Member
    Posted 2 years ago #

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

  17. Chirag Vora
    Member
    Posted 2 years ago #

    Yes, I did infact I used the "sidebar-right" image from robsbots' site.
    I don't have a clue why the border of sidebar is not moving.

  18. Patrilux
    Member
    Posted 2 years ago #

    Thanks so much for the code robsbots!

  19. Chuck
    Member
    Posted 2 years ago #

    Sorry for bumping a dated topic, but I'm having the same problem as the original poster, except that instead of wanting to reducing the sidebar, I'm wanting to remove it all together on all pages except the main page. The above solution worked just fine, well, instead I simply renamed the file so it wouldn't display.

    Is there a way to use the gray sidebar for the main page, but not on any other pages such as those used by Woocommerce?

    Thanks in advance!

  20. aozalkan
    Member
    Posted 2 years ago #

    how wide am i suppose to make it ? :S

    any help?

    thanks,
    Aysh.x

Topic Closed

This topic has been closed to new replies.

About this Topic