Acajoom - Mailing lists - How to customize your module with CSS

How to customize your module with CSS

You can customize the entire Acajoom module with your CSS stylesheet

Each visible Acajoom list is showed on your module in a span with class=”aca_list_name” (My First List My Second List)

So you can customize the name of the lists with the CSS span.aca_list_name.

Example :
span.aca_list_name{
            font-size : 10pt;
            font-family: Verdana, Arial;
            color : #6699CC;
            font-style: italic ;
}

Each Newsletter list name is included into a link so you can customize this link using span.aca_list_name a.

Example :
span.aca_list_name a{
color : red;
font-family : Arial;
}

span.aca_list_name a:hover{
color : blue;
cursor : default;
}

You can customize the fields postext and pretext with CSS, those fields will appear in a span with the class ‘pretext’ (or ‘postext’) (…) so you can add CSS on those fields.

Example :
span.pretext {
            text-align : center;
            font-size : 11pt;
            color : #9966FF;
            text-decoration : none;
            font-style : italic;
            font-family : Georgia, "New Roman";
            background-color : #ffffff;
}
span.postext {
            text-align : right;
            font-size : 12pt;
            color : black;
            text-decoration : none;
            font-style : italic;
            font-family : Georgia, "New Roman";
            background-color : blue;
}

If you configured your module with a specific ‘Module Class Suffix’, your entire module will be included in a div with class equal to the value you specified.

For example, if I insert the value MyAcaModule in the field ‘Module Class Suffix’, I will be able to customize my entire module with this class. I can show a background image, specify borders, colours…

Example :
div.MyAcaModule{
            background: url(../images/logo.gif) no-repeat;
            background-position: center 0px;
            border : 2px solid grey;
            padding : 10px;
}

The field ‘Module Class Suffix’ can be very useful if you want to integrate more than one Acajoom module on your site. With this field, you will be able to customize differently all your modules.

Example :
If you specify MyAcaModule1 for your first module and MyAcaModule2 for your second module, you will be able to customize all your fields differently:
.MyAcaModule1 span.aca_list_name{
            font-size : 10pt;
            font-family: Verdana, Arial;
            color : #6699CC;
            font-style: italic ;
}

.MyAcaModule2 span.aca_list_name{
            font-size : 14pt;
            font-family: Verdana, Arial;
            color : green;
            font-style: bold ;
}

The field ‘Module alignment’ (You can configure this field if you edit the Acajoom module) allows you to set up a specific alignment for the entire module, Right, Center, Left or No alignment.

Some examples of what you can do: