Download & Extend

Decrease sidebar size

Project:Marinelli
Version:7.x-3.0-beta11
Component:Code
Category:support request
Priority:normal
Assigned:Unassigned
Status:active
Issue tags:sidebar size

Issue Summary

I recently found this theme and changed my site to it, I think it is excellent. My only desire is to reduce the size of the sidebar so the sidebar content fits there better and there is more space for the main content. I Have got as far as finding the areas defined in marinelli/css/grid/grid_1000.css However, if I edit it it seems to mess everything else up. Unless I am missing something it seems the two sidebars combined must be the same size as the content, both defined by grid6?

Any hints on how to change the size? I am thinking of changing the sidebars from 230px each to 200px and using the spare 60px for the main content.

Many thanks in advance :)

Comments

#1

subscribing

#2

Hello,
One of the ways for reducing the sidebar width can be as follows,
Steps
1. Create your custom .css file
2. for e.g. if the file name is marinelli.css add the following code in your .info file

stylesheets[all][] = css/marinelli.css

3. Add the following code in marinelli.css
#siteContent {
  float:left;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  width: 544px;
}

#sidebarWrapper {
  float:left;
  margin-bottom: 0;
  margin-left: 20px;
  margin-right: 0;
  margin-top: 0;
  width: 444px;
}

#sidebar-first, #sidebar-second {
  float: left;
  width: 200px;
}

Hope this helps!

Regards,
Shruti Sheth

#3

I have tried everything that shruti.sheth has told people and a few others I still cant seam to get the sidebar width down with out screwing up the rest of the site any ideas on how to fix it

#4

This is what I end up with, for pages with both sidebars enabled. Under theme settings, I choose fixed-width, 988px.

/** customize the site layout **/

.two-sidebars #siteContent {
  float:left;
  margin: 0 10px;
  width: 520px;
}

.two-sidebars #sidebarWrapper {
  float:left;
  margin: 0 4px;
  width: 400px;
}

.two-sidebars #sidebar-first,
.two-sidebars #sidebar-second {
  float: left;
  margin: 0 5px;
  width: 190px;
}