Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#174526

I would like to add a couple of suffixes to the template.css for a couple of items on JA Portfolio, but when I try to do so, it doesn’t work. I’m relatively new to suffixes. Can you please help?

I know that the module titles (h3) for the user5-9 positions are controlled here:

#ja-botsl-1 .ja-moduletable h3,
#ja-botsl-1 .moduletable h3 {
color: #1585C7;
background: none;
margin: 0;
padding-bottom: 0;
font-weight: bold;
font-size: 125%;
}

But I would like to create a suffix for the titles, so that one module’s title can be a different color than the others.

My thinking is that I can do this by creating a suffix of the above h3 style. But what would be the proper syntax? I have tried

#ja-botsl-1_green .ja-moduletable_green h3,
#ja-botsl-1_green .moduletable_green h3 {
color: #1585C7;
background: none;
margin: 0;
padding-bottom: 0;
font-weight: bold;
font-size: 125%;
}

And then added _green to the Advanced Parameters Module Class Suffix — but that didn’t work. Any advice?

Say if I wanted to make the h3 title green instead?

How would a create a suffix _green for the above CSS to change the h3 title color?

Also, if I wanted to change the link color of a specific menu, say the footer menu, but not any others. Where would I create a suffix for just that menu’s link color?

Or could I just create a class for the color change and add it to the menu’s Parameters (JA Exteneded) option for Additional Class? (That didn’t seem to work when I tried it either, but that’s probably because I’m doing something wrong.)

Thank you very much for your help!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#441285

Here are two resources that will help you understand module suffix and “chrome” related items within Joomla . . .

http://docs.joomla.org/Using_Class_Suffixes#Module_Class_Suffix

http://docs.joomla.org/Applying_custom_module_chrome

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#441289

Okay, maybe I’m just really tired, but I did exactly what that first link described in the section “Module Class Suffix,” but it is still not changing the h3 color for the module I’ve assigned the suffix to.

Could you please log in and take a look at what I’m doing wrong? You should have the access.

Thank you.

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#441479

Okay… it’s a new day and I’m fully caffeinated. But I’m still unable to make sense of this suffix solution.

Below is my code that I want to modify with a suffix, which I’ll apply to only a specific module. The rest of the modules need to keep the blue h3 title, but I want one that will be green.

<blockquote>#ja-botsl-1 .ja-moduletable h3,
#ja-botsl-1 .moduletable h3 {
color: #1585C7;
background: none;
margin: 0;
padding-bottom: 0;
font-weight: bold;
font-size: 125%;
}</blockquote>

So my understanding of what I read in the links Tom posted was that I could create a suffix (ie – green with a space in front of it) to be applied to that single module (placed in the Module Class Suffix under Advanced Parameters for that module), and add a new entry to my CSS to alter the h3 color. Something like this:

<blockquote>div.ja-moduletable green h3 {
color: #669900;
background: none;
margin: 0;
padding-bottom: 0;
font-weight: bold;
font-size: 125%;
}

div.moduletable green h3 {
color: #669900;
background: none;
margin: 0;
padding-bottom: 0;
font-weight: bold;
font-size: 125%;
}
</blockquote>

But that didn’t work. I’ve also tried the directions for _green. It didn’t work either.

So either that tutorial is horribly written, or I’m completely dense. Regardless, any further guidance would be greatly appreciated, as I’ve also looked at other, simplified, tutorials like this one:

http://www.scribd.com/doc/2300098/Joomla-v-15-How-to-use-CSS-class-suffixes

And I’m still not getting it to work. Please help! What am I doing wrong?

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#441510

Hi synapsis,

I think you’re not seeing any changes because your css is joined and compressed via the template. Please disable it in the template manager. Under the global tab > Optimize CSS & Optimize JS to > no. Also you want to enable the Development mode to avoid caching.

About your code: theres nothing wrong. It should work as soon as you cleared the cache with the above explanation.

To change the link color of a particular module, you can allways access it by it’s unique ID. But since your footer menu is no module, you’ll have to access it via it’s container. When you use Firebug and hover the menu, you will see that it’s container is ja-copyright. To change the link color add to your template.css file (example colors):


.ja-copyright a {
color: #ff0000
}
.ja-copyright a:hover {
color: #0000ff
}


Cheers

Frank

[Author]

Posts