Styling New Module Position

Hi,

I created a new module just above the bottom1 position called bottom. I require this module to be full width, and have the same styling as the main body_bottom module.

The site is www.rurallondoner.com

I have assigned 4 modules to this position, Product Reviews, Campaigns, Events and Discussions.

I am nearly there, but the last thing I am having problems with is the styling. I've searched the .css files and have added gkBottoma wherever I see gkMainbodyBottom.

If you look at the site, you'll see that the bottoma module has not picked up any of the correct styling. Can you please help?

Thanks,

Eric.

Hi

I do not see even one selector #gkBottoma in css, are You sure cache is disabled and changs to the files are visible ?

Anyway, why don't You use mainody_bottom position instead?

Hi,

Yes, the CSS cache is disabled. I was using mainbody_bottom, but I require the module to be full width without the sidebar to the right.

Perhaps an easier way would be to re-create one of the bottom(x) modules. I already did this successfully and added the CSS. However, when I do this then the module style 'light' does not work.

If you could tell me how to over-ride the module styling for bottom1, bottom2, etc and make the style suffix 'light' work, then this might be an easier way. Please let me know.

Thanks,

Eric.

Hi,

Can you please review my previous suggestion. Would this work?

Thanks,

Eric.

Hi

In template settings You will find a module styles override. Just add Your new module pasition name and use "gk_style" for override. This will allow using suffixes.

Hi,

I got most of it working. The new module is called Bottom11 and sits just above Bottom1. However, it will not let me use the 'light' suffix - it just appears white. However, it lets me use the 'color' suffix. Any ideas?

Look at www.rurallondoner.com

Eric.

Hi

Now I see why " light" is not working. You have override this style with this line in template.css:

Code: Select all

#gkBottom11 .box, #gkBottom1 .box, #gkBottom2 .box, #gkBottom3a .box, #gkBottom3 .box {
    background: none repeat scroll 0 0 #fff;
}


but no worry, just override it again by adding this code at the bottom of this file:

Code: Select all

#gkBottom11 .box.light, #gkBottom1 .box.light, #gkBottom2 .box.light, #gkBottom3a .box.light, #gkBottom3 .box.light {
    background: none repeat scroll 0 0 #f0f0f0;
}