mod_sobi2featured - CSS Styling

[aboututila]

mod_sobi2featured - CSS Styling
========================
CSS styling for mod_sobi2featured assumes the reader has a basic understanding of how to modify the CSS in the Joomla site Template(s), usually located in myJoomlaSite/templates/templateName/css/template_css.css

mod_sobi2featured has been designed so that all HTML output by the module is readily accessible for CSS styling via the site Template(s). (The module outputs almost all HTML elements with 'class= ' in the tags).

In order to determine how to specify/design the module CSS for your site Template(s), it is probable easiest to install the module and then view the resulting HTML from the Joomla front-end. This is because the form of the HTML output by the module is variable (dependant on several of the module configuration settings). When viewing the resulting HTML, the mod_sobi2featured output can be located by looking for the HTML between the HTML comments;
<!-- Start Module mod_sobi2featured -->
<!-- End Module mod_sobi2featured -->

Tips & Tricks - 'side-by-side' entries
-----------------------------------
To show module entries 'side-by-side', add the following CSS to your Site Template;
div.sobi2Featured div.entry {float:left; width:x%;}
where;
    x% = 50% for 2 'side-by-side' entries
    x% = 33.33% for 3 'side-by-side' entries
    x% = 25% for 4 'side-by-side' entries
    etc, etc
If your 'side-by-side' entries will not always be the same vertical height, then it is probable they may not wrap as you would like.

To solve this you can either;
(a) set 'side-by-side' entries to be the same specified vertical height,
     ie: div.sobi2Featured div.entry {float:left; width:50%;height:zpx;}
     where z is the height in pixels for your largest/longest entry.

(b) or use 'child' and 'adjacent sibling' CSS selectors and force a 'clear:both;' at the appropriate entry.
     Unfortunately, selecting the appropriate entry div.entry is easily done until CSS-3
     ie: if you have 2 'side-by-side' entries, then you need to force a 'clear:both' after every 2 consecutive entries, (ie entries 3, 5, 7, 9, etc)
         if you have 3 'side-by-side' entries, then you need to style a 'clear:both' after every 3 consecutive entries, (ie entries 4, 7, 10, etc)

    The only way I know to do this in CSS-2 is to use child and sibling selectors;
    ie If you have 2 'side-by-side' entries, then the CSS would be;
    div.sobi2Featured div.entry {float:left;width:50%;clear:none;}
    div.sobi2Featured>div.entry+div.entry+div.entry {clear:both}
    div.sobi2Featured>div.entry+div.entry+div.entry+div.entry+div.entry {clear:both}
    div.sobi2Featured>div.entry+div.entry+div.entry+div.entry+div.entry+div.entry+div.entry {clear:both}
    etc, etc (adding +div.entry+div.entry) until the number of div.entry's is sufficient for the maximum number of 'featured entries' you intended to display.
    Obviously if you intend to have a large number of 'featured entries' this is not a very efficient method, but I know of no method without using Javascript.

-------------------------------------------------------------------------------------------------------
The following is an attempt to document the form of the HTML output by the module.

    The output of the entire module is dependent on the Site Template
    (refer Joomla Developer mosLoadModules( $position_name [, $style] )
    Assuming the site Template is using the default (no $style argument) for a Table column output,
    then the entire module output will be of the following form;

    <!-- comments to explain the Module CSS styling -->
    <!-- these comments are not in the output HTML-->

    <table cellpadding="0" cellspacing="0" class="moduletableModuleClassSuffix">
    <!--where ModuleClassSuffix=Module Parameters 'Module Class Suffix' value-->
    <tr>
    <th valign="top">Joomla Module Title</th>
    <!--where Joomla Module Title=display of Joomla Module Title-->
    <!--Not output if Module Details 'Show title'=No-->
    </tr>

    <tr>
    <td>
    <!--The mod_sobi2Featured Module contents are then output in a 'tableless' format-->

    <div class='sobi2Featured ContentsWrapperClass'>
    <!--where ContentsWrapperClass=Module Parameter 'Contents Wrapper Class' value-->

    <div class='contenttitle Content Title'>
    <!--where Content Title=Module Parameter 'Content Title' value-->
    <!--Not output if 'Content Title' is blank or if there are no Entries to be displayed-->

      <div class='entry'> <!--Repeated for each Entry-->

         <div class='title'>data</div>
         <!--where data=display of Entry Title-->
         <!--Not output if Module Parameter 'Display Title'=No-->

         <div class='icon'>img</div>
         <!--where img=display of Entry Icon-->
         <!--Not output if Module Parameter 'Display Icon'=No-->
         <!--or-->
         <div class='noicon'></div>
         <!-- if Module Parameter 'Display Icon'=Yes, but no Icon exists for this entry-->

         <div class='image'>img</div>
         <!--where img=display of Entry image-->
         <!--Not output if Module Parameter 'Display Image'=No-->
         <!--or-->
         <div class='noimage'></div>
         <!-- if Module Parameter 'Display Image'=Yes, but no Image exists for this entry-->

         <div class='customfields'>
         <!--Not Output if no customfields to output-->

             <div class='CCustomFieldId'>data</div>
             <!--Repeated for each Custom Field-->
             <!--where CustomFieldId=Custom Field ID number-->
             <!--where data=display of Custom Field data-->

         </div>

         <div class='link'>link</div>
         <!--where link=display of link-->
         <!--Not output if Module Parameter 'Display Link to Entry Details'=No-->

      </div>
    </div>
    </td>
    </tr>

    Define your own CSS styling in your site Template(s) based on the above HTML model

Links
-----
Module Home Page