Amer wrote
Hi Jon, This post is informative, but it did not help me. It only tells me how to change the icon. I need to know how to change the font and color of these fields. Thanks.
Amer.
Perhaps if you had taken the time to study the post that not only shows you how to change the icon (which at some point might be a question you would ask), but also gives you - quite literally - the answer in a free CSS example. I must apologise if I'm coming off a little rude, but this is a place of learning and sharing and I was hoping you could learn from what I had shared...
So here we go again...
Here's some HTML:
<dnn:LOGIN runat="server" id="dnnLOGIN" cssclass="login_control" />
<dnn:USER runat="server" id="dnnUSER" cssclass="user_control" />
These two bits tell each of the controls to assign that specific class to the control / skin object. The Login must pull its CSS rulesets from the CSS class: ".login_control" from the skin.css file. The User must in turn pull its CSS rulesets from the CSS class: ".user_control" also found in the skin.css file. This method is used in the .ASCX skinning method.
Next, you'll need to write the CSS for the rulesets into your skin.css file, like so:
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;
}
And, would you look at that, highlighted are the selectors "color" and "font-size", which might just answer your question.
Or you could do as Patrick* advises and just edit the ".NormalTextBox" class (which is absolutely correct as well), but which would assume that:
- you're using a skin that uses that class for that skin object
- and that you're happy you'll be changing every other bit of text that has that class assigned to it
FYI - No, you don't need to include all the other fancy floats and background images and padding if you don't want to...
Either way, you're going to have to know a little bit of HTML and CSS - fundamental to websites in general. CSS is our friend.
*No offence at all Patrick - love your guys' work.