The Joomla! Forum ™



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.



Post new topic Reply to topic  [ 19 posts ] 
Author Message
PostPosted: Fri Jun 04, 2010 2:19 pm 
Joomla! Apprentice
Joomla! Apprentice

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


Top
 Profile  
 
PostPosted: Fri Jun 04, 2010 2:37 pm 
Joomla! Enthusiast
Joomla! Enthusiast

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


Top
 Profile  
 
PostPosted: Fri Jun 04, 2010 2:55 pm 
Joomla! Apprentice
Joomla! Apprentice

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


Top
 Profile  
 
PostPosted: Fri Jun 04, 2010 2:59 pm 
Joomla! Enthusiast
Joomla! Enthusiast

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


Top
 Profile  
 
PostPosted: Fri Jun 04, 2010 3:08 pm 
Joomla! Intern
Joomla! Intern

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


Top
 Profile  
 
PostPosted: Fri Jun 04, 2010 3:09 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Jun 04, 2010 2:02 pm
Posts: 12
Awesome, I'll give that a shot!!


Top
 Profile  
 
PostPosted: Fri Jun 04, 2010 3:28 pm 
Joomla! Intern
Joomla! Intern

Joined: Tue Dec 04, 2007 11:38 pm
Posts: 88
glad I could be of assistance.


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 1:05 pm 
Joomla! Apprentice
Joomla! Apprentice

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


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 3:27 pm 
Joomla! Intern
Joomla! Intern

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


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 3:47 pm 
Joomla! Apprentice
Joomla! Apprentice

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


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 4:54 pm 
Joomla! Intern
Joomla! Intern

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


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 5:14 pm 
Joomla! Apprentice
Joomla! Apprentice

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


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 5:25 pm 
Joomla! Intern
Joomla! Intern

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


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 5:59 pm 
Joomla! Apprentice
Joomla! Apprentice

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


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 6:43 pm 
Joomla! Intern
Joomla! Intern

Joined: Tue Dec 04, 2007 11:38 pm
Posts: 88
Under gantry.css line 16 try adding a background-color: property.


Top
 Profile  
 
PostPosted: Mon Jun 07, 2010 7:03 pm 
Joomla! Apprentice
Joomla! Apprentice

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


Top
 Profile  
 
PostPosted: Wed Jun 09, 2010 2:00 pm 
Joomla! Fledgling
Joomla! Fledgling

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


Top
 Profile  
 
PostPosted: Mon Jan 27, 2014 3:15 pm 
Joomla! Fledgling
Joomla! Fledgling

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


Top
 Profile  
 
PostPosted: Wed Jan 29, 2014 7:26 pm 
User avatar
Joomla! Champion
Joomla! Champion

Joined: Sat Aug 16, 2008 1:46 pm
Posts: 5838
Location: the Bat Cave
@ Adam504
Check your template's template.css file. Background color is here;
Code:
.rt-block.custommod {
    background-color: #F2F2F2;
    color: #5C5C5C;
}

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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 19 posts ] 



Who is online

Users browsing this forum: Jeroen07 and 29 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group