Styling dnn:LOGIN - Skins, Themes, and Templates

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

1
2
3
4
5

3/15/2007 2:39 AM

nathanblogs

Joined: 1/8/2007

Posts: 13

Styling dnn:LOGIN

I'm tring to style this <dnn:LOGIN runat="server" id="dnnLOGIN" />.

Does anyone know how I would be able to style the default LOGIN dnn.

I'm also tring to change logout to sign-out and login to sign-in.

Anyone have any ideas thanks.

3/15/2007 9:57 AM

JennC

Joined: 11/7/2006

Posts: 87

Re: Styling dnn:LOGIN Modified By JennC on 3/15/2007 9:58:08 AM

To style the dnnLOGIN control, here's how I did/do it:

* Decide to put this control in a table cell.

* Assign a style to this table cell.

* Create this style in the style sheet used by your skin.

As for changing the text for Login and Logout, you can do it like this:

<dnn:LOGIN runat="server" id="dnnLOGIN" Text="sign-in" LogoffText="sign-out" />

Hope this helps!

jc

3/15/2007 6:45 PM

Timo Breumelhof

www.40fingers.net
Joined: 2/9/2006

Posts: 4430

Re: Styling dnn:LOGIN

The ID of the login link on the page should be: dnn_dnnLOGIN_hypLogin

a#dnn_dnnLOGIN_hypLogin{
color:#FF0000;
}
Should help

DNN websites, modules, skins, hosting and support

3/16/2007 11:42 AM

Ed DeGagne

www.southvillagesoftware.com
Joined: 12/2/2003

Posts: 420

Re: Styling dnn:LOGIN Modified By Ed DeGagne on 3/21/2007 11:30:40 PM

To specify a css class of your own for the login control, you just need to add a CssClass attribute:

<dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="MyClass" Text="Sign-in" LogoffText="Sign-out" />

Then define MyClass in your skin Css.

The above technique is in use at my "play" site: http://www.demonchronicles.com

I actually use a class called "user" defined in my skin stylesheet, and apply it to both the login control and the user control up in the top right corner.

You don't have to or should look for a specific id, you should apply your own class to the control(s).

Site uses the following:

<dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="user" Text="Sign-In" LogoffText="Sign-Out" />
<dnn:USER runat="server" id="dnnLOGIN" CssClass="user" Text="Sign-Up" />

a.user:link, a.user:active, a.user:visited,
a.login:link, a.login:active, a.login:visited
{

color:#ECF123;

font-weight:bold;

text-decoration:none;

}

Ed DeGagne
South Village Software

3/19/2007 11:53 AM

JennC

Joined: 11/7/2006

Posts: 87

Re: Styling dnn:LOGIN

Boy, the suggestions keeps getting better! I did not know that it is okay to use the "class" attribute in dnn:LOGIN and dnn:USER . . . I think I will copy Ed's implementation myself.

jc

Page 1 of 2

1

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)