i was wondering what would be involved to move login to upper right like on the aboutpeople theme: http://drupal.org/project/aboutpeople

this would give back some serious screen real estate for this theme in either column...

same for search - wondering if it could go in nav bar on far right as a fixed object instead of having to use a block column placement

any idea what this would entail?

Comments

jacine’s picture

Status: Active » Postponed
jacine’s picture

It would entail a line of PHP and some CSS.

In page.tpl.php, you would print the search box (make sure it's enabled in theme settings, and users have access to it). Then, you'd have to style it with CSS.

print $search_box;

I'll see if this makes sense for the next round of features.

zilla’s picture

thanks - and would this be the same for login (like search), to toss in upper right?

edcazini’s picture

Hi, here's my implementation of a one-liner login bar. I copied this somewhere from the tutorials and modified for my own use. With proper modification, this could be applied to most themes. The resulting login bar is floated right within the header background and (with proper margin-top adjustment) just above the primary navigation area.

code to add to template.php (I placed them at the bottom end of the file)

/**
 * User Login block customization
 * implementation options:
 *   - code in page.tpl.php - with code <?php print user_bar(); ?>
 *   - custom block - create block with code <?php print user_bar(); ?>
 * styling: separate user_bar.css
 */
function user_bar() {
  global $user;
  $output = '';

  if (!$user->uid) {
    $output .= theme('item_list', array(
      t('<span class="user-info">Welcome, !user</span>', array('!user' => theme('username', $user))),
      l(t('Login'), 'user/login', array('title' => t('User login'))),
      t(' | '),
      l(t('Register'), 'user/register', array('title' => t('Register a new account')))));
  }
  else {
    $output .= theme('item_list', array(
      t('<span class="user-info">Welcome, !user</span>', array('!user' => theme('username', $user),'title' => t('Edit your account'))),
      t(' | '),
      l(t('Sign Out'), 'logout', array('title' => t('Logout')))));
  }

  $output = $output;
  return $output;
}

code to add to header block (in this case I placed them just before the navigation div)

<div id="user-bar">
  <?php print user_bar(); ?>
</div> <!-- /user_bar -->

lastly my css (placed at the end of appearance.css, modify to your needs)

/**
 * user_bar styling
 */

/**
 * this adds some space in top and bottom,
 * so anything inside can look vertically centered
 */
#user-bar {
  margin-top: 110px;
  font-weight: bold;
  float: right;
}

/**
 * by default, fields labels tries to reserve a whole line for itself, this
 * cancels that and and sends it to the left.
 * it also adds some space on the right and left of the label to look easy on
 * the eye.
 */
#user-bar label {
  float: left;
  margin-left: 10px;
  margin-right: 2px;
}

/**
 * inputs too, they try to reserve a whole line for itself, this
 * cancels that and sends it to the left
 */
#user-bar input {
  float: left;
  width: 6em;
}

/**
 * I don't like the required * (asterisks), so I hide them.
 */
#user-bar span.form-required {
  display: none;
}

/**
 * the form submit button, it's so tight so we expand it a bit,
 * and give it some free space around.
 */
#user-bar input.form-submit {
  margin-top: -1px;
  margin-left: 5px;
  padding: 0 .2em;
  width: 4em;
}

/**
 * now this is for the links list, lists by default tries to reserve a whole line
 * also they add space surrounding them. we cancel all that and send the list
 * to the right
 */
#user-bar div.item-list ul {
  float: right;
  margin: 0 5px 0 0;
  padding: 0;
}

/**
 * remember, styling above was for the whole list, now for each item,
 * we all know each item in the list by default exists on a separate line,
 * also has that bullet on the left. we cancel all that. and makes all items
 * sit beside each other
 */
#user-bar div.item-list ul li {
  float: left;
  background: none;
  margin: 0 0px;
  padding: 0 5px;
/*  border: 1px solid #b8d3e5; */
  list-style: none none;
}

#user-bar a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

#user-bar a:hover {
  color: #ff0000;
}

#user-bar label {
  color: #dcdcdc;
}

