
I'm looking for, but I found nothing ...
Is there a guide on it or something like that to learn about it ?
Many Thanks for helping ...
Moderator: General Support Moderators
To begin the style for your the module you're working on, you might first duplicate those classes that interest you (leaving the original for modules you're not modifying. Then add to the duplicate(s) your suffix to the classes you want to change. Say you want to change your module table heading class, you might do something like this:table.moduletable {
width : 167px;
border : 1px solid #C0C0C0;
margin-bottom : 10px;
margin-left :10px;
}
table.moduletable th {
font-size : small;
font-weight : bold;
color : #000;
background : #FFF;
text-align : center;
padding-left : 3px;
padding-right : 11px;
letter-spacing : -1px;
border-bottom : 1px solid #999999;
}
table.moduletable td {
padding : 2px 4px;
background : #FFF;
font-size : x-small;
}
If you use the developer extension in Firefox, it makes experimenting with and modifying css classes much easier: http://forum.joomla.org/index.php/topic,35531.0.html.table.moduletable_mymodulestyle th {
font-size : small;
font-weight : bold;
color : #888;
background : #FFF;
text-align : right;
padding-left : 3px;
padding-right : 11px;
letter-spacing : -1px;
border-bottom : 2px solid #999999;
}
Code: Select all
#left {
text-align: left;
width: 202px;
height: 287px;
float: left;
background-image: url(../images/left_bg.jpg);}
Code: Select all
table.moduletable_avr {
margin-left :10px;
}
Code: Select all
table.moduletable_avr td {
margin-left :10px;
}
Code: Select all
<div id="left">
<div id="avr"><jdoc:include type="modules" name="left" style="" /></div>
</div>
Code: Select all
#avr {
margin-left: 30px;
margin-top: 70px;
}
Code: Select all
<div id="resourcesmenu" class="inv-menu">
<div class="bluehead"> </div>
<div class="headerbar">Main Menu</div>
Menu Content
</div>
This is more helpful since I don't know how to use module..its easyJDevOnline wrote:Hello,
Since I don't know how to use Module Class Suffix, what I am doing is creating static modules, with following code:
I want all my modules to look like the image attached. Can anyone tell me how to achieve it?Code: Select all
<div id="resourcesmenu" class="inv-menu"> <div class="bluehead"> </div> <div class="headerbar">Main Menu</div> Menu Content </div>
Thanks in advance!
You cannot insert scripts or html codes into a "Module Class Suffix". You can only insert a style code that is in your css file. If you do not have the style in your css than the code will not be valid.Dupont77 wrote:This is more helpful since I don't know how to use module..its easyJDevOnline wrote:Hello,
Since I don't know how to use Module Class Suffix, what I am doing is creating static modules, with following code:
I want all my modules to look like the image attached. Can anyone tell me how to achieve it?Code: Select all
<div id="resourcesmenu" class="inv-menu"> <div class="bluehead"> </div> <div class="headerbar">Main Menu</div> Menu Content </div>
Thanks in advance!
go to the joomla root directory than go and edit the file located in templates/yourtemplatename/css/css.phpHunterer wrote:as a follow up, I'd like to say that I'm currently looking at this page here
http://docs.joomla.org/Tutorial:Using_C ... ass_Suffix
and I'm also using the firebud add-on for firefox, which I've used for months now, so, I decided to try and find my class suffix, and I couldn't. for the particular module I have the following
any idea's are greatly appreciated, also, I'm using the yoo_explorer template.
Thanks again
Without meaning to de-rail the thread - do you plan to have a 2.5 version of All videos reloaded?rw1 wrote: for example, i have an allvideos reloaded module that sits in a left column which has this styling already:
chay wrote:You can use module class suffix to distinguish that module from others with regard to the css classes it uses.
Open the module that you want to style in your backend: Module->Site Modules->Module Name link. Add a suffix of your choice, say _mymodulestyle , in the module class suffix parameter box, and save.
Then go to Site->Template Manager->Site Templates. Click the radio box for the template you're using; then click Edit CSS.
Scroll down to your css classes for modules. You'll probably see generic settings like the following:To begin the style for your the module you're working on, you might first duplicate those classes that interest you (leaving the original for modules you're not modifying. Then add to the duplicate(s) your suffix to the classes you want to change. Say you want to change your module table heading class, you might do something like this:table.moduletable {
width : 167px;
border : 1px solid #C0C0C0;
margin-bottom : 10px;
margin-left :10px;
}
table.moduletable th {
font-size : small;
font-weight : bold;
color : #000;
background : #FFF;
text-align : center;
padding-left : 3px;
padding-right : 11px;
letter-spacing : -1px;
border-bottom : 1px solid #999999;
}
table.moduletable td {
padding : 2px 4px;
background : #FFF;
font-size : x-small;
}If you use the developer extension in Firefox, it makes experimenting with and modifying css classes much easier: http://forum.joomla.org/index.php/topic,35531.0.html.table.moduletable_mymodulestyle th {
font-size : small;
font-weight : bold;
color : #888;
background : #FFF;
text-align : right;
padding-left : 3px;
padding-right : 11px;
letter-spacing : -1px;
border-bottom : 2px solid #999999;
}
Best wishes.