Hi,

I'm new to DNN and I'm developing a new skin from scratch.  I need to know how to change the color of the items in my main menu.  I have been trying to use the "Edit CSS" tool in Firefox to modify the css settings.  I tried to change the .MainMenu_MenuItem with no success.  What am I missing?

Thanks!

If you are using Firefox I would advise getting the Firebug addon installed. Once you have done that restart your browser and revisit your website, place your mouse over the text/item which you want to see the CSS for and click on the "Inspect element" option which should appear on the buttom of your Right-Click Menu.

You should now see the HTML window on the lower left of your screen and across from that is the list of CSS elements which effect the appearance of the HTML element you want.

The part you are concerned with here is the CSS file and the element, so for a simple example I will use the your username as it appears in your post above.

Right-Click your mouse while it is over "sydcam". Select "Inspect element". The Firebug window should now be appearing at the bottom half of Firefox.

Hopefully you will see the line beginning with:   td class="afpostinfol" .... highlighted and on the right you will see the CSS for: .afpostinfol, .afpostinfo2..... and also the CSS file and line number for these: module.css (line 120).  

So now we know that in order to alter the appearance of the text "sydam" we must open up the file "module.css and go to line 120 and alter the ".afpostinfol, .afpostinfo2" elements.

However, sometimes we can have CSS files with the same name in a website and attached to the same HTML file. So, if you look again at the CSS information window in Firebug on the bottom right of your screen and look again at the line with ".afpostinfol, .afpostinfo2" you will notice that the name of the file "module.css (120)" is actually a link. If you place you mouse over the link the full address of the location of that particular CSS file is shown.

You do not need to click on it, just right-click on it and select "copy location". Now depending on whether or not you are on a live server or a localhost development server you should open the CSS file in Notepad/Dreamweaver and edit that particular line, or in the case of a live server you should download the file name, make you changes and upload it.

If you are on a localhost/developement server/pc then you can just click on the "module.css (line 120)" file name and it will open up, you can make you changes instantly and they are saved to the file. This obviously only works on local installations of a website.

That was a bit of a mouth full, but if you play around with Firebug in Firefox you can save yourself alot of time in designing and laying out your site design.

Thank you for your quick response. I will give this a try. Do you know of a good menu module? I may not need it if I can get your solution to work, but I would still like to know if there is a good tool/module to create or modiy my menu. Thank you again!

We have been using Snapsis Nav Menu mainly because the SolPartMenu is a mess in both CSS/HTML and SEO terms.

Snapsis is cheap, easy to setup and there are thousands of variations you can use, its also very easy to customise to your own needs and it is generates CSS and SEO friendly code.

Just a note that the "Edit CSS" option in the Web Developer's Toolbar doesn't change the CSS files in your DotNetNuke installation. It lets you modify what's local to your browser only.

I concur that the Snapsis menu is a good one.

Sorry sydcam,

As jncraig noted you can't save changes to the CSS file using the Edit CSS option. We have tweaked our own version of the developer toolbar to allow us to edit and save changes locally, I forgot to/should have mentioned that.

Perhaps you could donate those "tweaks" back to the community so that they can be incorporated into the next version of Web Developer's Toolbar.