Change module title colors

I would like to have a different background color and font color for each of my module titles that I have on my FrontPage. I created my original template in Artiseer which doesnt allow you to make this change. How can I get each one to have a different color?
TheBull369Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lazysheepmediaCommented:
You need to add the module title colours into your css file for the template and then call that colour through the module parameters - For example:

If you wanted the heading to be orange you ould add this to your css file

div.module--orange

Open in new window


and then use that in your module to change the heading

-orange

Open in new window


hope that is clear
0
TheBull369Author Commented:
I am fairly new to CSS and Joomla can you be a little more specific? I am assuming since I have a template created that I would have to use the module suffix somehow?
0
lazysheepmediaCommented:
can you provide a url?
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

TheBull369Author Commented:
Internal website that cant be viewed without credentials. My idea though is based off of the USAToday.Com wbesite where they have the boxes of content in the middle of the page. Each heading has a different background and each title for the heading has a different color.
0
lazysheepmediaCommented:
you need to identify the css that is styling the module header and duplicate it with the -orange bit added on the end - then use it in the module parameters
0
TheBull369Author Commented:
I guess if you could give me specifics that would be great. Where would I put the CSS changes, what would I put in the module parameters, etc?
0
JoomstrupCommented:
Do you have firefox with firebug installed. That should help you find where you need to change the css.

Or you could do it in Artisteer. Simply go back and change the color of the module headings. Save and install the updated template.

can you post your css file here?
0
TheBull369Author Commented:
Artiseer will change the heading for all of them (they will be the same) i need each to be different.
0
JoomstrupCommented:
ok then you need to add a module class suffix to each module in the module manager as lazysheepmedia said.

in the module manager open your module then on the right find the Module Parameters

in there there is a field called Module Class Suffix there you enter something like _orange if you want the module header to be orange.

Then you need to add this class to your template css file and define orange color you want.

again we can possibly help you if you post your css file here.
0
TheBull369Author Commented:
Ok here is my template.css file (I am guessing you need the entire thing). I added at the bottom of it .john, I am sure there is something wrong with it. Here is what is happening. I read on the website for artiseer that in the module suffix you put in the name of the area you want to replace and then the name of the class you want to use. So for example the Title for the module is located in art-postmetadataheader it seems (thats the only place in the CSS file I see that color code for background). So I want to change the background color to what you see in .john for this one module. Other modules will need different background colors. I will also need to change the font color to white as an example.

Thanks for the help. If it also helps I am using the module RAXO to show my content.

template.css
0
lazysheepmediaCommented:
try this attached file

then add either _john or just john - see if that works for you
template-1.css
0
TheBull369Author Commented:
So in the module suffix add _john or john. Can I ask what changes you made to the file so I can learn from it, especially since I have a bunch of other modules that need to be changed.
0
TheBull369Author Commented:
I tried -john, _john, john in the module suffix and nothing changed.
0
JoomstrupCommented:
What version of Artisteer are you using?

Only Artisteer 3.0 supports the module class suffix.

please refer to http://www.artisteer.com/?p=help_joomla - scroll down on the page to the bottom
 there module class suffix is explained.

in earlier versions you have to add php code to the index.php file

see more here:
http://forum.joomla.org/viewtopic.php?f=431&t=508515&start=30

and now we're getting into templates you might get some indeas about choosing templates here
http://magazine.joomla.org/issues/Issue-Jul-2010/item/81-Joomla-Template-Tools-Part-One
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TheBull369Author Commented:
Thank you Joomstrup. I did find that to be true and had to do some css modifications and upgrade to 3.0 to get this to work.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Joomla

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.