Change Background Color in Modules

General questions relating to Joomla! 1.5 There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
CaseyAV
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Change Background Color in Modules

Postby CaseyAV » Fri Jun 04, 2010 2:19 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 217
Joined: Tue Apr 27, 2010 4:18 pm
Location: Luxembourg
Contact:

Re: Change Background Color in Modules

Postby allin1 » Fri Jun 04, 2010 2:37 pm

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.
http://www.allin1solutions.com
Web Hosting, Virtual and Dedicated Servers
Joomla Hosting and Auto Installer

CaseyAV
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Re: Change Background Color in Modules

Postby CaseyAV » Fri Jun 04, 2010 2:55 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 217
Joined: Tue Apr 27, 2010 4:18 pm
Location: Luxembourg
Contact:

Re: Change Background Color in Modules

Postby allin1 » Fri Jun 04, 2010 2:59 pm

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 ;-)
http://www.allin1solutions.com
Web Hosting, Virtual and Dedicated Servers
Joomla Hosting and Auto Installer

visnik
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Tue Dec 04, 2007 11:38 pm

Re: Change Background Color in Modules

Postby visnik » Fri Jun 04, 2010 3:08 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Re: Change Background Color in Modules

Postby CaseyAV » Fri Jun 04, 2010 3:09 pm

Awesome, I'll give that a shot!!

visnik
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Tue Dec 04, 2007 11:38 pm

Re: Change Background Color in Modules

Postby visnik » Fri Jun 04, 2010 3:28 pm

glad I could be of assistance.

CaseyAV
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Re: Change Background Color in Modules

Postby CaseyAV » Mon Jun 07, 2010 1:05 pm

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
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Tue Dec 04, 2007 11:38 pm

Re: Change Background Color in Modules

Postby visnik » Mon Jun 07, 2010 3:27 pm

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 ... p=0&subdir [0]=/themes/yagendoo_VaMazing/yagendoo_css&file[0]=theme.css&subdir[1]=/themes/yagendoo_VaMazing/yagendoo_css&file[1]=default.css&subdir[2]=/js/mootools&file[2]=mooPrompt.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
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Re: Change Background Color in Modules

Postby CaseyAV » Mon Jun 07, 2010 3:47 pm

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
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Tue Dec 04, 2007 11:38 pm

Re: Change Background Color in Modules

Postby visnik » Mon Jun 07, 2010 4:54 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Re: Change Background Color in Modules

Postby CaseyAV » Mon Jun 07, 2010 5:14 pm

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
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Tue Dec 04, 2007 11:38 pm

Re: Change Background Color in Modules

Postby visnik » Mon Jun 07, 2010 5:25 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Re: Change Background Color in Modules

Postby CaseyAV » Mon Jun 07, 2010 5:59 pm

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
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Tue Dec 04, 2007 11:38 pm

Re: Change Background Color in Modules

Postby visnik » Mon Jun 07, 2010 6:43 pm

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

CaseyAV
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri Jun 04, 2010 2:02 pm

Re: Change Background Color in Modules

Postby CaseyAV » Mon Jun 07, 2010 7:03 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Tue Jun 08, 2010 7:59 am

Re: Change Background Color in Modules

Postby thesnail1986 » Wed Jun 09, 2010 2:00 pm

CaseyAV wrote: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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Jan 27, 2014 3:00 pm

Re: Change Background Color in Modules

Postby Adam504 » Mon Jan 27, 2014 3:15 pm

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!

User avatar
dpacadmin
Joomla! Champion
Joomla! Champion
Posts: 6023
Joined: Sat Aug 16, 2008 1:46 pm
Location: the Bat Cave
Contact:

Re: Change Background Color in Modules

Postby dpacadmin » Wed Jan 29, 2014 7:26 pm

@ 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


Return to “General Questions/New to Joomla! 1.5”

Who is online

Users browsing this forum: No registered users and 11 guests