Public Forums 71,145 posts

[web20005 Friend web20005Join date: February 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#160713

Hi Iove the template. After searching through hundreds of templates and trying many extensions to get my site to look the way I wanted it to, I found this template and I was able to customize my site in only 3 hrs.

My only problem that I have been struggling with is to customize the styling of the modules that appear in the left and right columns. I am using the default layout. I have looked at the tutorials and in this forum without luck. I would like each module to have a different header color and border. I have tried adding a suffix to each of the modules and adding the class to the template.css file, but it is not showing in the front end.

I have also tried using the left column class, but it changes all the module headers in the left column to the same color. I don’t want that. I want each of my headers in a different color in the left column.

Here is my code below with the left and right classes (which works) and the module suffix class I added (which doesn’t work). Why can’t I have each module a different header color within the left and right column?

/* MODULE STYLES
——————————————————— */
div.ja-moduletable h3, div.moduletable h3 {
font-size: 100%;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
border-bottom: 1px solid #ccc;
}

# div.ja-moduletable_wd h3{
background:#000 url(../images/wd.gif) no-repeat;
border: 1px solid #ccc;
height:30px;
width:198px;
color:#fff;
padding: 5px 0px 0 20px ;

}

#ja-left div.ja-moduletable h3{
background:#000
border: 1px solid #ccc;
height:30px;
width:198px;
color:#fff;
padding: 5px 0px 0 20px ;

}
#ja-left div.ja-moduletable
{ border: 1px solid #ccc;
margin: 0px 0px 0px 0px;

}

#ja-right div.ja-moduletable h3{
height:35px;
width:160px;
padding: 5px 0px 0 20px;
background-image: url(../images/calendar.gif) ;
background-repeat:no-repeat
}

#ja-right div.ja-moduletable
{ border: 1px solid #ccc;
margin: 0px 0px 0px 0px;

}

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#378512

A link to your site really helps.

[web20005 Friend web20005Join date: February 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#378518

Here is the link deryo.com.

login: demo pass: demo

thanks.

[huypl Friend huyplJoin date: February 2011Posts: 162Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 20 posts]

#378799

Hi web20005,
You’re very clever when you know how to add a suffix to the modules so that you can design the modules in your own way. But to identify what the exact class (with the suffix) is, I suggest you to use a tool. Please download FireFox and and an addon of FireFox called FireBug. FireBug can help you indentify what the exact class name is.
For example, I had used this tool to examine your website and recognize that the class name of the left column exactly is .ja-moduletable moduletable_wd. It isn’t .ja-moduletable_wd. So that why it doesn’t work.
Hope this can help you.

1 user says Thank You to huypl for this useful post

1. web20005

[Author]

Posts