By piotrdesign on

Hey guys Im working on having a horizontal login bar. So far everything is fine, all items are in 1 line but the following links:

* Register
* Forgot password?

I only mannaged them to get next to each other but I cant get them to be up with the 1st line. Can someone help me mod the user.module?

switch ($delta) {
      case 0:
        // For usability's sake, avoid showing two login forms on one page.
        if (!$user->uid && !(arg(0) == 'user' && !is_numeric(arg(1)))) {
          // Unset the time, if any. This prevents a 404 if a user relogs in
          // on the page they were sent to when they logged out. See
          // user_login_submit() for explanation of the time parameter.
          unset($_GET['time']);
          $form['#action'] = url($_GET['q'], drupal_get_destination());
          $form['#id'] = 'user-login-form';
          $form['name'] = array('#type' => 'textfield',
            '#title' => t('Username'),
            '#maxlength' => 60,
            '#size' => 15,
            '#required' => TRUE,
          );
          $form['pass'] = array('#type' => 'password',
            '#title' => t('Password'),
            '#size' => 15,
            '#required' => TRUE,
          );
          $form['submit'] = array('#type' => 'submit',
            '#value' => t('Log in'),
          );

          if (variable_get('user_register', 1)) {
            $items[] = l(t('Create new account'), 'user/register', array('title' => t('Create a new user account.')));
          }
          $items[] = l(t('Request new password'), 'user/password', array('title' => t('Request new password via e-mail.')));
          $form['links'] = array('#value' => theme('item_list', $items));

          $block['subject'] = t('');
          $block['content'] = drupal_get_form('user_login_block', $form, 'user_login');
        }
        return $block;
⋅ Categories: Drupal 4.7.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

maybe, havent tried it but try it anyway, bang this in your style sheet and see what happens, assumming your using block-user-0 login block id...

#block-user-0 {float:left;width:350px;height:30px;}
#block-user-0 .form-item {width:200px;float:left;}
#block-user-0 .item-list {width:150px;float:right;}

just a thought, can't see why that wont work with some mucking about with paddings, margins etc.

.item list li should be set to display inline also, thats the way to get a list to display out on one line.

#block-user-0 .item-list ul li {display:inline;}
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
piotrdesign’s picture

piotrdesign commented

THat didnt work but i changed it a bit and its almost good except the 2nd line with the Regiser and forgot pass shows up after the submit button but underneath. So we gotta fix that.

i used that code

#block-user-0 {float:left;}
#block-user-0 .form-item {float:left;}
#block-user-0 .item-list {float:right;}
#block-user-0 .item-list ul li {display:inline;}
Jeff Burnz’s picture

Jeff Burnz commented

you url would help, understand that without actually seeing your code in the site it's virtually impossible to trouble shoot css... as I have no idea what is going on around it, or what else you have defined in your css.

maybe just set them all to float right or left and make a clear none call as well.

understand that they are all block level elements.

if you have Firefox (which you should!) get the developer tool bar and 'see' your block level elements with the outline tool - then you will clearly see where you are going wrong.

anyone of us could do this but without an URL it's impossible.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
piotrdesign’s picture

piotrdesign commented

Here is the display

http://www.piotrpix.info/loginpanel.png

here is my code:

<div>  <div class="block block-user" id="block-user-0">
    <h2 class="title"></h2>

    <div class="content"><form action="/yourwebpix/?q=node&amp;destination=node" method="post" id="user-login-form">
<div><div class="form-item">
 <label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
 <input maxlength="60" name="edit[name]" id="edit-name" size="15" value="" class="form-text required" type="text">
</div>
<div class="form-item">
 <label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
 <input maxlength="" name="edit[pass]" id="edit-pass" size="15" class="form-text required" type="password">

</div>
<input name="op" value="Log in" class="form-submit" type="submit">
<div class="item-list"><ul><li><a href="/yourwebpix/?q=user/register" title="Create a new user account.">Register</a></li><li><a href="/yourwebpix/?q=user/password" title="Request new password via e-mail.">Forgot password?</a></li></ul></div><input name="edit[form_id]" id="edit-user-login-block" value="user_login_block" type="hidden">

</div></form>
</div>
 </div>
</div>
                  </div>
Jeff Burnz’s picture

Jeff Burnz commented

heres the css, like i said in the first post - margins and paddings etc, this puts everything on one line. Your mistake was probably not zeroing the margins on the UL notice I set them to 4px, that overides your broswers default.

First some css...

<style type="text/css">
<!--
#block-user-0 h2 {font-size:1em;float:left;margin:4px;padding:0;}
#block-user-0 .content {float:left;font-size:0.9em;margin-left:10px;}
#block-user-0 .form-item, #block-user-0 .form-submit {float:left;padding:0 5px;}
#block-user-0 .item-list ul {float:left;margin:4px;padding:0;}
#block-user-0 .item-list ul li {display:inline;}
-->
</style>

heres a more styled version...

#block-user-0 {float:left;margin-left:10px;color: #9966FF;}
#block-user-0 h2 {font-size:1.1em;float:left;margin:2px;padding:0;font-style:italic;}
#block-user-0 .content {text-transform:lowercase;}
#block-user-0 .form-item, #block-user-0 .form-submit {float:left;padding:0 5px;}
#block-user-0 .item-list ul {float:left;margin:4px;padding:0;}
#block-user-0 .item-list ul li {display:inline;}
#block-user-0 .item-list ul li a:link {color: #9966FF;font-size:0.9em;}
#block-user-0 input {background: #F1E3FF;}
#block-user-0 .form-required {color:#CC99FF;}

And for clarity's sake heres the html from the login block.

<div class="block block-user" id="block-user-0">
<h2 class="title">User login</h2>
<div class="content"><form action="/node?destination="  method="post" id="user-login-form">
<div><div class="form-item">
<label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="60" name="edit[name]" id="edit-name"  size="15" value="" class="form-text required" />
</div>
<div class="form-item">
<label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
<input type="password" maxlength="" name="edit[pass]" id="edit-pass"  size="15"  class="form-text required" />
</div>
<input type="submit" name="op" value="Log in"  class="form-submit" />
<div class="item-list"><ul><li><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li></ul></div><input type="hidden" name="edit[form_id]" id="edit-user-login-block" value="user_login_block"  />
</div></form>
</div>
</div>
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Jeff Burnz’s picture

Jeff Burnz commented

replying to my own post here, i just noticed I forgot to put in the display: inline stuff for the floated boxes...

you should use the display: inline work around to avoid the IE double margin float bug - http://www.positioniseverything.net/explorer/doubled-margin.html

Good luck!

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
piotrdesign’s picture

piotrdesign commented

So I did this and the info still appeared on the 2nd line but this time the information was right bellow the submit button with a little bit to the right.

I used this code

#block-user-0 h2 {font-size:1em; float:left; margin:4px; padding:0; display:inline;}
#block-user-0 .content {float:left; font-size:0.9em; margin-left:10px; display:inline;}
#block-user-0 .form-item, #block-user-0 .form-submit {float:left; padding:0 5px; display:inline; }
#block-user-0 .item-list ul {float:left; margin:4px; padding:0; display:inline;}
#block-user-0 .item-list ul li {display:inline;}
kweisblatt’s picture

kweisblatt commented

very cool info, thanks! I wanted this for myself.

~~~~~~~~~~~~~~~~
Kris
Current project: www.cribfax.com

piotrdesign’s picture

piotrdesign commented

Ahhh it fitted in when i chaged the padding of 5 to 0

#block-user-0 .form-item, #block-user-0 .form-submit {float:left; padding:0 0px; display:inline; }

Thanks Alot!

Jeff Burnz’s picture

Jeff Burnz commented

your welcome, good luck with your new site:)

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
piotrdesign’s picture

