Styling the login widget - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Styling the login widget

  • Styling the login widget
  • Hey

    I have a few question regarding the standard login widget. I have css styled the login widget, but still have a few issues to conquer.

    How do i attach a headline to the widget. If the user go to the forgot password link, the widget transforms into a "Forgot password" panel, displaying a "Label" headline. I have tried to attach a similar line to the "Login" panel, and created a new Label, but can't seem to get i to work?

    How do I resize the RemerberMeChekbox?

    Can I disable the default Login text on the submit button, using only my own login button, and can i use different buttons for the Login/Forgor password panels as well??

    Hope some can find a few minutes to answer my questions.

    Kind regards Christian

  • Hello Christian,

    You can map the template of the login widget. Here's the markup, that should be placed in an ascx file:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
    <sfFields:FormManager id="formManager" runat="server" />
    <fieldset id="sfLoginWidgetWrp">
        <asp:Panel ID="loginWidgetPanel" runat="server">
            <ol class="sfLoginFieldsWrp">
                <sfFields:TextField ID="UserName" AccessKey="u" runat="server" DisplayMode="Write" WrapperTag="li">
                    <ValidatorDefinition Required="true"
                                RequiredViolationMessage="<%$ Resources:Labels, UsernameCannotBeEmpty %>"/> 
                <sfFields:TextField ID="Password" IsPasswordMode="true" AccessKey="p" runat="server" DisplayMode="Write" WrapperTag="li">
                    <ValidatorDefinition Required="true"
                                RequiredViolationMessage="<%$ Resources:Labels, PasswordCannotBeEmpty %>"/> 
                <li class="sfCheckBoxWrapper">
                    <asp:CheckBox runat="server" ID="rememberMeCheckbox" Checked="true" />
                    <asp:Label runat="server" AssociatedControlID="rememberMeCheckbox" Text="<%$ Resources:Labels, RememberMe %>" />
            <div class="sfSubmitBtnWrp">
                <asp:LinkButton ID="LoginButton" CssClass="sfSubmitBtn" ValidationGroup="LoginBox" OnClientClick="return false;" runat="server">
                    <asp:Literal ID="LoginButtonLiteral" runat="server"></asp:Literal>
                <asp:LinkButton ID="lostPasswordBtn" runat="server" Text="<%$ Resources:Labels, ForgotYourPassword %>" CssClass="sfLostPassword" />
                <asp:LinkButton ID="RegisterUserBtn" runat="server" CssClass="sfLostPassword">
                    <asp:Literal ID="RegisterUserText" runat="server" />
            <sitefinity:SitefinityLabel ID="ErrorMessageLabel" WrapperTagName="div" runat="server" CssClass="sfError" />
        <asp:Panel ID="lostPasswordPanel" runat="server" Visible="false" CssClass="sfLoginFieldsWrp sfLostPasswordWrp">
            <h2 class="sfLoginFieldsTitle"><asp:Literal ID="literal1" runat="server" Text="<%$ Resources:Labels, ForgotYourPassword %>" /></h2>
            <p class="sfLoginFieldsNote"><asp:Literal ID="literal2" runat="server" Text="<%$ Resources:Labels, ToResetYourPasswordEnterYourEmail %>" /></p>
                <asp:Label ID="literal3" runat="server" Text="<%$ Resources:Labels, EmailAddress %>" AssociatedControlID="mailTextBox" CssClass="sfTxtLbl" />
                <asp:TextBox ID="mailTextBox" runat="server" ValidationGroup="loginWidget" CssClass="sfTxt" />
                    id="mailRequiredFieldValidator" runat="server" Display="Dynamic"
                    <div class="sfError"><asp:Literal runat="server" ID="lTheMailFieldIsRequired" Text="<%$Resources:Labels, Required%>" /></div>               
                <sitefinity:SitefinityLabel ID="lostPasswordError" WrapperTagName="div" runat="server" CssClass="sfError" />
            <div class="sfSubmitBtnWrp">
                <asp:Button ID="sendRecoveryMailBtn" runat="server" Text="<%$ Resources:Labels, Submit %>" ValidationGroup="loginWidget" CssClass="sfSubmitBtn" />
        <asp:Panel ID="passwordResetSentPanel" runat="server" Visible="false">
            <asp:Literal ID="literal4" runat="server" Text="<%$ Resources:Labels, PasswordResetInstructionsHaveBeenSentToYourEmail %>" />
    Notice the lostPasswordPanel, which is displayed when the user clicks on Forgot your password label. You can add the label you want to this panel. Then to map the template go to Administration -> Settings-> Advanced -> Controls -> ViewMap and create a new ViewMap instance with HostType:

    The layout TemplatePath should point to the ascx file.

    On the second question about resizing the checkbox, please chck this article with tips on resizing checkboxes in html with css:

    To remove thebutton text you can set color: transparent to the anchor with class .sfSubmitBtn and also set background-image:url('') to the url of the image you would like to place instead. You will also need to remove teh default background color and border color of the button:
    .sfSubmitBtnWrp a.sfSubmitBtn:link, .sfSubmitBtn a.sfSubmitBtn:visited, .sfSubmitBtn a.sfSubmitBtn:hover, .sfSubmitBtn a.sfSubmitBtn:active
    background-color: #D4D0C8;
    border: 2px outset #D4D0C8;
    They can be set to none and this way overriden. To change the Forgot your password link, you need to follow the same approach.

    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items