/**
 * this is the "Welcome ... message".
 * by default <p> tries to exist on a separate line, we cancel that.
 * also by default <p> has some surrounding space, we cancel that too,
 * and give it only space on the left.
 */
#user-bar p.user-info {
  float: left;
  padding: 0 0 0 20px;
  margin: 0 0 0 10px;
  text-align: right;
}

Hope this helps.

prosiktuno’s picture

can you show how it's look?
2 everybody:
did somebody try it?

edcazini’s picture

StatusFileSize
new148.03 KB
new146.64 KB

::screenshots attached::

prosiktuno’s picture

thank you EdCazini!
I make this on my site. And it looks great.
But how I can translate words - welcome, login, register, log out?
I have many languages on my site and I want that people from many country understanding what is mean.
I use i18n module. drupal 6.10
Thanks.

edcazini’s picture

hi, glad you found it helpful.
and i'm sorry, haven't much touched on il8n yet, but i thought you just install il8n, configure correctly, make sure language translations for the words are in place, then bang ... your site is multi-language.

prosiktuno’s picture

Everything is working! Thanks!
One of possible decision for i18n support:
instead of your code for template.php, I put next:

function user_bar() {
  global $user;
  $output = '';

  if (!$user->uid) {
    $output .= theme('item_list', array(
      t('<span class="user-info">Welcome, !user</span>', array('!user' => theme('username', $user))),
      l(t('<b>Log in</b>'), 'user/login', array('title' => t('User login'))),
      t(' | '),
      l(t('Create new account'), 'user/register', array('title' => t('Register a new account')))));
  }
  else {
    $output .= theme('item_list', array(
      t('<span class="user-info">Welcome, !user</span>', array('!user' => theme('username', $user),'title' => t('Edit your account'))),
      t(' | '),
      l(t('Log out'), 'logout', array('title' => t('Logout')))));
  }

  $output = $output;
  return $output;
}

All words are translate automatically now, except "Welcome". This can be find and translate here - /admin/build/translate/search

BTW I have found same decision - http://drupal.org/node/92657

jacine’s picture

Status: Postponed » Closed (fixed)

Sorry, not adding this. Anyone needing this can hopefully refer here to an example of how to do it. Thanks for providing the code :)

drcheers’s picture

StatusFileSize
new129.8 KB

FIXED IT!!!
I mistaked you and ended up with this (attatched).
This is what it should look like in the header in \sky\templates\overrides\page.tpl.php.

    <div<?php print $header_attributes; ?>>
      <div id="header-inner">
        <?php if ($logo): ?>
        <a href="<?php print $base_path; ?>" title="<?php print $site_name; ?>" id="logo"><img src="<?php print $logo; ?>" alt="<?php if ($site_name): print $site_name;  endif; ?>" /></a>
        <?php endif; ?>
        <?php if ($site_name): ?>
        <span id="site-name"> <a href="<?php print $base_path; ?>" title="<?php print $site_name; ?>"><?php print $site_name; ?></a> </span>
        <?php endif; ?>
        <?php if ($site_slogan): ?>
          <span id="site-slogan"><?php print $site_slogan; ?></span>
        <?php endif; ?>
      </div>
<div id="user-bar">
  <?php print user_bar(); ?>
</div> <!-- /user_bar -->
    </div>
edcazini’s picture

StatusFileSize
new260.57 KB

Hi, with 6.x-3.1 I placed <div id="user-bar" ... /> in between the navigation & container divs. I controlled vertical placement using margin-top. Please see attached.

My only issue right now with this new version is that my right sidebar has gone down to the bottom of the content. Will try to troubleshoot before creating an issue.

doriangray’s picture

Thank you! I made the same mistake.

guitarma’s picture

I have followed the instructions - THANK YOU SO MUCH!! - but my login bar is hiding BEHIND my header image. How do I get it on top of the image? Step-by-step is most helpful, thank you!

guitarma’s picture

Well, somewhere along the way I fixed it! I think when I took out the header background color, and just left the header image link there, it bumped it to reside on top of the header image. Love this community!