Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

Tip: Fixing the login form on the GSoC branch


Go to End


4 Posts   2450 Views

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

10 July 2007 at 2:47pm

Edited: 10/07/2007 2:48pm

Sigurd asked me to post this to let everyone using the gsoc branch know how to easily fix the styling of the Login Form.

Markus clearly explained how in this commit to the gsoc branch of sapphire:

------------------------------------------------------------------------
r36791 | mlanthaler | 2007-06-13 11:16:44 -0500 (Wed, 13 Jun 2007) | 25 lines

Login forms are now styled and use the tabstrip library.

Make sure you create a CSS file "tabs.css" in your mysite/css folder with the following content, otherwise the tabs will be without border. Maybe it would be a good idea to create a mysite gsoc branch for changes like this. Will post that issue in the forum.

div.tab {
	clear: left;
	overflow: auto;
	border: 1px #AAA solid;
	border-top: none;
	position: relative;
	top: -3px;
	margin: 0;
	padding: 10px;
	/*width: 98%;*/
}

div.tabset {
	border: 1px solid #fff; /* Hack for FF1.5/Win Float-Bug */
	clear: left;
	margin: 0;
}

ul.tabstrip li {
	margin-left: 0;
}

------------------------------------------------------------------------

Cheers,

Elijah

Avatar
Markus

Google Summer of Code Hacker, 152 Posts

10 July 2007 at 8:11pm

Edited: 10/07/2007 8:13pm

Actually I posted that already here in the forum..

You should also style the OpenID box. Here is the code for the two CSS files:

------------- mysite/css/tabs.css -------------
[html]
div.tab {
clear: left;
overflow: auto;
border: 1px #AAA solid;
border-top: none;
position: relative;
top: -3px;
margin: 0;
padding: 10px;
}

div.tabset {
border: 1px solid #fff; /* Hack for FF1.5/Win Float-Bug */
clear: left;
margin: 0;
}

ul.tabstrip li {
margin-left: 0;
}
[/html]

-------------- mysite/css/openid_login.css -------------
[html]
#OpenIDLoginForm_LoginForm_OpenIDURL {
background: url(http://openid.net/login-bg.gif) no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
width: 284px;
}
[/html]

Should I move those styles move to some other file so that it is under version control? If so, where?

Avatar
Willr

Forum Moderator, 5523 Posts

12 July 2007 at 7:06pm

I have added that code to the BC css for future use. We are hoping to release an update for the BC template in a couple days and so it will have support for the tabs and a couple other fixs.

Avatar
Markus

Google Summer of Code Hacker, 152 Posts

12 July 2007 at 8:32pm

That's great :-)