I am currently rebranding my DNN site and am have a minor styling problem with the dnn:LOGIN hyperlink. <dnn:LOGIN runat="server" ID="dnnLOGIN" CssClass="user" /> I have styled the login button using the ID with the CSS below to show an image instead of a link. #dnn_dnnLOGIN_cmdLogin { background-position: center; background: transparent url('Images/login.gif') no-repeat center top; height: 24px; width: 126px; margin: 0; padding: 0; border: 0; text-indent: -1000em; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ display: block; } #dnn_dnnLOGIN_cmdLogin:hover { background: transparent url('Images/login_r.gif') no-repeat center top; } This works fine but the problem I am running into is that it shows this for both the login and logout links. Is there a way to specify a separate image in CSS for the DNN log off event? I had a go at adding two new attrivutes (text and logofftext to my skin index full.ascx so I could use an attribute selector in my css but the new attribtures do display when I view source. <dnn:LOGIN runat="server" ID="dnnLOGIN" CssClass="login_control" text="Login" logofftext="Logout"/> Any ideas?

I don't think that approach is going to work because the classes don't change when the Login/Logoff state changes.

I can think of two approaches.

1. Create a custom skin object that has two classes: one for Login and one for Logout. You could start with the existing skin object. If you google you can find some references to creating skin objects for DotNetNuke.

2. Use jQuery to figure out the state and change the class.

Both of these approaches will require some software development experience. Were I to go about doing it, I'd probably select the custom skin object approach as it offers more control. I just took a look at the code for that and it looks like it would be a fairly easy change to make.