SOLVED How: Modify CSS for a Template override?
-
-
- PixelTech
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
I created a template override that I have applied to a category on my Diametric 2.5 based site. I want to style the Drawer background differently than the rest of the site. I can do this in Firebug under the inline css that is created by the system but don't see an actual CSS file to edit in the back end.
How would I go about doing this? Create a special CSS file? If so where to I put it?
Thanks for any help! - Last Edit: 11 years 4 months ago by PixelTech.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
We recommend that you create custom CSS files and simply override the original CSS for any content elements you desire.
Please see these links to better understand how to create your own custom CSS file for our newer LESS templates:
Your first CSS-Less custom file or CSS custom file
LESS CSS
-
-
-
- PixelTech
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
OK, I understand what you want me to do but I don't know how to tie a css file to an override.
In the template manager I see no place to assign a module class suffix to the override.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
PixelTech wrote:
OK, I understand what you want me to do but I don't know how to tie a css file to an override.You wouldn't be assigning a module class suffix in Template Manager but rather in the module's Advanced parameter options.
In the template manager I see no place to assign a module class suffix to the override.
Let's backtrack a bit. Lets see if I understand you correctly.I created a template override that I have applied to a category on my Diametric 2.5 based siteOkay, technically this can't happen, technically. A template override is used to change a Feature or the Overall template styling for the menu page you've assigned the template override for.
Trying to change the Drawer background for a specific menu page is easily accomplished using a page class suffix for that menu page.
Then you would enter the code styling using the page class suffix into your custom.css.
So, if I've understood you correctly, post back and then I'll give you an example of this is done
-
-
-
- PixelTech
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
We're speaking the same language now
I have a menu item named "past". I need to style all articles under that "past" menu item. So under the template override I created a new override for that menu item that allows me to style it with orange colors as opposed to blue which the rest of the site has. However I need the background on the Drawer portion to be orange instead of blue for this "past" section. I also created a module that lives in the Drawer area that contains the main logo. This logo is also different for the "past" section (separate module assigned to "past"). Here is the css I want to use to edit the "past" Drawer section. I assume I just copy this css to change the color but don't know where to put it. I tried assigning a class to the "past" menu as well as the page and neither worked when I applied it to the css.
Hope that makes sense.
#rt-drawer {
background: #F08C29;
height: 115px;
margin: -30px 0px 0px;
}
-
-
-
- PixelTech
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
-
Since I often see unsolved threads I am marking this solved with explanation of the solution.
I created the custom css file and put it where the instructions tell you to but it would not read it. To solve this problem I copied an exiting css file from the template css folder. renamed it and replaced the css with my custom styles. This worked. My guess is that it had something to do with the copyright info in the css file. Again this is a guess but it worked.
The other problem I had was that I needed to change the color of the background on the drawer div to be different for that menu section as opposed to the rest of the site. As Dan suggested I created a class suffix for that menu item then styled it in the css. This failed because of my bad mark-up. The class I assigned was "past" so I made the css
#rt-drawer .past { background-color: #009966; }
this did not work. It was a simple mistake. I had the class listed second so I made it
.past #rt-drawer { background-color: #009966; }
and that worked.
I know this is a DUH! moment for some and it was for me ( I should have know that) but there are others who might could use this info.
Hope it helps.
-
Time to create page: 0.056 seconds