Forum Support

Shape 5
March 28, 2024, 02:37:18 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to add a class to the top row div?  (Read 5915 times)
fogdog
Jr. Member
**
Offline Offline

Posts: 7



« on: 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
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: 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.


Code:
.module_round_box_outer-override {

your css here

}
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
fogdog
Jr. Member
**
Offline Offline

Posts: 7



« Reply #2 on: 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:

Code:
.module_round_box_outer-override {
your css here
}

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:

Code:
.module_round_box_outer {
    margin-bottom: 51px;
    margin-left: 30px;
    margin-right: 30px;
}

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!




Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: 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:

Code:
.module_round_box-dark {
text-shadow:none;
background:#333333;
color:#ffffff !important;
padding: 20px;
margin-left: 12px;
margin-right: 12px;}
                  

Regards,

« Last Edit: July 30, 2014, 10:50:53 AM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
fogdog
Jr. Member
**
Offline Offline

Posts: 7



« Reply #4 on: 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.

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #5 on: 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!
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.