Overriding the "Head" CSS Class -- appropriate way to do this? - Make it Hot! ( Skinning )

Forum General DotNetN... Make it Hot! ( ... Overriding the "Head" CSS Class -- appropriate way to do this?

6/16/2008 10:34 AM

	Joshua Beall
124 posts

Overriding the "Head" CSS Class -- appropriate way to do this?

Hi All,

I'm working on a skin that has multiple containers. The module title's text color will vary depending on which container is in use.

By default, the <dnn:TITLE> control is wrapping the title in a <span class="Head"> tag. This CSS style is defined in the default.css file.

I don't want to use that CSS class. The color and size of the module title is all defined by my own CSS, and it varies from container to container. But I can't seem to figure out a way to tell the dnn:TITLE control how to not apply the Head CSS class.

How do I do this? Remember, I can't just redefine the Head class in one of my own stylesheets, cause the properties I want to set vary from container to container.

-Josh

6/16/2008 12:01 PM

	keeperofstars
252 posts

Re: Overriding the "Head" CSS Class -- appropriate way to do this?

You can override the style in your container's CSS sheet. container CSS sheet overrides default and skin css sheets.

Another option though is to use the attribute to set what style for the container to use.

Containers xml:

<Object>
        <Token>[TITLE]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>CA_title_imageheader</Value>
            </Setting>
        </Settings>
    </Object>

Change the <Value> to the name of the style in your container CSS and there you go.

6/16/2008 12:17 PM

	Salaro Golestanian
890 posts
www.salaro.com

Re: Overriding the "Head" CSS Class -- appropriate way to do this?

you could have a container that in container.css you define

.Head { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#BDBDBD;}
.Normal {font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight:Normal; color:#BDBDBD; padding:0; line-height:140%; letter-spacing:140%;}

/* Orange Text display */
#orange .Head { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#F7941D;}
#orange .Normal { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight:Normal; color:#BDBDBD; padding:0;}

then if you put a div around the whole lot of the container like <div id="orange"> then you will be using the orange class and if your container does not have it which means you will be using the regular .HEAD

salar

6/16/2008 1:15 PM

	Cuong Dang
275 posts
engagesoftware.com

Re: Overriding the "Head" CSS Class -- appropriate way to do this?

Or you can learn how to optimize your CSS for faster performance as followed:

Instead of writing this:

.Head {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#BDBDBD;}

You can do this:

.Head {font: 13px bold #BDBDBD Verdana, Arial, Helvetica, sans-serif;}

Also, using pixel for font sizing is not an optimum choice. Use flexible font sizing approaches instead to accommodate multiple browsers and platforms for all users.

Cuong Dang
Engage Software
St. Louis, MO
314.966.4000

The leading provider of DotNetNuke support, training and custom module development.

6/16/2008 2:01 PM

	Joshua Beall
124 posts

Re: Overriding the "Head" CSS Class -- appropriate way to do this?

Thanks for all the suggestions!

What I would really like to do is simply not apply the Head CSS class at all. Is there any way to prevent the dnn:TITLE control from using that CSS class?

-Josh

Page 1 of 2

Forum

General DotNetN...

Make it Hot! ( ...

Overriding the "Head" CSS Class -- appropriate way to do this?