By techguy10 on

I have a customized drupal site with a layout made from scratch so I'm trying to customize everything as much as possible and I'd like to take the login box and put it up near the top of the page but it will only fit if I can make it so the input fields are on the same line.. its really bulky the way it is now, it takes up like 15 lines. Does anyone know how I go about doing this. Thanks

⋅ Categories: Drupal 5.x

Comments

Alexandre_portugal’s picture

Alexandre_portugal commented

On a theme like garland (a default theme (custom?)) you can go to the block adm and place it on the header. It occupies only one line. Knowing this maybe this could help..

techguy10’s picture

techguy10 commented

Thanks, I don't think it'll work for me though as I need to use a customized block placement, I guess I don't even understand where you can find the code for the login panel to go about editing it. I don't want to dig around in the core files, is there a mod that allows this to be done?

Alexandre_portugal’s picture

Alexandre_portugal commented

There is a post near by that says about a log in module.. I´ve read it somwhere 15m ago..

techguy10’s picture

techguy10 commented

Thanks, its about something else though, he's trying to hide the login box or something like that, I need to edit the source code for the login box

WorldFallz’s picture

WorldFallz commented

did you see this: HowTo: Create a custom user login bar. That's what I used to change the login. You don't want to edit the code for the actual user login block-- its in the user module and that's hacking core-- a big no-no.

amariotti’s picture

amariotti commented

I went through this stage at one point and read through that tutorial. I don't that tutorial applies to any of the current versions of Drupal and it is very hard to follow. I went through and put it on one line through CSS. You have to add a few classes in order to make it work, but once it works it's awesome. There should be a setting in Drupal to make that block either horizontal or vertical. That would be very helpful. If you need help then I should be able to post the CSS tomorrow.

techguy10’s picture

techguy10 commented

So the login panel appears in the css? I looked through and didn't see it but I may have missed it or don't know what I'm looking for, that'd be great if you could post it here, thanks

WorldFallz’s picture

WorldFallz commented

do you use firefox with the firebug plugin? If not you DEFINITELY want to get it... you can inspect / change HTML / CSS instantly... while looking at the page. Its INCREDIBLY useful for styling... it will tell you exactly what line # in what css file is controlling the appearance of any part of a page by simplying clicking on it. You can even test out changes real time without actually changing the files. It's amazing. Once you use it, you'll never style without it.

techguy10’s picture

techguy10 commented

lol yeah I use it sometimes, I didn't even think of that.. thanks

techguy10’s picture

techguy10 commented

Amariotti, I'd appreciate if you could paste the code when you get a chance.. did you make a new .css file like that tutorial said or is it part of the styl.css file?

Thanks

amariotti’s picture

amariotti commented 
/* Horizontal Login Bar for Users */
#user-login-form .form-item { float: left; }
#loginbar .form-item {
	margin-bottom:0;
	margin-top:0;
}
#loginbar .form-item label {
	float: left;
	padding-left: 10px;
	padding-top: 3px;
}
#loginbar .form-submit  {
	margin-left:10px;
}
#loginbar ul  {
	display: none;
}
#loginbar {
	height:30px;
	position: absolute;
	top:0;
	z-index:1000;
	color: #FFF;
	padding:3px;
	float:right;
}
#loginbar h3 {
	display:none;
}
#loginbar #edit-submit.form-submit {
   float: left;
   border: none;
   display: block;
   width: 68px;
   height: 20px;
   background: url(images/bg_search_go.gif) no-repeat;
   font-size:12px;
   color:#7d2b27;
   cursor: pointer;
}
#loginbar .form-required {
   color:#A39262;
   padding-right:2px;
}
#loginbar input {
	border: 0;
	background-color: #D9D2BD;
	margin: 3px;
}
/* End */

You will then have to add a div with the id of loginbar.

	<div id="loginbar">
    	<?php print $header; ?>
    </div>

Each template will be a little different, but as someone said with the Firebug plug-in for Firefox you should be able to whatever you want to it there. It will take some CSS experience to really do what you need.

joachim’s picture

joachim commented

Take a look at the footer of my site. It's the standard login block, put onto one line with CSS.
http://seasideradio.co.uk/

WorldFallz’s picture

WorldFallz commented

Nice site... love the 1-line login at the bottom. I love your simple and snappy galleries too-- did you do that with image/imagcache?

joachim’s picture

joachim commented

Thanks :)
The galleries are made with image module and image_gallery.

omnyx’s picture

omnyx commented

joachim - did you do the horizontal login box using this example or did you do the code yourself?

joachim’s picture

joachim commented

Coded it myself a while ago.

This is from my stylesheet:

/**
 * user login block in footer
 */
#block-user-0 {
  margin: 2em 0 1em;
}
#block-user-0 *
{
  display: inline;
  color: white;
}
#edit-user-login-block {
  display:none; /* rehide hidden form element */
}
#block-user-0 h2 {
  font-size: 92%; /* match .content font size */
}
#block-user-0 .form-item {
  margin-left: 1em;
}
amariotti’s picture

amariotti commented

Yours is much cleaner. Mine had some other crap in it that I just noticed. You gotta love this community!!!!

lecinema44’s picture

lecinema44 commented

Joachim,

Thanks a million you have literally saved me a month of trying to sort it out!

I was just wondering if you know how to change the font size and/or box size for the login bar? Im just trying to make its height all a little smaller!

Any help appreciated and thanks again!