Change Background Color in Modules

[CaseyAV]

Hello All,

I've got what I hope is a basic and easy question to answer. I've been working at this for awhile now and can't get it figured out, but I know it's possible. Basically I would like to be able to change the background color of certain mods. And/Or I would like to create a whole color sidebar that would better define elements on the side. For instance I have a cart and a module for displaying categories that would be more visible if I could define a color for that side. Or if there are other options I'd love to hear it. I've tried several options... Repeating an image with code, using a full image. I recently found a tutorial on creating rounded corners and borders, but I haven't tried it yet. Unfortunately my coding abilities have wained over the years, and I'm trying to catch back up.

If anybody has any suggestions, it would be appreciated.

Thanks, Justin

Here's my site, you may be a better idea of what I'm after.

www.caseyav.com

[allin1]

Layout and style can be changed in the css Files. You just have to find out what section you want to change, but that's not that complicated.

[CaseyAV]

So, for instance my "Display Product Category" Module, should have a CSS file associated with it? Then add a code to it that would either repeat a background, change color, etc?? Not sure I know where to find it, but I'll give it a shot..

If I get stumped on code, can I post it here or is that frowned upon?

Thanks for replying so quickly.

[allin1]

The section has a code, for example you Body Section has a CSS, or Footer, or header etc.. So you need to check in the files what Code is used and change then to what you want.

Sure, if you have some questions, just post ;-)

[visnik]

If you load the firebug extension in your browser (firefox or chrome) highlight the part of the template you want and it will give you the CSS file and Line number(s) that affect that section of your template.

[CaseyAV]

Awesome, I'll give that a shot!!

[visnik]

glad I could be of assistance.

[CaseyAV]

You know, I've tried Firebug all weekend. I just can't seem to find the exact CSS that is controlling these elements. I'm using a rockettheme template, which uses the gantry framework and it seems like everything I check shows gantry.css as the controlling CSS file. Either that or I just don't know how to use firebug. If anybody has a moment maybe they could look at my site and use firebug to tell me which CSS file controls my Virtuemart MiniCart and Virtuemart Category display?

www.caseyav.com

Thank you so much for your replies.. Justin

[visnik]

Ok On your site shop up page, under the categories for example the background looks like it is being controlled by the class "yagendoo_vm_categories_inner" from CSS file fetchs...mpt.css (line 1773)

located: http://www.caseyav.com/components/com_v ... Prompt.css

actuall css:

Code: Select all

div.yagendoo_vm_categories_inner, div.yagendoo_vm_featured_inner, div.yagendoo_vm_recent_inner {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border-left:1px solid #C8CBCD;
border-right:1px solid #C8CBCD;
padding:10px 14px;
}

change the "background:#FFFFFF none repeat scroll 0 0;" value.

see if that helps.

[CaseyAV]

Ok, but how do I find that CSS file? I'm kinda following you, but it seems like there are a lot of scripts being "called". Which file do I use FTP to download and then edit?

Why could I only get firebug to show me the gantry.css? I'm still not sure how you figured this out. Surely it's not that difficult and I'm just missing something.

Thanks again Visnik, for helping me step through this.

Justin

[visnik]

I'll assume you are using firebug in firefox. With firebug open, click on the inspect page element button (little blue rectangle) On your web page it will outline the css element you want to examine in dark blue, click to lock in your selection.

at the bottom of the page in firebug the element (class, table, div etc.) will be highlighted.
to the right will be all the .css files that affect that particular element with inheritance. The top one is the top of that stack. All crossed out properties have been replaced by another property in the same or another .css file.

In your case the fetchs...mpt.css file is the one controlling the element you want on line 1773 of that css document. Well where is that? If you highlight over the fetchs...mpt.css (line 1773) in the top right corner it will give you the location of the css file.

example: components/com_virtuemart...... probably within that directory will be a css file that starts with fetchs.

hope that helps.

[CaseyAV]

Yikes, I keep trying and I just can't find what you are. I've done what you said, which is what I've been doing all along, but I can't find that "fetchs...mpt.css" for nothing, at least in Firebug, I'll have to try ftp tonight.... When I select/highlight the categories module, in Firebug on the left it shows: <div class="module surround"> . Then on the right it shows me several gantry.css, template.css, fusion.css, style4.css.... But nothing that I can see having to do with fetch...mpt.css.

I'm starting to feel bone-headed here.. . . Sorry I can't figure this out yet... . Thanks staying with me...

Justin

[visnik]

we may be just looking at different parts of the page. Look at the following screenshot http://www.nitchfly.com//images/Share/screenshot.jpg

Noticed i changed the background to a nasty bright green.

[CaseyAV]

Ahhhh, yes, now I see where we are straying. The part I actually want to change is the "Shop By Category" Module, which you can see on the right in your screenshot, next to that tasty green ; ). This module also exists on the front page, which is where is starts to get lost. Look towards the bottom/middle of the page on the right, just below the cart and the silly moving bar. I would like to change the color of the background so it shows up better. Or I'd like to add a border around the module, but that may be too difficult for me right now, even thought everybody else has cool mods with borders. I'd also like to do the same thing to the Mini Cart module above it. Thanks again, I can feel it starting to come together... justin

[visnik]

Under gantry.css line 16 try adding a background-color: property.

[CaseyAV]

Ok, I'll give that a try tonight.. Sounds easy enough, but nothing ever is for me....

I assume you mean just add code after line 16, something like this:

{
background-color:#00ff00;
}

Just that simple?

Thanks, Justin

[thesnail1986]

Hello All,

I've got what I hope is a basic and easy question to answer. I've been working at this for awhile now and can't get it figured out, but I know it's possible. Basically I would like to be able to change the background color of certain mods. And/Or I would like to create a whole color sidebar that would better define elements on the side. For instance I have a cart and a module for displaying categories that would be more visible if I could define a color for that side. Or if there are other options I'd love to hear it. I've tried several options... Repeating an image with code, using a full image. I recently found a tutorial on creating rounded corners and borders, but I haven't tried it yet. Unfortunately my coding abilities have wained over the years, and I'm trying to catch back up.

If anybody has any suggestions, it would be appreciated.

Thanks, Justin

I have the same issue , my template background is white and when i publish my login module this is also white, i would like it to have a green background i have done this before in the joomla module class suffix but i can not find the code last time i copy and pasted it from here. Is it something like {background colour 999999} any help on this will be great thanks

Here's my site, you may be a better idea of what I'm after.

http://www.caseyav.com

[Adam504]

I am having the same issue with Joomla modules. I am using the Spectral template downloaded from Rocket Themes and I am using Firebug as my design assistant. The .css template I keep getting directed to is master-cdc9e2032bf54166663cd1da12af5001.css. This .css file is a huge block of code without any defining classes showing where to make background color changes ect. to the sidebar module. I teied following the instructions for making a Module Class Suffix and named it custommod, but cannot see where that appears in the .css code. The url of my website is: http://home.foxprintservices.com/. The sidebar module in question is "What We Can Do For YOU"

thanks!

[dpacadmin]

@ Adam504
Check your template's template.css file. Background color is here;

Code: Select all

.rt-block.custommod {
    background-color: #F2F2F2;
    color: #5C5C5C;
}

Source is; http://home.foxprintservices.com/templa ... mplate.css
Line 44