Joomla Templates Club 406,261 posts

[aurumholdings Friend aurumholdingsJoin date: September 2011Posts: 32Downloads:0Uploads:9]

#169672

Hi Joomlart,

Have a bit of an issue.

I have created my own theme for the home page this is a carbon copy of the blue theme.

I have created lots of different modules across the home page he showing the title.

I am trying to give each module title a different background image I can see through firebug to change the following

div.ja-moduletable h3, div.moduletable h3 {
background-image:url(“http://10.1.1.174/AurumNet/templates/ja_teline_iv/images/HomeHeader.png”); background-repeat:repeat-x;
border-bottom: 3px solid #dccb80;
border-top: 3px solid #dccb80;
color: #000;
font: 125% ArialNarrowBold,”Arial Narrow”,Arial,sans-serif;
margin: 0;
padding: 8px 8px 5px;
text-transform:uppercase;
}

This works fine however changes all the modules. is there a way of only changing specific modules background images?

Regards

Michael

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#419364

Hi
Please update me your live site URL and a screenshot w/ note which element you are looking for change ?
Thank you
Viet Vu

[aurumholdings Friend aurumholdingsJoin date: September 2011Posts: 32Downloads:0Uploads:9]

#419367

Apoligies this is a internal business intranet.

Ann example would be

Module 1 Header Backgound image (BLUE)
Module 2 Header Backgound image (Red)
Module 3 Header Backgound image (Green)
Module 4 Header Backgound image (Black)
Module 5 Header Backgound image (Orange)
I can see I can add a class to each module but dont know how to reference this class in the css for the page

Regards

Michael

[fdr77 Friend fdr77Join date: April 2011Posts: 104Downloads:0Uploads:39 Thanks: 13 Thanked: 3 times in 1 posts]

#419389

I have done so

div.ja-moduletable h3, div.moduletable h3 {
border-bottom: 1px solid #ddd;
border-top: 0px solid #ccc;
color: #000;
font: normal 125%/normal ArialNarrowBold, “Arial Narrow”, Arial, sans-serif;
margin: 0;
padding: 8px 8px 5px;
text-transform: uppercase;
}

div.ja-moduletable, div.moduletable {
background: url(“../images/ja_gradient.png”) repeat-x scroll top #fff;
border: 1px solid #ccc;
margin: 2px 2px 4px 2px;
padding: 0;
border-radius: 2px;
}
/* default */

div.ja-moduletable_blu, div.moduletable_blu {
background: url(“../images/ja_blu.png”) repeat-x scroll top #fff;
border: 1px solid #ccc;
margin: 2px 2px 4px 2px;
padding: 0;
border-radius: 2px;
}
/* suffix _blu*/

div.ja-moduletable_tras, div.moduletable_tras{
background: none transparent;
border: 1px solid transparent;
margin: 2px 2px 4px 2px;
padding: 0;
border-radius: 2px;
}
/*suffix _tras */

div.ja-moduletable_orange, div.moduletable_orange {
background: url(“../images/ja_orange.png”) repeat-x scroll top #fff;
border: 1px solid #ccc;
margin: 2px 2px 4px 2px;
padding: 0;
border-radius: 2px;
}
/* suffix _orange*/

div.ja-moduletable_red, div.moduletable_red {
background: url(“../images/ja_red.png”) repeat-x scroll top #fff;
border: 1px solid transparent;
margin: 2px 2px 4px 2px;
padding: 0;
border-radius: 2px;
}
/* suffix _red */

div.ja-moduletable_green, div.moduletable_green {
background: url(“../images/ja_green.png”) repeat-x scroll top #fff;
border: 1px solid transparent;
margin: 2px 2px 4px 2px;
padding: 0;
border-radius: 2px;
}
/* suffix _green */

div.ja-moduletable_black, div.moduletable_black{
background: url(“../images/ja_black.png”) repeat-x scroll top #fff;
border: 1px solid transparent;
margin: 2px 2px 4px 2px;
padding: 0;
border-radius: 2px;
}
/* suffix _black */

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#419466

Cool, you have solved that yourself. We also have preset styles for some defined suffix classes for each template.

Thanks
Viet Vu

[Author]

Posts