Custom CSS, Themes customize page, CSS overwritten

Permalink
Hello All,
(And thank you in advance for any help you may provide)

Background:
I am very proficient with HTML/CSS and know a little PHP.

Issue:
I am using the Left Sidebar page type. The left sidebar has a default width that I need to adjust for all pages within a theme.

Problem:
Custom css code is overwritten by something elsewhere. I cannot seem to use Concrete5's system to adjust the width.

Research:
Using Firebug I discovered three containers used for holding the left sidebar's content. Here are the HTML tags with id/class:

<div id="left-sidebar-container" class="grid_8">
   <div id="left-sidebar-inner">
      <div id="blockStyle59Sidebar25" class="ccm-block-styles">


My Actions:
1. Using the Dashboard, I clicked on Themes, scrolled down the list to the activated theme in use and clicked on Customize. In the toolbar that appears in Edit Mode, I clicked on "Add Your CSS". The following is what I placed in that area:

div#left-sidebar-container {
width:150px; margin:0px; padding:0px;
}
div#left-sidebar-inner {
width:150px; margin:55px 0px 0px 0px; padding:0px;
}


2. I went back to a specific page and entered Edit Mode. I clicked on the left sidebar block and selected the Design option. In the Set Block Styles window I selected the CSS tab. In the Additional CSS textarea I placed the following:

width:150px;
margin:0px;
padding:0px;


My Results:
1. The CSS placed on the Theme's customize page is apparently overwritten because it is too high from the actual child containers. But I want this code to be used on all the Theme's pages.
2. The CSS placed on the left sidebar block showed a change but not the complete change I was looking for.

My Question(s):
1. How do I adjust the width of the left sidebar block (and of course the main content block) using custom CSS within the Concrete5 system.
2. Are the two classes over-riding my Theme-level, custom css?
2b. If so, then how do I over-ride the classes and id css using the Concrete5 interface?
3. Is the only solution to alter the actual theme css files?
3b. If so, then for what am I supposed to use the custom css interface to change?

Thank you again very much for your insight and helpfulness.

View Replies:
keeasti replied on at Permalink Reply
keeasti
The width of the sidebar is probably set by class="grid_8" which suggests the theme is using some type of CSS framework.
Do you have a link to see what is going on?
StudentTeacher replied on at Permalink Reply
I agree that there is a CSS grid in place. Using Firebug, if I change the value of grid_8 to grid_4 I happen to get the 150px width I am looking for. I had really hoped I could override the grid values with my own css.

Link to site:
http://alcovewine.com
keeasti replied on at Permalink Reply
keeasti
I think when you are using a grid then it is best to use it ie. grid_4 (etc).

You could force the width by putting this in the theme's main.css
div#left-sidebar-container {
    width: 150px;
}


You would probably then need to declare a width for the main area as well like this:

div#main-content-container {
    width: 790px;
}


However, I would say it is better to not do it this way and just use the grid.