Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

div class for css styling not working in module

Featured Lock Resolved Issue
Hi,

I have created a css class to style the way the links display at the bottom of this site: http://mavendesignstudio-demo.com/mavenyoo/

The typical methods of wrapping the content in a div are not making it work. Here's a screen recording of what I mean.

What am I missing? Is there something unusual in how I should be writing the div? The css class is located in the custom.css file and has been working on other items.

Thank you,

Karen

5 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
1) The site is offline, so I am blind

2) Add single space before module class name in module settings, it may help if your custom CSS is correct

Karen Dunne

More than a month ago #Permalink
Hi Paul,

I'm sorry, the site is online now.

I tried the single space before the module class name but it didn't change anything. At least I think what you meant was to put the class name in the module class suffix field of the module.

In reading my original post, the screen recording link was either removed or I forgot to add it. It is this: https://screencast-o-matic.com/watch/cqVZ3I3tmb

Paul Frankowski - Staff

More than a month ago #Permalink
class name in the module class suffix field of the module.


Yes, exactly. This is the most suggested way since Joomla 1.5 for selected modules only.

But you could add also

#sp-bottom .CLASS-NAME / HTML-TAG { something; something; }

OR for 2nd module column only

#sp-bottom2 .CLASS-NAME / HTML-TAG { something; something; }


Real example

#sp-bottom a {color: #ffffff; font-size:20px}
#sp-bottom a:focus,
#sp-bottom a:hover {color: #F0615B;}



Is now OK?

Karen Dunne

More than a month ago #Permalink
The examples didn't work but I stumbled upon the solution. For reasons I don't fully understand, I got it to work when I added a CSS class for sp-bottom both before and after the css for sp-bottom2 and sp-bottom3.

Specifically this is what is there now:
#sp-bottom {
font-size: 16px !important;
}
#sp-bottom2 a {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 17px;
text-shadow: 1px 1px 1px rgba(33, 33, 33, 1);
text-transform: uppercase;
}
#sp-bottom3 a {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 17px;
text-shadow: 1px 1px 1px rgba(33, 33, 33, 1);
text-transform: uppercase;
}
#sp-bottom {
font-size: 16px !important;
}

Paul Frankowski - Staff

More than a month ago #Permalink
font-size: 16px !important;
is always stronger than
font-size: 16px;

---
Are we on css-tricks.com or Lynda.com forum in CSS category? I don't remember that fact.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 124
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 118
Toufiq

Toufiq

Total Accepted Answers: 58
Pavel

Pavel

Total Accepted Answers: 5
Peter Atkin

Peter Atkin

Total Accepted Answers: 2

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us