Joomla! Discussion Forums

Hi

Im editing the template_css file trying to change colours of various boxes, fonts, borders (excuse my choice of words im bigtime noob...), how can I tell what part of the css code is for certain parts of the Joomla template? Ive found the main ones (main background, font etc) but some are impossible to find. A tool which shows me a visual representation of the css code and which highlights parts of the code would be great, if there is such a thing...?

Thanks!

Hi,

You can use Firefox web browser and Web Developers tools extension for the same.

You will be able to find code for specific module by pressing Ctrl+Shift+F on your keyboard and then clicking on specific module.

Thanks webify!

Ive got Web Dev tools installed and I have clicked Ctrl+Shift+F then clicked on specific module. I can see the attributes which pop up on the left, and I have opened teh "Edit Css" menu, but I cant work out how to highlight (or find) where the attributes displayed are found in the code.

Please see attahced. I know im close! thanks!!

Hi again,

Just to show where im gettign confused... I have highlighted (red circle) the part of the frontpage which I would like to change the colour of. Its the part which shows what page you have navigated to. On the frontpage it says "home".

So did a Ctrl+Shift+F then clicked on the above discribed part of the page and it shows the Ancestors... I assumed that I try to follow the ancestory and did a search for "maincol" as it was the last part of the ancestors list. But when I get there I dont see any colour references.

What am i doing wrong? Im so close!

Thanks again for your help!

(see new attached)

Hi,

You are not close. You are on it. You just see the title of the yellow popup

div#breadcrumbs

Just find out breadcrumbs and change the background color.

Thats it!

lol

here's the only breadcrumb reference (from template_css.css) but cant see the colour code to change? Do I have to add a line of code? Sorry mate!

}
#breadcrumbs {
margin: 4px auto 6px auto;
padding: 4px;
}
td#leftcol {}
td#leftcol .inside {margin: 4px;}

td#rightcol {}
td#rightcol .inside {margin: 4px;}

td#maincol {padding: 0px 8px;}

/* @end */

Oh yes!

add

background:#333333;

Let me know if this doesn't work

Thanks. Ive put it under breadcrumbs (see below) but nothing changed yet... (see attached for code and screenshot). Did i do it right?

}
#breadcrumbs {
margin: 4px auto 6px auto;
padding: 4px;
background:#443B32;
}


I seriously need to read up on this! If you have any good links to articles on this it would be much appreciated.

Hi,

If you give me a username and password, I can solve it for you in seconds.

PM me the username and password.

Thanks for fixing it for me Webify! Can you tell me how you fixed it so that I can do it myself for the other parts I need to change the colour of?

I just cant work out how to locate the correct part of the css files using the Dev Tools in Firefox. In dreamweaver you can click on a part on the webpage and it highlights the relevant code in a window next to it.

Can web dev tool for mozilla do this mate? Or can you tell me how you did it as I have sevreal other parts to change?

Thanks for your help mate!