Friday, January 27, 2012

How to create multi color header of module in joomla 1.5

Want to create attarctive multi color header  of modules ???????
Please follow the below instructions
open the file "..\YourSite\templates\YourSiteTemplate\html\modules.php"
now add the below code at the end of the file
<?php
function modChrome_xhtmlwithcolor($module, &$params, &$attribs)
{
    $headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3;
    if (!empty ($module->content)) : ?>
       
            <?php if ($module->showtitle) : ?>
                <h<?php echo $headerLevel; ?>><?php
                    $title = $module->title;
                    $title = split(' ', $title);
                    $title[0] = '<span>'.$title[0].'</span>';
                    $title= join(' ', $title);
                    echo $title;
                ?></h<?php echo $headerLevel; ?>>
            <?php endif; ?>
            <?php echo $module->content; ?>
             
    <?php endif;
}
?>
now then  open  "..\YourSite\templates\YourSiteTemplate\index.php"
 and  look for the code for example "<jdoc:include type="modules" name="right" style="xhtmlwithcolor" />" here the meaning of the line is
using the module on the position right with xhtml style 
now simply change the xhtml style to  "xhtmlwithcolor"
now after that you have to make changes in the css as per your need
for example: your site's module header html code before make changes and the css are like that
<div class="moduletable">
<h3>
Latest News
</h3>
..............
..................
...............
</div>
 
 and css :
 div.moduletable h3 {
 color : #CC0000;
}
 
now your site's header html code after make changes and the css you  have to include for that 
 
<div class="moduletable">
<h3>
<span>Latest</span>
News
</h3>
..............
..................
...............
</div>
and css:
 
 div.moduletable h3 {
 color : #CC0000;
}
div.moduletable h3 span {
 color :#B95EA4;
 

2 comments:

bassybeats said...

Hi,

This was a great tutorial! Do you know if it is easy to apply the same thing to the component title/heading?

bassybeats said...

Hey this was a great tutorial! Do you know how to apply the same thing to component titles/headings?

Cheers