Style Login - Register Links in skin

Rate this topic:

Please Register to post a reply.

Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.

Author

Messages

jncraig
Posts:78

05/18/2007 3:00 PM
Is it possible to style the Login/Logout and Register/Display Name? Is so, how?

John Mitchell
Posts:2767

05/18/2007 3:09 PM
Yes, the trick is getting the Anchor tag. Because of CSS Specicifty the anchors (links) in DNN need to be over-ridden specifically. The class on those objects is called "SkinObject", so to target them when they are a link you would use: .SkinObject a { color:red; } And to get the pseudo-classes you would do it like this: .SkinObject a:hover { color:green; } Note also that the order that you define pseudo classes matters when you are working with anchors.

jncraig
Posts:78

05/19/2007 12:19 PM
Thanks so much, John. It's rare finding someone who's knowledge about a topic seems limitless, and it's even rarer when they seem so willing to share what they know! Thanks! Now, if I wanted the Register/Logout and Display Name to be styled differently, I presume that I'd have to dig into the core code and assign different classes to them. Is that right? (Not that I want to, but ... )

John Mitchell
Posts:2767

05/19/2007 12:42 PM
Thank you. It's nice to be appreciated. Once you are overriding the CSS specifically as described above, you can do it in any "down-level" css file. Your skin.css or your portal.css is usually where you will want to make a change like this.

jncraig
Posts:78

05/19/2007 12:47 PM
Some more ... Using your suggestions, nothing happens ... But ... I find that if, in my skin.css file, I do this: A:link { text-decoration: underline; } A:visited { text-decoration: underline; } Then I get what I want. That seems to be because A:link and A:visited are defined with text-decoration: none in the default.css file. Digging further, I find that I have this in my skin file, portal.ascx: Does this mean that I've assigned different CSS classes to these two controls? So they re BannerLinks class and not SkinObject class?

jncraig
Posts:78

05/19/2007 1:17 PM
Whoops, I seem to have left something out. (Looks like the editor edits out things with less than and greateer than brackets?) dnn:Login runat="server" cssclass="BannerLinks" id="dnnLogin" dnn:User cssclass="BannerLinks" runat="server" id="dnnUser" (these should be enclosed in tab brackets) This is what I actually have in portal.ascx, so I suppose that the dnnLogin and dnnUser controls are styled with BannerLinks class? If I were to change these to LoginLinks and UserLinks classes, then I can define styles for LoginLinks and UserLinks in my skin.css file, right?

John Mitchell
Posts:2767

05/19/2007 1:54 PM
Yes, the A:link is targeting all anchors, if you just want the one for SkinObjects then you would do it the way I described, or if you have other specific CSS classes (like BannerLinks) then you can use those. In order to change a rule (each item in a css selector) you have to override and redefine it specifically, so for the underline on anchors you would have to do as you described. This is because all of them are "Cascaded" (merged) together for each style sheet that is used. And the answer is also yes to your question about changing each cssclass attribute to specifically target each one. I think they are "SkinObject" by default but you can make them anything you want.

jncraig
Posts:78

Please Register to post a reply.

Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.