JoomlaJunkie - Joomla Template Provider Bringing color to the Joomla community

Hi,

I would like to set default color to "orange" in flex template (instead of blue). I do not want to give option of color choosing to my site visitors and orange need to be the default color in that case. I tried several possibilities as this template do not offer selection of default color easily, like your other few templates do. Can you please tell me step-by-step how to achieve this?

Thanks

hello Hemant:

Sorry, this process could be a tad easier in retrospect.

Making orange default is not so bad though. Let me show you.

open up your index.php file for this template and find these lines.

Code:

<!-- [START] CSS Stylesheets These 5 lines include the CSS stylesheet for standard and alternate styles to be chages with the JS stylesheet switcher --> <!--[if IE 5]> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/ie5-5.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if IE 6]> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/ie-6.css" rel="stylesheet" type="text/css" /> <![endif]--> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/blue.css" title="blue" rel="stylesheet" type="text/css" media="screen" /> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/orange.css" title="orange" rel="alternate stylesheet" type="text/css" media="screen" /> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/green.css" title="green" rel="alternate stylesheet" type="text/css" media="screen" /> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/red.css" title="red" rel="alternate stylesheet" type="text/css" media="screen" /> <!-- [END] CSS Stylesheets -->

You do not want the other colors, so remove the respective lines. You can copy my code here.

Code:

<!-- [START] CSS Stylesheets These 5 lines include the CSS stylesheet for standard and alternate styles to be chages with the JS stylesheet switcher --> <!--[if IE 5]> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/ie5-5.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if IE 6]> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/ie-6.css" rel="stylesheet" type="text/css" /> <![endif]--> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/orange.css" title="orange" rel="alternate stylesheet" type="text/css" media="screen" /> <!-- [END] CSS Stylesheets -->

Now that the template has no idea that it has template color options, lets remove the buttons so nobody can see it.

Scroll down a bit innt eh same index.php file and find this code.

Code:

<div id="container"> <div id="colorbar"></div> <div id="navbar"> <div id="options-wrap"> <div id="displayOptions"> <h3>Display Options</h3> <h4>Color Options</h4> <ul id="color-scheme" class="menu horizontal clearfix"> <li><a href="#" rel="blue" id="colorBlue" class="styleswitch" title="switch to blue">Switch to blue color scheme</a></li> <li><a href="#" rel="red" id="colorRed" class="styleswitch" title="switch to red">Switch to red color scheme</a></li> <li><a href="#" rel="green" id="colorGreen" class="styleswitch" title="switch to green">Switch to green color scheme</a></li> <li><a href="#" rel="orange" id="colorOrange" class="styleswitch" title="switch to orange">Switch to orange color scheme</a></li> </ul> <h4>Text Size</h4> <ul id="text-size" class="menu horizontal clearfix"> <li><a href="#" rel="mediumText" id="textMedium" class="fontswitch" title="small font">Medium Font Size (Default)</a></li> <li><a href="#" rel="largeText" id="textLarge" class="fontswitch" title="large font">Large Font Size</a></li> <li><a href="#" rel="xLargeText" id="textXLarge" class="fontswitch" title="extra large font">X-Large Font Size</a></li> </ul> </div> </div>

Remove out the color bits you do not want like I did here.

Code:

<div id="container"> <div id="colorbar"></div> <div id="navbar"> <div id="options-wrap"> <div id="displayOptions"> <h3>Display Options</h3> <h4>Color Options</h4> <ul id="color-scheme" class="menu horizontal clearfix"> <li><a href="#" rel="orange" id="colorOrange" class="styleswitch" title="switch to orange">Switch to orange color scheme</a></li> </ul> <h4>Text Size</h4> <ul id="text-size" class="menu horizontal clearfix"> <li><a href="#" rel="mediumText" id="textMedium" class="fontswitch" title="small font">Medium Font Size (Default)</a></li> <li><a href="#" rel="largeText" id="textLarge" class="fontswitch" title="large font">Large Font Size</a></li> <li><a href="#" rel="xLargeText" id="textXLarge" class="fontswitch" title="extra large font">X-Large Font Size</a></li> </ul> </div> </div>

THEN, open up template_css.css and find this.

Code:

@import url(customise.css); @import url(menu.css); @import url(blue.css);

Change blue to orange. This is the most important bit.


Now delete the cookie in your browser for the site you are making edits to, and that should do it for you. It's important you delete cooke as the color might still stay on blue until you do that as the template sends a cookie for color.

I hope that helps.

Thanks alot, Matt!

This is working now!

Really thankful to you for your quick reply and step by step guide.

JJ really rocks!

Hi Hermant,
Glad to hear you're a happy camper - just the way we like it!! Have a super weekend!
Cheers,
Chris

PS, Matt - Keep up the great work!