How can I add multiple Module Class Suffixes to a Module in Joomla 3?

Question

I want to add some corner effects to a module in Joomla 3. What I'm trying to do it add corner tabs like you'd see in an old photo album (I tried to include an attachment, but don't have enough posts). I'm using a Module Class Suffix to add them because I plan to use them on various modules of different sizes and want them to be positioned correctly regardless of how tall or wide a module happens to be.

But I can only get one to show up. If I add more than one suffix, it is ignored.

This is the syntax I'm using in Joomla to add them:

style-color badge-br badge-ul

"style-color" is styling that displays the background and text effects for the module. The "badge-XX" denote each of the corner effects. ul is "upper left", br is "bottom-right", etc.

Here is the CSS I'm using for the corner effects:

.module .badge-ul {
background-position: 0 0px;
background-image: url(../images/texture/photo_corners.png);
top: -7px;
left: -7px;
height: 60px;
width: 60px;
z-index: 1001;    
}

.module .badge-ur {
background-position: 0 -60px;
background-image: url(../images/texture/photo_corners.png);
bottom: -7px;
left: -7px;
height: 60px;
width: 60px;
z-index: 1101;    
}

.module .badge-bl {
background-position: 0 -120px;
background-image: url(../images/texture/photo_corners.png);
bottom: -7px;
left: -7px;
height: 60px;
width: 60px;
z-index: 1201;    
}

.module .badge-br {
background-position: 0 -180px;
background-image: url(../images/texture/photo_corners.png);    
bottom: -7px;
right: -7px;
height: 60px;
width: 60px;
z-index: 1301;    
}

Obviously I'm missing something. But I can't figure out what. If it matters, I'm using a YooTheme template (Cloud).

Any help would be greatly appreciated!

I almost gave you an answer and then realized is similar but not quite what you need. I see you css, can you provide the markup as well or put it all in a fiddle or give us the joomla site link — LOTUSMS
Here is a URL to the site in progress: evergladesnaturetours.com/site/swamp-mud The module I'm asking about is the one with the pricing information (left column). — user3433982

tomjm tomjm · Accepted Answer · 2014-03-18T16:41:27

You cant do it like that. You can only have one value for each css property. background-position: 0 0px; background-position: 0 -180px; background-position: 0 -120px; ... You may only have one background-position for each dom element. If you want 4 backgrounds you need 4 dom elements I suggest you rethink the way you want to go about creating the background.

How can I add multiple Module Class Suffixes to a Module in Joomla 3?

2 Answers