WordPress.org

1. dwallan
   Member
   Posted 6 months ago #

   I am using the travel blogger theme v. 1.3.5 and the single left sidebar option and wish to reduce the width of the left sidebar menu. I read several forums and they advised to reduce the width of the under the sidebar section in style.css. So the section I changed was
   .widget-listing img {
   float: left;
   margin:6px 8px 10px 0;
   max-width: 45px;
   I reduced the max-width from 60px to 45px. I also increased the width of the main body by 15px and neither effected the look of the site in any way.

   I also tried several other things but could not reduce the width. Could someone please assist.

   http://lightenyourbill.com.au/wordpress/

   This is my first post so forgive me if I do something incorrect.

   Thanks
   Dave

2. peredur
   Member
   Posted 6 months ago #

   This worked for me:

   .yui-t3 .yui-b {
     width: 15em; /* or whatever you want */
   }

   This rule appears in this style sheet.

   Of course, if you're modifying a theme, and haven't done so already, you should do it in a Child Theme if you intend to apply theme updates (including security updates).

   The new rule would go at the end of the (child) theme's style sheet. And you may need to use specificity to override the existing rule depending on the order in which the style sheets are loaded.

   HTH

   PAE

3. Sheri Bigelow
   Member
   Posted 6 months ago #

   First, note that every theme is different and so advice in other forum threads may not match the code in your theme. You would have needed to be looking at a forum that was specifically about the theme you are using in order for CSS examples from them to work.

   The code you listed above for ".widget-listing img" just applies to images inside any elements with class="widget-listing" and that's not what you want.

   Looks like your theme is using a yui gride framework. I found the CSS that controls the width of the sidebar for the theme you are currently using in this file:
   http://lightenyourbill.com.au/wordpress/wp-content/themes/travel-blogger/css/reset-fonts-grids.css?ver=3.2.1

   In that file, this controls the width of the sidebar:

   .yui-t3 .yui-b {
   float: left;
   width: 18.0769em;
   }

   And this controls the width of the main area:

   .yui-t3 #yui-main .yui-b {
   margin-left: 24.0769em;
   }

   Instead of modifying the theme files directly, I would recommend using something like the WordPress.com Custom CSS plugin that lets you add CSS without modifying the original theme CSS. Then you could just add the following example code which adjusts the left column to be 5em smaller.
   http://wordpress.org/extend/plugins/safecss/

   Add this example CSS code to your Custom CSS area (or to the end of style.css) to adjust the sidebar in the Travel Blogger v1.3.5 theme to be 5em smaller. Note how both numbers are just decreased by 5em each:

   .yui-t3 .yui-b {
   width: 18.0769em;
   }
   .yui-t3 #yui-main .yui-b {
   margin-left: 19.0769em;
   }

Reply

You must log in to post.