Page 1 of 1

How to change menu font size / font color

Posted: Thu Nov 06, 2008 12:44 pm
by amasters46250
(I'm using the rhuk_milkyway template.) I've created a secondary menu in addition to the main navigation menu. The problem is that the menu font size for this secondary menu is greater than that of the main navigation menu. I navigated to Extensions-> Module Manager-> Menu2 -> Parameters-> Menu Style, and changed the setting on the drop-down from "List" to "Legacy - Flat List". This reduced the font size of the menu items, but not of the menu title. Any suggestions?

Re: How to change menu font size / font color

Posted: Thu Nov 06, 2008 1:14 pm
by Michaelson
Hi
You need to change the Template CSS code for the Menu Header. This can be found in the template.css file. You can edit it by going to Extensions>Template Manager

I suggest that you use Firefox Browser and install Firebug which will help you enormously. With Firebug you can see the exact line in the css file which affects the specific part of your page layout. You can make a change to see the effect it might have without the need to change the css file. The changes you make in Firebug are not permanent so the ones you decide on you then need to change the css file.

One other advantage is that some of the css styling is in a different file to the template.css file and Firebug will show you what the file name is and the line of code you need.

Re: How to change menu font size / font color

Posted: Thu Nov 06, 2008 2:17 pm
by amasters46250
Thanks for the info Michaelson. I downloaded Firebug and it is an awesome resource! I was able to locate the line of code in the css file. However, a new problem has emerged: the template.css file has changed from a writable file to an unwritable one. And I have no idea what brought this on. Btw/, the block of code referenced by Firebug was as follows:

h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
font-size: 1.1em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;


Also note that the font size had previously been set to 1.5em. Somehow I managed to change it--presumedly before the css file had become unwritable--and the menu heading font size is still the same size! So what the hell? I guess the biggest problem now, though, is the file having become unwritable.

Re: How to change menu font size / font color

Posted: Thu Nov 06, 2008 5:03 pm
by EclecticLady
I have the same "writeable" problem and made a post. The only reply I received was to check Cpanel (not very helpful). The template files appear to become "unwriteable" whenever you update them.

As a work-around I have been changing the permissions through properties in my CuteFTP. Strange way to do it and cumbersome to do every time you make many changes, but it works.

Re: How to change menu font size / font color

Posted: Thu Nov 06, 2008 7:13 pm
by amasters46250
EclecticLady wrote:I have the same "writeable" problem and made a post. The only reply I received was to check Cpanel (not very helpful). The template files appear to become "unwriteable" whenever you update them.

As a work-around I have been changing the permissions through properties in my CuteFTP. Strange way to do it and cumbersome to do every time you make many changes, but it works.
Thanks EclecticLady. I just logged into my GoDaddy file management control panel and set the permissions to be writable. That fixed the that particular problem...for now, at least.

Re: How to change menu font size / font color

Posted: Thu Nov 06, 2008 7:44 pm
by Michaelson
Hi amasters46250 & EclecticLady

Just Ignore the template.css Unwriteable indication in Joomla. There must be a bug in Joomla somewhere. I get that all the time, I ignore it and can still make changes in the file.

amasters46250
Are you sure that that bit of code is the code that controls the feature you want? I found that when I was learning Firebug I thought I was changing the right code but was another block.

If you changed the right line of code and the font is still the same size, do you have a cacheing issue, clear your cache perhaps. Tools>Clear Private Data> and leave Clear Cache checked only.

Sometimes the template uses a file other than template.css so be careful you don't assume its template.css when it might be another.

BTW There is a great tutorial on Firebug I found by accident on the IBM site
http://www.ibm.com/developerworks/web/l ... j-firebug/

HTH