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;
}
?>
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:
Hi,
This was a great tutorial! Do you know if it is easy to apply the same thing to the component title/heading?
Hey this was a great tutorial! Do you know how to apply the same thing to component titles/headings?
Cheers
Post a Comment