Change Menu/Module Title Background

Question

I am the Portal Administrator for a DNN site. We are using a Vertical-Tabbed-Boxed skin with blue menu background and blue Module Title background. I would like to change both of those to green.

How/where do I do that?

Answer 1

That's going to require you to make some adjustments to the skin. Depending on how familiar you are with HTML & CSS, that may or may not be a daunting task... It may be beneficial to first check with the skin designer to see if they have any pre-made color variations available.

In the website's file structure, you can find the skin the Portals/_default/Skins/[skin name] folder (unless it was installed just for a specific portal, and then it's under that portal's folder instead of _default). There may be a skin.css file in there, which applies to all skin files (*.ascx), and/or there may by individual *.css files named for each skin file.

Once you've found the skin file(s) that you want to change, and the CSS that controls them, you'll need to find where that menu background is defined. There's a high likelihood that the skin is using some sort of control called "NAV" that will have a number of CSS classes defined on it. You should be able to look at those classes in the CSS file to find where the background color comes from.

For the module title, that's in the container, not the skin. So, it will be in somewhere like Portals/_default/Container/[skin name]. Again, you should be able to look at the container *.ascx file(s), find the Title component, see how it's styled, and then examine the CSS to find the definition of the blue style.

Answer 2

As @bdukes said, you're going to need to tweak the css, but I find the hardest bit is figuring out which css style needs to change, and which file to change it in.

So I use either IE8's Developer tool or Firebug. Bring it up, click on the item that needs to change, and see how the style is created. Often they'll show you what line of which css file you need to change.