Joomla! Tutorial #3: CSS Class Suffix

**takercena** · 02-29-2008, 01:45 AM

I have a hard time to convert this doc to html. So i just post the pdf version.

I also upload this to Google doc.
P.S: You might see this doc in other site but it was still created by me before this.

**takercena** · 03-14-2008, 11:51 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
Introduction
Joomla! Version 1.5 Class Suffix is the easiest way to modify Joomla!’s style. It is impossible for us to find one module and styling the module in the same directory like we used to do in simple html sites. All the styling is done inside the template.css file which is located inside the template directory. As example, for Windows users, the directory is \templates\rhuk_milkyway\css\template.css, which rhuk_milkway is my template name. I am using rhuk_milkway as my template. Other templates may have different settings. First let’s see an example.

Code:

<table width="408" height="933" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td width="406" valign="top"><p>As    example, we are going to modify the <em>polls</em> module</p>
    <p>.<img src="http://forum.codecall.net/attachments/tutorials-classes-code/567d1205522151-joomla-tutorial-3-css-class-suffix-image1.gif" alt="" width="191" height="279" /></p></td>
  </tr>
  <tr>
    <td valign="top"><p>Type    “_pollstyle1” inside the module class suffix. </p>
        <p>To go here, click <em>Module Manager</em> under <em>Extensions </em>tab. After that click on    polls module. </p>
        <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/568d1205522151-joomla-tutorial-3-css-class-suffix-image2.gif" alt="" width="313" height="151" /></p></td>
  </tr>
  <tr>
    <td valign="top">Now add this code inside template.css anywhere    you want.I add this codes at the    end of the line of the template.css file and comment it “/*customstyle*/”
      <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/569d1205522151-joomla-tutorial-3-css-class-suffix-image3.gif" alt="" width="406" height="216" /></p>
      <p>Add the highlighted code inside template.css. The file    is located inside \templates\rhuk_milkway \css\template.css. <br />
      </p>
      </td>
  </tr>
</table>
<p>&nbsp;</p>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="272" valign="top"><p>We add the same suffix that we used inside the polls    module class suffix “_pollstyle1” to the div.moduletable class. </p>
        <p><strong>Remember: the    class suffix you are adding must be exactly the same as the class suffix in    the module manager. </strong>div.moduletable_pollstyle1<strong> is not the same as </strong>div.moduletable pollstyle1<strong> or</strong><br />
            <strong> </strong>div.moduletable     _pollstyle1<strong><em> .</em></strong>Now save the template file and refresh your browser. It    should look like the image below</p>
    <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/570d1205522151-joomla-tutorial-3-css-class-suffix-image5.gif" alt="" width="184" height="217" /></p></td>
  </tr>
</table>

So what is Joomla! Class Suffix?
As you see, all the design is done inside the template.css. Since Joomla! is a complex web application, it will be hard for us to do styling in Joomla!. That’s why we use this because it saves us time to do some individual styling rather find it on your own inside the template.css file and modify it. 
You save a lot of time by adding a suffix there, and make a new code to the template.css file.
Joomla! Module Class Suffix
Module Class Suffix is used in styiling the modules. As an example, we are going to do some styling on the Main Menu module.

Code:

<table width="362" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="474" valign="top">Let    see one more example. Now we are going to modify main menu module.
    <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/571d1205522151-joomla-tutorial-3-css-class-suffix-image6.gif" alt="" width="160" height="190" /></p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td valign="top"><p>In    admin page, go to extension tab and click at module manager. Then, find the    main menu module there. Click the module.</p>
      <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/572d1205522176-joomla-tutorial-3-css-class-suffix-image7.gif" alt="" width="220" height="67" /></p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td valign="top"><p>Type    _style1 module in the <em>Module Class    Suffix</em> box</p>
    <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/573d1205522176-joomla-tutorial-3-css-class-suffix-image8.gif" alt="" width="239" height="76" /></p></td>
  </tr>
</table>
<p>Then open the template.css inside /templates/rhuk_milkway/css  directory with text editor like notepad. Find “/*  module control elements */” comment. (You also can paste it at the end  of the template.css codes, and comment it /*customstyle*/)</p>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">Modify    it by adding these statements:
      <p><em>div.module_style1 {<br />
        font-family: Courier;<br />
        font-size: 13px;<br />
        font-weight: bold;<br />
        color: #c393a2;<br />
        text-transform: capitalize;<br />
        text-align: left;<br />
      }</em></p>
      <p><em>div.module_style1 h3 {<br />
        font-family: Courier;<br />
        color: #c393a2;<br />
      }</em></p>
      <p> Now    refresh your browser. It should look like the below image</p>
      <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/574d1205522176-joomla-tutorial-3-css-class-suffix-image9.gif" alt="" width="198" height="175" />.</p></td>
  </tr>
</table>

Joomla! Page Class Suffix 
Joomla! Page Class Suffix works when we want to do some styling to the content. In this example we are going to do some simple styling on Joomla! 1.5 Overview heading.

Code:

