+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Modifying the Login Widget to be Horizontal

Modifying the Login Widget to be Horizontal

8 posts, 0 answered
  1. Brian
    Brian avatar
    6 posts
    Registered:
    16 Nov 2011
    05 Apr 2012
    Link to this post
    Hello,
    We're new to SiteFinity but have been able to do most of what we needed so far.  The one thing I have left to do is "reskin" is the Login widget.  I'm talking about the one that doesn't have the "(backwards compatibility)" notation.

    My goal is to get the login widget to render horizontally instead of stacking the inputs on top of each other.  So far, I've taken the LoginWidget.ascx out of the WidgetTemplates.zip that comes with the SDK and modified it.  I've changed it so that the UserName, Password, and LoginButton are all ListItems in the ordered list with class "sfLoginFieldsWrp".  Code pasted below.

    What I changed was moved the "Remember Me" checkbox outside of the Ordered List because I wanted it below and moved the Login Button into the Order List as a List Item.

    Then I changed the CSS definitions so the List Items were set to "display: inline;".  I also set the input boxes to be small so that the length isn't forcing them to go vertical.

    I've verified my CSS is getting applied via Firebug and I know my custom login widget code is running because I put some random text in it and it appears.  I have all caching off on the site.

    Another problem is the login widget is rendering the words "Username" and "Password" above their respective input fields as "Labels".  We don't want this, but I don't see a way to get rid of it.

    So, in a nutshell, 2 issues:
    1) Can't get the login inputs to go horizontal
    2) Can't get the words "Username" and "Password" to stop rendering.

    Any help is appreciated.  Thanks.
    -BEP

    SiteFinity 5.0, IIS 7, Windows Server 2008  

    <asp:Panel ID="loginWidgetPanel" runat="server">
        <ol class="sfLoginFieldsWrp">
            <sfFields:TextField ID="UserName" AccessKey="u" runat="server" DisplayMode="Write" WrapperTag="li">
                <ValidatorDefinition Required="true"
                            MessageCssClass="sfError"
                            RequiredViolationMessage="<%$ Resources:Labels, UsernameCannotBeEmpty %>"/> 
            </sfFields:TextField>
            <sfFields:TextField ID="Password" IsPasswordMode="true" AccessKey="p" runat="server" DisplayMode="Write" WrapperTag="li">
                <ValidatorDefinition Required="true"
                            MessageCssClass="sfError"
                            RequiredViolationMessage="<%$ Resources:Labels, PasswordCannotBeEmpty %>"/> 
            </sfFields:TextField>
            <li>
                <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>
                    <asp:LinkButton ID="lostPasswordBtn" runat="server" Text="<%$ Resources:Labels, ForgotYourPassword %>" CssClass="sfLostPassword" />
                </div>
            </li>
        </ol>
        <div>
            <div class="sfCheckBoxWrapper">
                <asp:CheckBox runat="server" ID="rememberMeCheckbox" Checked="true" />
                <asp:Label ID="Label1" runat="server" AssociatedControlID="rememberMeCheckbox" Text="<%$ Resources:Labels, RememberMe %>" />
            </div>
            <div>
                <asp:LinkButton ID="LinkButton1" runat="server" Text="<%$ Resources:Labels, ForgotYourPassword %>" CssClass="sfLostPassword" />
            </div>
        </div>
        <sitefinity:SitefinityLabel ID="ErrorMessageLabel" WrapperTagName="div" runat="server" CssClass="sfError" />
    </asp:Panel>



  2. Veronica
    Veronica avatar
    125 posts
    Registered:
    30 Jan 2015
    06 Apr 2012
    Link to this post
    Hi,

    Thank you for the detailed information as well as the screenshots provided.

    Regarding the issue with the "Username" and "Password" labels - please note that you are using the Sitefinity TextField controls. They render a wrapping li tag and the labels are just part of the rendering of these controls. If you don't need these labels - you need to replace the TextFields with standard ASP.NET TextBox controls.

    As for making the login inputs to go horizontal - you can use the fact that in the rendering you see an ol with two li-s. Put style attribute with "float:left" like below to both of the TextFields in order to make the li-s go horizontal:
    <sfFields:TextField ID="UserName" AccessKey="u" runat="server" DisplayMode="Write"
                    WrapperTag="li" style="float: left; padding: 2px 0px;">
                    <validatordefinition required="true" messagecssclass="sfError" requiredviolationmessage="<%$ Resources:Labels, UsernameCannotBeEmpty %>" />
                </sfFields:TextField>
                <sfFields:TextField ID="Password" IsPasswordMode="true" AccessKey="p" runat="server"
                    DisplayMode="Write" WrapperTag="li" style="float: left; padding: 2px 0px;">
                    <validatordefinition required="true" messagecssclass="sfError" requiredviolationmessage="<%$ Resources:Labels, PasswordCannotBeEmpty %>" />
                </sfFields:TextField>

    Please let me know if you need further help or if you have more questions.

    Kind regards,
    Veronica Milcheva
    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
  3. Brian
    Brian avatar
    6 posts
    Registered:
    16 Nov 2011
    10 Apr 2012
    Link to this post
    Veronica,
    Thanks for your detailed answer.  The CSS change you mentioned worked great for aligning the ListItems horizontally.

    Replacing the Sitefinity TextField controls with ASP:TextBox controls doesn't quite work for me.  I'm using my version of LoginWidget.ascx as a Layout Template so when I remove the Sitefinity TextField controls, I get an error because the site is looking for the controls I deleted.

    A required control was not found in the template for "~/Widgets/LoginWidget.ascx". The control must be assignable from type "Telerik.Sitefinity.Web.UI.Fields.TextField" and must have ID "UserName".A required control was not found in the template for "~/Widgets/LoginWidget.ascx". The control must be assignable from type "Telerik.Sitefinity.Web.UI.Fields.TextField" and must have ID "UserName".

    How can I change the appearance of the Sitefinity login widget and not use the Sitefinity TextField control without getting errors?

    Thanks again,
    -BEP
  4. Mark
    Mark avatar
    3 posts
    Registered:
    03 May 2012
    24 May 2012
    Link to this post
    We have the exact same problem. The client we are working for has a standard look and feel for a login form which are trying to replicate.

    Brian, did you manage to solve this so that you could use standard ASP.NET textboxes and labels?
  5. Brian
    Brian avatar
    6 posts
    Registered:
    16 Nov 2011
    24 May 2012
    Link to this post
    Mark,
    My requirements changed and the users aren't logging into our site for now.  I created my own login control, but it posts to an system external to the Sitefinity site.

    Eventually, we will have the users logging into the Sitefinity site and I will need to overcome this issue, but for now, I don't have a solution.

    A property on the Sitefinity TextField control that allows the label to be hidden is a nice solution that Telerik could implement.

    Good luck and please post back here if you get a working solution.

    -BEP
  6. Larry Miclette
    Larry Miclette avatar
    10 posts
    Registered:
    19 Nov 2009
    24 May 2012
    Link to this post
    Ran across the same issue with the login control. This is what I used, hope it helps.
    Using CSS:
    ol.sfLoginFieldsWrp
    {
        list-style:none;
    }
    ol.sfLoginFieldsWrp li .sfTxtLbl
    {
        float:left;
    }
    ol.sfLoginFieldsWrp li .sfFieldWrp
    {
        float:left;
    }
  7. Brian
    Brian avatar
    6 posts
    Registered:
    16 Nov 2011
    24 May 2012
    Link to this post
    Thanks, Larry.  We've solved the formatting issue.  It's the issue of replacing the Telerik control with a standard Textbox control to get rid of the extra label that is causing a problem because the Login control is expecting Telerik's control.

    -BEP
  8. David Whritenour
    David Whritenour avatar
    22 posts
    Registered:
    30 Nov 2009
    19 Sep 2012
    Link to this post
    Hi Veronica,

    In your post you state, "If you don't need these labels - you need to replace the TextFields with standard ASP.NET TextBox controls". 

    How is this accomplished?  When I attempt to add ASP.NET textboxes to the custom control (which contains the cusotm template) I receive the following error:

    The control must be assignable from type "Telerik.Sitefinity.Web.UI.Fields.TextField" and must have ID "UserName"

    Thanks,
    David

8 posts, 0 answered