Modifying the Login Widget to be Horizontal - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 05-Apr-2012 00:00

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>

<sitefinity:SitefinityLabel ID="ErrorMessageLabel" WrapperTagName="div" runat="server" CssClass="sfError" />

</asp:Panel>

Posted by Community Admin on 06-Apr-2012 00:00

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

Posted by Community Admin on 10-Apr-2012 00:00

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

Posted by Community Admin on 24-May-2012 00:00

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?

Posted by Community Admin on 24-May-2012 00:00

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

Posted by Community Admin on 24-May-2012 00:00

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;

Posted by Community Admin on 24-May-2012 00:00

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

Posted by Community Admin on 19-Sep-2012 00:00

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

This thread is closed