Hi - 

Does anyone know how to  go about placing an image/icon next to the Login, Register, Logout links for DNN:login?  I found out how to change the login/logout text, but nothing about adding an image.

Thanks -

Rick

You can do this with css.  Simply add the image as a background image and add enough padding on the left to keep the text from being rendered on top of the image.  I've found that IE8 is being troublesome about following the vertical alignment properly and aligns the image way out of vertical bounds (no surprise IE would misbehave) but setting the css class to display: inline-block should work, I got it working properly recently so it can be done.  This is all applied to whatever class you have for the login link, and you need to use a.LoginClass: link etc. and then if you want to change the image on hover you simply set up a new background image for a.LoginClass:hover.  If you don't need the image to change on hover, you can simply place the image in the html before the <object> or [token] in the skin file, and then you'll also need to wrap the image in the login class and then apply the display: inline-block to "LoginClass img" in your css or again, IE8 will have issues aligning even a plain ol' static image.  You'd think after all these years they'd be getting closer to the competition, but IE8 just adds new bugs and issues to the long list.  You can also apply the single image for both link and hover techniques, basically using negative numbers for background image position, and instructions for that are found easily with web search...

JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

WHAT?!?

Frank, perhaps this thread might be useful to you too...

Here's some HTML:

<dnn:LOGIN runat="server" id="dnnLOGIN" cssclass="login_control" />
<dnn:USER runat="server" id="dnnUSER" cssclass="user_control" />

Here's some CSS:

/*--- Login / User Rulesets --------------------------------------------*/
a.login_control:active, a.login_control:visited, a.login_control:link, .login_control {
    color: #777;
    font-size: 13px;
    background-image: url('../images/login_sprite.gif');
    background-position: left bottom;
    background-repeat: no-repeat;
    margin: 0px 20px 0px 0px;
    padding: 0px 0px 0px 35px;
    height: 30px;
    text-decoration: none;
    display: block;
    float: left;
    line-height: 30px;
}
a.login_control:hover {
    background-position: left top;
    color: #fff;
    text-decoration: none;
}
a.user_control:active, a.user_control:visited, a.user_control:link, .user_control {
    color: #777;
    font-size: 13px;
    background-image: url('../images/reg_sprite.gif');
    background-position: left bottom;
    background-repeat: no-repeat;
    text-decoration: none;
    margin: 0px 20px 0px 0px;
    padding: 0px 0px 0px 35px;
    height: 30px;
    display: block;
    float: left;
    line-height: 30px;
}
a.user_control:hover {
    background-position: left top;
    color: #fff;
    text-decoration: none;
}
 

The above is purely an example, specifi to a skin I've done... It uses an image sprite to render the hover state.  Point is, CSS is our friend.  There's no need to go bloating your HTML with unnecessary "panes" so that you can have a login icon...

Jon

Shebang Websites - A product of Mogridge Design
Hey, we're partnered with UntangleMyWeb.com