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:
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:
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:
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.
(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.
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
Link to site:
http://alcovewine.com
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
You would probably then need to declare a width for the main area as well like this:
However, I would say it is better to not do it this way and just use the grid.
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.
Do you have a link to see what is going on?