WordPress.org

1. culture-cross
   Member
   Posted 4 months ago #

   I need to change the container size (width) for my site, and I don't know how!
   I looked in the CSS Stylesheet but I can't find #container.
   I've read that I need to find #container and change the width.
   Can someone please tell me how to find the #container and change the container width?

   Also, I assume I would need to make room for the larger container? How do I move the side bars and widgets to make room for the larger container?
   There is plenty of empty room on the sides of the site.

   Thank you!!!

2. alchymyth
   The Sweeper
   Posted 4 months ago #

   the css id for your site might be different, as this will depend on your used theme;
   try to work with a web tool such as Firebug http://getfirebug.com/ to identify the involved css selctors.

   to get any help through this forum, please post a link to your site.

3. culture-cross
   Member
   Posted 4 months ago #

   Thanks!
   Here is a link to the site:
   http://www.culture-cross.org/creations/?wpsc-product=necklace
   notice how the text goes beyond the container. I think making the container larger will help. There is room for a larger container.

   How do I use Firebug to change the container size?

   Thank you!!

4. alchymyth
   The Sweeper
   Posted 4 months ago #

   Firebug is an analytic tool only, to help you to identify the involved css elements - changes need to be done in the style.css of your theme.

   you will need a basic to good knowledge of html and css.

   change the width of a few styles in style.css of your theme;
   the sections below show the increased width (increased by 150px):
   

   #wrap {
   	background: #FFFFFF;
   	width: 930px;
   	margin: 0px auto 0px;

   #header {
   	width: 830px;
   	height:120px;

   .splash { width:910px; padding:30px 30px 0; }
   #content {
   	width: 910px;
   	margin: 0px auto 0px;

   #contentleft {
   	float: left;
   	width: 650px;

   #footer {
   	width: 930px;
   	background: #eee;

   .footer {
   	width: 890px;
   	margin: 0px auto 0px;

5. culture-cross
   Member
   Posted 4 months ago #

   I DID IT!!!
   I got firebug and used the pointer thing that tells you whats what,
   then I just messed around with the width for each part that I found with firebug until it looked right.
   AWESOME
   thank you so much!

Reply

You must log in to post.