piotrdesign commented

What line do I edit, so i have some padding at the bottom of my nav panel?

Z2222’s picture

Z2222 commented

There is a tutorial on how to do that here:
http://www.nicklewis.org/node/845

gopisathya’s picture

gopisathya commented

see the Action at http://www.ohmybaby.in

Logic:
------
1) Tell your theme to look for new template for login block
2)Create a new login block template file and render the form elements inside that

Step 1 :

Create a file called “user-login-block.tpl.php” in the following directory
“/themes /yourtheme/” .
Step 2:

Put the following code in that file.

      <table width=100%" border="0">
         <tr>
           <td valign="top" width="12%">
             <?php
                print drupal_render($form['name']); 
                // prints the username field
             ?>
           </td>
         <td width="12%">
             <?php
              print drupal_render($form['pass']); // print the password field
             ?>
         </td>
         <td width="12%">
            <?php
               print drupal_render($form['submit']); // print the submit button
            ?>
         </td>
         <td>
            <?php
               print drupal_render($form); //print remaining form elements like "create new account"
            ?>
         </td>
        </tr>
    </table>

You can create your own

tags and place the forms elements there, if you are specific about
tags.

Step 3:

In your template.php add the following function

function zen_classic_theme(&$existing, $type, $theme, $path)
{
return array(
'user_login_block' => array (
'template' => 'user-login-block',
'arguments' => array('form' => NULL)
)
);

}
This is for Zen classic theme . You can change it Like , “ garland_theme ” .
(i.e) “yourtheme name_theme”.

for garland users

function garland_theme()
{
return array(
'user_login_block' => array (
'template' => 'user-login-block',
'arguments' => array('form' => NULL)
)
);

}

WorldFallz’s picture

WorldFallz commented

There's now a module: http://drupal.org/project/userloginbar