<table width="541" height="1159" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="541" valign="top"><p>To see the content before the styling is    applied, click on the 'Joomla! Overview' link.</p>
    <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/575d1205522176-joomla-tutorial-3-css-class-suffix-image10.gif" alt="" width="541" height="398" /></p></td>
  </tr>
  <tr>
    <td valign="top"><p>In the admin page, click on the menu tab.    Select <em>Menu Manager</em>. Then click <em>Joomla! Overview</em>.</p>
    <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/576d1205522176-joomla-tutorial-3-css-class-suffix-image11.gif" alt="" width="385" height="85" /></p></td>
  </tr>
  <tr>
    <td valign="top"><p>Type “-overview” inside the Page    Class Suffix box</p>
    <p>.<img src="http://forum.codecall.net/attachments/tutorials-classes-code/577d1205522202-joomla-tutorial-3-css-class-suffix-image12.gif" alt="" width="351" height="104" /></p></td>
  </tr>
  <tr>
    <td valign="top"><p>You should see this by using Firefox Web    Developer plugin in the <em>Joomla!    Overview</em> page.</p>
    <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/579d1205522202-joomla-tutorial-3-css-class-suffix-image14.gif" alt="" width="251" height="38" /></p></td>
  </tr>
  <tr>
    <td valign="top"><p>Then paste the code into the template.css    file. We are going to modify the heading only.</p>
      <blockquote>
        <p>.contentheading-overview <br />
          {<br />
          background: #CCFF33;<br />
          font-family: &quot;Agency FB&quot;;<br />
          }</p>
    </blockquote></td>
  </tr>
  <tr>
    <td valign="top"><p>The result</p>
    <p> <img src="http://forum.codecall.net/attachments/tutorials-classes-code/580d1205522202-joomla-tutorial-3-css-class-suffix-image15.gif" alt="" width="239" height="150" /></p></td>
  </tr>
</table>
<p>The same goes to the contentpaneopen‐overview, if you want  to modify the style of the whole content.</p>
<p><strong><u>Joomla! Menu Class  Suffix</u></strong><br />

The last class suffix in Joomla! Is Menu Class Suffix. This time we are going to do some styling on the Key Concept menu. 
By now you should be at least familiar with the admin page. By going to module manager under extensions tab, click on Key Concepts module. Type “-horizontal” inside Menu Class Suffix box.

Code:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="278" valign="top"><p>&nbsp;</p>
    <p>Then, go to Firefox and find out what you want to do by    using Firefox Web Developer plugin.</p>
    <p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/581d1205522202-joomla-tutorial-3-css-class-suffix-image16.gif" alt="" width="206" height="164" /></p></td>
  </tr>
</table>
<p><strong>Remember, we are  not going to change the module. So ignore the .module_menu.</strong></p>
<p>After that, copy and paste this code inside the  template.css file.</p>
<p>.menu-horizontal  .item38 <br />
  {<br />
  border: thin #FF0000 groove;<br />
  } </p>
<p>And the result is:                                </p>
<p><img src="http://forum.codecall.net/attachments/tutorials-classes-code/582d1205522215-joomla-tutorial-3-css-class-suffix-image17.gif" alt="" width="190" height="49" /> </p>
<p>If you do “<em>.menu-horizontal.item38</em>” instead of “.menu-horizontal .item38”,  the result is nothing. So make sure  of the space in front of .item38.  If you do .menu-horizontal, the border will change wraps the entire link there. </p>
<p>Menu Class Suffix is useful when you don’t want to change  the entire module. In this example, if we use .module_menu (default module  suffix), the blue wrap will gone (it also will affect the menu modules that use  the same suffix).</p>
<p><strong><u>Things to be  considered</u></strong><br />

1. Now, can you tell what the big difference between these 2 codes is?
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="151" valign="top"> 
div.module_style1 
{ 
font-family: Courier; 
font-size: 13px; 
font-weight: bold; 
color: #c393a2; 
text-transform: capitalize; 
text-align: left; 
} </td>
<td width="70" valign="top"> 
 
 and </td>
<td width="193" valign="top">div.moduletable_pollstyle1 td 
{/*content */ 
color: #FF0000; 
font-family: Arial, Helvetica, sans-serif; 
text-align: left; 
font-style: italic; 
}</td>
</tr>
</table>
The former doesn’t have a table, but the latter has a table beside the module (notice the bold). You may ask why I wrote different classes. But since it is different we have to specify it correctly. This is very crucial things to consider when we going to do some styling to different module. Luckily Mozilla Firefox has Web Developer extension that can tell us what the module’s class is. We already used it a lot in the previous example. 
Notice div.module_menu 24 (ignore the number) there. This tells us what class we should modify inside template.css.
<img src="http://forum.codecall.net/attachments/tutorials-classes-code/583d1205522215-joomla-tutorial-3-css-class-suffix-image18.gif" alt="" width="997" height="417" /> 

2. Add the suffix properly. Remember if the suffix is style2 in template.css file, you must exactly enter like modulesuffix or moduletablesuffix. In this case, enter it modulestyle2 or moduletablestyle2. 
Trimming or spacing to the suffix will make no change to the classes. 
 
3. If you want to do a single menu styling, follow the class information exactly from the Firefox Web Developer plugin. As example in the picture, if you want to change the Joomla! Home link, type “.menu .item11 {…}” and not “.menu.item11 {…}”.
<img src="http://forum.codecall.net/attachment.php?attachmentid=584&stc=1&d=1205525231 " alt="" width="198" height="121" />
</body>
</html>