SOLVED Custom CSS stylesheet question
-
-
- Golden28
- Rocketeer
- Posts: 66
- Thanks: 0
-
Hi,
I am just starting to get to grips with custom style sheets in gantry themed sites. I followed the tutorial and it is all working great.
But, I would like to know how to do the following...
I have three modules occupying the maintop area on the homepage in the a/b/c positions.
I added the following code to the mycustomstyle.css file:
#rt-maintop .rt-block {
margin-top: -20px;
background: #transparent;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
This worked as intended but it has obviously styled ALL of the three modules in the maintop position. My question is how do I individually style the modules? In the past I just added some custom module suffixes to the template.css and then entered these in the admin section but I think I am right in saying that by doing this, when you update the template, all of the styling would be lost? Hence why I want to use mycustomstyle.css.
I've racked my brain but I can't figure this one out, any help would be most enlightening, thanks. - Last Edit: 11 years 3 months ago by Golden28.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Hi, take the code in the template.css and place it in the custom css file you have created. Just as long as your custom style sheet is loading last it will override the existing CSS. Just copy and paste what you need to change into the custom file and make your changes there.
- The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Golden28
- Rocketeer
- Posts: 66
- Thanks: 0
-
Thanks Cliff,
But how would that style, say, maintop A differently to maintop B?
It works at the moment as I individually place a custom module suffix into the appropriate modules admin section, how do you "identify" a particular module in a particular position using the css specificity code from above?
Thanks again for your help.
EDIT: I think I'm being a dummy. So you still carry on using module suffix codes in the modules admin parameters themselves as these don't get overwritten when updating gantry? And as the actual suffixes are in the mycustomstyle.css everything stays the same?
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, you're exactly right. There isn't any specific code for header-a, header-b, header-c ECT. The best way is to use module class suffixes, which are stored in the database. Those stay in the module settings regardless of what template you use, they are part of the module settings. They add a css class name to the surrounding div that you can then use to style the content / html inside.
Style inside your custom CSS file, if you're creating new suffixes there is no conflict because the code doesn't exist until you create it. If you're changing existing suffixes, just make sure your CSS comes last and it should override the template styling. Just use a web inspector to make sure your code are being applied. Some situations require more specificity or the occasional !important, but it should work well without too much effort if your css loads last in the chain. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Glad to help
- The difficult we do immediately, the impossible takes a little longer.
-
Time to create page: 0.051 seconds