Joobi

Joomla components

How to customize your module with CSS PDF Print E-mail
  (0 reviews)

Back

You can customize the entire Acajoom module with your CSS stylesheet.

Edit the CSS file of your own Joomla template and add any CSS to customize your Acajoom Module.

 

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

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’) (<span class="pretext">…</span>) 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:

 

Acajoom module example

 

 

Acajoom module example

 


Comments(5)
Display #
 Please provide code for the examples!

By: on 2010-Mar-11 04:28:31
You show many examples and we all want to be able to modify the look of the sign-up box.

Especially want to know how to get the rounded edges on the box.

Many thanks!

 How to add label??

By: Abra on 2010-Jan-11 15:54:34
How to add label near the inputbox??
 Module Styles

By: jmcbade on 2009-Dec-24 17:03:12
Why don't you post the specific styling for your examples?
 Need more details

By: dsegura on 2009-Nov-26 11:40:19
I need to modify the layout of the subscriber module so it matches the style of my web page. Could you please giime more detail on where I can do so? I need to mdify the module title layout, inlude title to the input boxes, and modify the boxes bacground.

Examples on how to do this will be very handy

Thanks

 Need more specifics

By: monicaflaherty on 2009-Sep-12 05:55:07

Would be helpful if you could specify where to add the css to format both the module and the subscriber information page.  Do I add it to the template css file?  Or the Joobi css file?  Also, can you provide a full code example with parameters to control all the elements of each (the check box formatting, input field length, etch. )

Thanks
Monica


Add Comment
 
© 2007-2010 Joobi Limited