|
: How to add a class to the top row div? : fogdog July 28, 2014, 11:47:12 AM I would like to do some custom styling on a page. I need to remove some extra spacing on a particular div. However I would prefer to not alter the original template class.
This is the div <div id=s5_top_row1_area1> Inside is a nested div of <div id=module_round_box_outer/> This div has a margin property I want to override. margin-bottom:51px. Things I have tried: 1. I added a page class suffix to the Home menu item. This adds the class to low in the page. 2. I added a page class suffix to the custom html module and it also was to low in the page. I need the custom class to be higher than the top_row1_area1 div or at least on this div. Is there a way to do this within your template? thank you : Re: How to add a class to the top row div? : jonahh July 28, 2014, 01:42:39 PM Hello,
You can do this by adding a module suffix to the module. Just add the below css to your css file and then you'd add "-override" to your module suffix area in the backend of the module in Joomla admin. : .module_round_box_outer-override {: Re: How to add a class to the top row div? : fogdog July 29, 2014, 01:44:12 PM Thank you Jonah. Your explanation was clear and I did as you said. Unfortunately it didn't produce the desired results. It was close, but not quite there.
** PLEASE SEE ATTACHED SCREEN SHOT FOR CLARITY AS TO WHATS GOING ON *** After doing what you suggested, I inspected the code and noticed a few things. First the overridden class was not the outer class as you suggested. You suggested I add this custom class: : .module_round_box_outer-override {The overridden class was not .module_round_box_outer-override, but rather this -> module_round_box-override. Also, the overridden class was a child of module_round_box_outer, which has the following rule: : .module_round_box_outer {The property of margin-bottom: 51px is what I want to override. I can't override it with CSS becaue CSS currently doesn't support the ability to select a parent element. I truly do hope there is a solution to this. I anxiously await your response. Thank you! : Re: How to add a class to the top row div? : mikenicoll July 30, 2014, 10:46:18 AM Hello,
In your custom.css add a !important call targeting the CSS of your new custom class to override any other deafults. Also generally when you add a new module class suffix your CSS should look like so. Here is an example if you added -dark as the module class suffix: : .module_round_box-dark {Regards, : Re: How to add a class to the top row div? : fogdog August 05, 2014, 11:39:20 AM Thank you, but what you suggest doesn't work. The property is applied properly, but its on the wrong rule. It needs to be on the parent rule and when I enter the module suffix, it appears on the child rule rather than the parent rule. Please see my above post and attached image for clarity.
: Re: How to add a class to the top row div? : jonahh August 05, 2014, 12:58:43 PM If you can post a URL of this it will help us take a better look and see whats going on. Also let us know which module you have the class attached to.
Thanks! |