Choco´s Theme Custom

• 

  maurograca · Member · Dec 9, 2011 at 12:36 pm

  • Copy link
  • Add topic to favorites

  Thanks for Any help…

  My blog is http://bloodbrothersguild.wordpress.com/

  I´m trying to discover how to enlarge the “white area”
  to fit the text area on choco´s theme.

  I made some changes on my default css, but no results…

  #page {
  width:1280px;
  margin:0 auto;
  }

  #content {
  display:inline;
  float:left;
  width:800px;
  }

  #nav ul ul {
  background-color:#fff;
  -moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
  box-shadow:0 3px 3px rgba(0,0,0,0.2);
  display:none;
  float:left;
  position:absolute;
  top:27px;
  width:250px;
  z-index:99999;
  }

  #sidebar {
  display:inline;
  float:right;
  margin-top:10px;
  width:264px;
  word-wrap:break-word;
  }

  #sidebar #searchform .field-place .field {
  background-color:#ffffff;
  border:0;
  color:#000000;
  display:inline;
  font-size:110%;
  float:left;
  width:155px;
  padding:4px 5px 3px;
  }

  #sidebar #searchform .field-place .button {
  display:inline;
  float:right;
  height:40px;
  width:40px;
  }

  #nav ul ul li {
  min-width:180px;
  }

  #nav ul ul a {
  width:180px;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Dec 9, 2011 at 2:42 pm

  • Copy link

  In the Choco theme, the background width for the main area is setup using an image. That means it’s not adjustable with CSS alone, but you can still expand the main area if you download the images, re-size them, re-upload them to your media library, and add CSS rules to replace the image from the theme with the wider one that you created and uploaded.

  You would need to create new images to replace these:

  http://s1.wp.com/wp-content/themes/pub/choco/colors/red/images/main-top.jpg
  http://s1.wp.com/wp-content/themes/pub/choco/colors/red/images/main-bg.jpg
  http://s1.wp.com/wp-content/themes/pub/choco/colors/red/images/main-bot.jpg

  You can upload images into your media library: http://en.support.wordpress.com/images/

  Then you can use CSS like this to replace the images:

  #main-top {
  background-image: url(YOUR_IMAGE_URL);
  }
  #main {
  background-image: url(YOUR_IMAGE_URL);
  }
  #main-bot {
  background-image: url(YOUR_IMAGE_URL);
  }

• 

  maurograca · Member · Dec 10, 2011 at 2:45 pm

  • Copy link

  Thank You Very Much,
  I could never fix that without your help.

  My best Regards and my eternal gratitude.

  Mauro