By Tanis.7x on

In my primary menu, I have 6 links. Two of them are the "Profile" and "Logout" buttons. I would like to align these two links to the right of the navigation bar at the top of my page, and the other four to the left.

How would I do this?

⋅ Categories: Drupal 6.x

Comments

rmyoung’s picture

rmyoung commented

If I understand you correctly you need to create a new menu containing the profile and logout buttons so you have 2 seperate menus you can display in the navigation bar (primary menu and the new menu).

You can then add both menus to the navigation bar by adding the new menu to the navigation bar as a block or calling it in your page.tpl.php After that you can use css to position the menus. It really depends on your theme, what theme are you using?

Tanis.7x’s picture

Tanis.7x commented

I'm using Pixture Reloaded.

The profile/logout buttons are in a menu called "logged in menu".

The menu code in the page.tpl file-

        <?php if ((!empty($primary_links)) || (!empty($superfish))): ?>
          <!-- Primary || Superfish -->
          <div id="<?php print $primary_links ? 'primary' : 'superfish' ; ?>">
            <div id="<?php print $primary_links ? 'primary' : 'superfish' ; ?>-inner">
              <?php if (!empty($primary_links)) {
                      print theme('links', $primary_links);
                    }
                    elseif (!empty($superfish)) {
                      print $superfish;
                    }
              ?>
            </div> <!-- / inner -->
          </div> <!-- /primary || superfish -->

So how would I add the logged in menu?
Also, how would I change the "Profile" link to display the user's name instead?

rmyoung’s picture

rmyoung commented

Do you currently have any blocks in your header-blocks region?

If not you can move that region into the primary links menu area of the page (the header div or inside the primary links div) by editing your page.tpl.php file. Move the section:

 <div id="header-blocks" class="region region-header">
        <?php print $header; ?>
      </div>

which is currently just below your header.

You should now have code in your page.tpl.php file like:


        <?php if ((!empty($primary_links)) || (!empty($superfish))): ?>
          <!-- Primary || Superfish -->
          <div id="<?php print $primary_links ? 'primary' : 'superfish' ; ?>">
            <div id="<?php print $primary_links ? 'primary' : 'superfish' ; ?>-inner">
              <?php if (!empty($primary_links)) {
                      print theme('links', $primary_links);
                    }
                    elseif (!empty($superfish)) {
                      print $superfish;
                    }
              ?>
            </div> <!-- / inner -->
          </div> <!-- /primary || superfish -->
          <div id="header-blocks" class="region region-header">
        <?php print $header; ?>
      </div> <!-- /#header-blocks -->
        <?php endif; ?>

    </div> <!--/#header -->

Next, enable the menu block for the 'logged in' menu in that header-blocks region.
Now you will just have to sort out the css.

Tanis.7x’s picture

Tanis.7x commented

No matter how much I fool around with the CSS, the links always appear below the header, in the left sidebar area. I essentially just copied all of the primary links CSS, and changed "#primary" to "#header-blocks," and deleted all existing headerblocks css.

rmyoung’s picture

rmyoung commented

Add the following to your layout.css:

#header-blocks{
	position: absolute;
	right: 7.5%;
	top: 88px;
	z-index: 1;
}

That will position the block on the right of the menu bar.

Tanis.7x’s picture

Tanis.7x commented

The links didn't move at all.

rmyoung’s picture

rmyoung commented

Do you having caching turned off in admin/settings/performance and have you refreshed the page?

It's working fine for me.

Tanis.7x’s picture

Tanis.7x commented

Ahh, caching was my problem.

It now appears in the right spot, but it is just a bulleted list (and the links are stacked vertically, not horizontally).

rmyoung’s picture

rmyoung commented

I take it your links are in an unordered list. Give the list an id and then in your style.css add some styling for the list.

eg. 

<ul id="example">
<li>link1</li>
<li>link2</li>
</ul>

Then your css would be 

#example ul li {
	display: inline;
	list-style: none;
	}

You will need to add a bit of padding at the top and change the text colour to whatever you want.

Tanis.7x’s picture

Tanis.7x commented

Well, my links are currently in a menu, not in a file where I can access them and change what style of list they are.

However, when I created a new block, and put in a list with an id of example, and added the example CSS to style.css, nothing changed.

rmyoung’s picture

rmyoung commented

Sorry I had forgotten we made a menu. Forget making the list as above you need to add the following to your style.css:

#header-blocks ul.menu li {
	display: inline;
	list-style: none;
	}

#header-blocks ul.menu li a {
  font-weight: bold;
  color: #FFF;
  padding: 8px 12px 9px;
}
#header-blocks ul.menu li a:hover {
  background: #000;
  text-decoration: underline;
}

and make a change to your layout.css to position it properly. Change the top positioning so that it reads:

#header-blocks{
	position: absolute;
	right: 7.5%;
	top: 94px;
	z-index: 1;
	}

Lastly, in the block configuration put <none> for the title for your menu block.

Don't forget to make sure your caching is off and refresh your page.

Tanis.7x’s picture

Tanis.7x commented

Still didn't change anything.

You can view my style and layout sheets by going to
http://www.team2052.com/style.txt
http://www.team2052.com/layout.txt

rmyoung’s picture

rmyoung commented

There's nothing wrong with your stylesheets. It must be something wrong with the menu block, what exactly are you seeing? It works perfectly OK on my local test install and I am using your style sheets on it.

What are your block settings for the menu?

Tanis.7x’s picture

Tanis.7x commented

I am seeing

  • Profile
  • Log Out

Block title is <none>
Shows for admins only (while it isn't working)
Shows on every page

Beyond that, it's just a regular menu placed into the header blocks area.

rmyoung’s picture

rmyoung commented

Which browser and operating system are you using? Any chance you could enable it so I can have a look at it for you, or provide me with a login?

Tanis.7x’s picture

Tanis.7x commented

I am using Firefox 3.

You can login at http://www.team2052.com/ with username "Temp", password "test."

rmyoung’s picture

rmyoung commented

When you set a custom color it takes the style sheet and creates a new one at /sites/default/files/color/pixture_reloaded.....

Each time you visit the color selection page (admin/build/themes/settings/pixture_reloaded) and save it it rewrites the style.css from the one you have been editing. I was able to change it by just saving the configuration again.

You need to adjust the 'top' positioning a little for your theme as it's different to the default ( I think you need 95px). Change it at sites/all/themes/pixture_reloaded/style.css and then visit the configuration page and save your settings to reload. Once you have it fixed up you can go back to your performance page and turn back on compression. (I had to turn it off). Don't forget to delete that account you created for me so no-one has access to your admin.

Tanis.7x’s picture

Tanis.7x commented

Thanks for your help, it works beautifully now!