Joomla Templates Club 406,261 posts

[helpfulnerd Friend helpfulnerdJoin date: February 2011Posts: 5Downloads:0Uploads:0]

#164452

Hi everyone,

I’m using JA Cloris for my site and I really love the fact that you can use the module class suffix in the modules for Light and Dark to change the backgrounds of where the modules appear.

What I want to do is make more class suffix’s so that if I have 6 modules I want a different background for each. If a user clicks a menu item and the template scrolls to that section I want a different background there, and the same for each.

Can someone point me in the right direction, or tell me what code needs to be edited.

I have a background that shows up on the main homepage, and I want a different background for each section.

Thanks for the help. I know it can be done, I just need a push in the right direction.

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#393467

You should go to admin -> extensions -> edit JA Cloris templates then edit layout default:

<?xml version="1.0" encoding="utf-8"?>
<layout name="desktop">
<!--Extra css load for this layout-->
<stylesheets>
</stylesheets>
<blocks name="top" style="xhtml">
<block name="absolute" type="modules" style="raw">absolute</block>
<block name="top-panel" type="modules" style="raw" main-inner="1">top-panel</block>
<block name="subnav" type="subnav" main-inner="1"></block>
<block name="onepage" type="onepage" pageid="" no-wrap="1" no-main="1">
<page name="about-us" type="modules" title="About us" class="light first-item">page1</page>
<page name="features" type="modules" title="Features" class="dark">page2</page>
<page name="services" type="modules" title="Services" class="light">page3</page>
<page name="video" type="modules" title="Video" class="red">page4</page>
<page name="gallery" type="modules" title="Gallery" class="light">page5</page>
<page name="blog" type="modules" title="Blog" class="light">page6</page>
<page name="faq" type="modules" title="Faq" class="light">page7</page>
<page name="contact-us" type="modules" title="Contact us" class="light last-item">page8</page>
</block>
<block name="cpanel" type="usertools/cpanel"></block>
<block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>
</blocks>
<blocks name="middle" main-inner="1" colwidth="30">
<block name="left1">left</block>
<block name="right1">right</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="navhelper" type="navhelper" wrap-inner="1" main-inner="1"></block>
<block name="botsl" type="spotlight" wrap-inner="1" main-inner="1" special="right" specialwidth="55">user6,user7,user8,user9,user10</block>
<block name="footer" type="footer" main-inner="1"></block>
</blocks>
</layout>

You could see that class is set for blocks: class=”dark”, class=”light”. Change them to your color and change in this css code:

div.dark {
background: url(“/jadev2_data/sites/auto/qs.cloris.1306719651/templates/ja_cloris/images/noise-d.gif”) repeat scroll 0 0 transparent;
}

in templates.css of templates/css/templates.css.

[Author]

Posts