Design help with the log-in menu

jhande · December 21, 2009

I have searched everywhere and tried different things and have not found what I would like to do.

Hopefully someone here might come up with a solution or advice?

Here's my code in my header.php file:

<td width="350" align="right"><div class="loginNav">  <?php echo tep_customer_greeting(); ?>    <?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   <?php } ?></div></td>

Here is my matching CSS style:

DIV.loginNav {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

color: #000000;

font-weight: normal;

padding: 3px;

border: 2px #D1B507 solid;

margin: 5px;

background-color:#FFFF99;

position: absolute;

top: 0;

right: 0;

}

Here is my results of using the CSS textbox:

Before logging in:

After logging in:

Instead of using a Textbox I would like to use a background image but I can't figure out how to make it so it's dynamic and widens once logged in.

This is what I'd like to accomplish:

Before log-in:

After logging in:

The only way around this that I can think of, is to seperate the menu code so a DIV tag can be applied to NOT LOGGED IN and a different tag for LOGGED IN. But that ia also past my abilities.

Any help would be greatly appreciated.

a.forever · December 21, 2009

Well, I don't know the coding for the images you displayed, so I don't know how the coding would be adjusted for what you want to accomplish. I see border styles (are the borders images as well?) and what may look like a grey-white image you could use for its background. Have you tried using background-image and background-repeat for what you're trying to accomplish? It seems possible if the width of the image is 1px repeated across x.

Also you might want to try adding a SPAN tag before <a href="<?php echo tep_href_link(FILENAME_LOGOFF (don't forget a second closing SPAN tag). It should cascade over the loginNav class. If it doesn't, it should also be possible to use !important to force it to accept new CSS settings.

Also typing all this from the top of my head; normally, I'd play test around with it myself to make sure it works. But knowing CSS, this is should be possible.

npn2531 · December 21, 2009

I have searched everywhere and tried different things and have not found what I would like to do.

Hopefully someone here might come up with a solution or advice?

Here's my code in my header.php file:
<td width="350" align="right"><div class="loginNav">  <?php echo tep_customer_greeting(); ?>    <?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   <?php } ?></div></td>
Here is my matching CSS style:

DIV.loginNav {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

color: #000000;

font-weight: normal;

padding: 3px;

border: 2px #D1B507 solid;

margin: 5px;

background-color:#FFFF99;

position: absolute;

top: 0;

right: 0;

}

Here is my results of using the CSS textbox:

Before logging in:

After logging in:

Instead of using a Textbox I would like to use a background image but I can't figure out how to make it so it's dynamic and widens once logged in.

This is what I'd like to accomplish:

Before log-in:

After logging in:

The only way around this that I can think of, is to seperate the menu code so a DIV tag can be applied to NOT LOGGED IN and a different tag for LOGGED IN. But that ia also past my abilities.

Any help would be greatly appreciated.

npn2531 · December 21, 2009

The answer is here:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

If you go to my website http://www.niora.com you'll see that the buttons are dynamically resized for the text. This 'sliding doors' technique' would work just fine for the navigation. Basically you would put your stuff, everything between your <td> and </td> tags between two <div> tags and a couple of <span> tags like so ->, <td><div class "buttons"><span>' all your links and stuff' </span></div></td>

In the example, they are adding a class, "buttons" to a <a href> tag, but you are going to use a <div> tag instead. You can still use the class "buttons".

You'll upload two images, basically a single image cut in two pieces, cut so it can 'slide' over it's self and look right. The example on the link above is very clear. You'll simply cut and paste the CSS from there, and you'll probably be able to use the example images they offer. No java script, it's all CSS.

matrix2223 · December 21, 2009

Check this site out as well theres lot of code to sort out here css java and so on

http://www.dynamicdrive.com

jhande · December 21, 2009

Thanks for the replies guys.

I have gone nuts trying different CSS, DIV, SPAN, etc... forms of styling and they all usually broke something.

The log-in menu code is pretty stock osC. I think the problem lies where with the code on the PHP page does not seperate between logged in or not.

I'll try playing around with the sliding door CSS buttons and see if I can come up with something.

I've been doing a little more thinking (I know, dangerous) and poking around.

I'm wondering if it's possible to add two different background images to this code (includes\functions\general.php):

// Return a customer greeting

function tep_customer_greeting() {

global $customer_id, $customer_first_name;

if (tep_session_is_registered('customer_first_name') && tep_session_is_registered('customer_id')) {

$greeting_string = sprintf(TEXT_GREETING_PERSONAL, tep_output_string_protected($customer_first_name), tep_href_link(FILENAME_PRODUCTS_NEW));

} else {

$greeting_string = sprintf(TEXT_GREETING_GUEST, tep_href_link(FILENAME_LOGIN, '', 'SSL'), tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'));

}

return $greeting_string;

}

Here's my Site Search Box utilizing my background image:

Here's the actual background image:

npn2531 · December 21, 2009

Thanks for the replies guys.

I have gone nuts trying different CSS, DIV, SPAN, etc... forms of styling and they all usually broke something.

The log-in menu code is pretty stock osC. I think the problem lies where with the code on the PHP page does not seperate between logged in or not.

I'll try playing around with the sliding door CSS buttons and see if I can come up with something.

I've been doing a little more thinking (I know, dangerous) and poking around.

I'm wondering if it's possible to add two different background images to this code (includes\functions\general.php):

// Return a customer greeting

function tep_customer_greeting() {

global $customer_id, $customer_first_name;

if (tep_session_is_registered('customer_first_name') && tep_session_is_registered('customer_id')) {

$greeting_string = sprintf(TEXT_GREETING_PERSONAL, tep_output_string_protected($customer_first_name), tep_href_link(FILENAME_PRODUCTS_NEW));

} else {

$greeting_string = sprintf(TEXT_GREETING_GUEST, tep_href_link(FILENAME_LOGIN, '', 'SSL'), tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'));

}

return $greeting_string;

}

Here's my Site Search Box utilizing my background image:

Here's the actual background image:

npn2531 · December 21, 2009

You're thinking too hard, and it can be dangerous, LOL. You can do this with CSS, or at most some javascript that can be cut and pasted from the many sites that offer free javascripts like matrix2223 posted.

jhande · December 22, 2009

I've been trying and trying all to no avail.

I can either get the correct background for the Log-In box which stays the same (to small) after logging in or I can get the correct background for the "logged in" box or a combination of the two that displays constantly.

I have tried all kinds of edited background images - full size, cut into pieces, etc...

I have tried inserting all kinds of class styles in different parts of the script.

I still think the problem is do to the fact on the headers.php page the script does not seperate the "greeting" from the log-in box (actually no sign of it) and the greeting is seperate from the log-in & logged-in box.

Here's my hacked up script on the headers.php page:

Here's some of my stylesheet entries I've been playing with:

.LoginWrapper {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

color: #000000;

font-weight: normal;

float: right;

margin-right: 15px;

margin-top: 10px;

/* background: url(images/LoginBox_small.gif) no-repeat right top;

height: 25px;

width: 175px; */

}

.greeting {

background: url(images/Login_Left_BKG.gif) no-repeat left top;

height: 25px;

width: 60px;

margin-right: 15px;

margin-top: 10px;

}

.loginField {

/* display:block; */

float: right;

/* padding-right: 7px;

padding-top: 6px; */

margin-right: 8px;

margin-top: -7px;

}

.loggedinField {

background: url(images/Login_Right_BKG.gif) no-repeat right top;

height: 25px;

width: 350px;

float: right;

margin-right: 15px;

margin-top: 10px;

/* padding-right: 7px;

padding-top: 6px; */

}

Here's a sample of different images I've tried:

I've searched for different alternatives, yes I'm familar with DynamicDrive.com, but nothing seems to fit the bill. Again I think it's do to not using a typical link menu structure. But hey, after all these years I'm still learning.

I just can't get a grip on how to make this work.

a.forever · December 22, 2009

<span class="loggedinField"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>">

<?php echo HEADER_TITLE_CHECKOUT; ?></a>   <?php } ?></span></div>

Why is the SPAN tag outside the call for logged in? It should be inside. Then it should be interpreted as: if user is logged in, invoke the following styles. Right now it's probably interpreted as: the styles exists here and then check if user is logged in.

<?php if (tep_session_is_registered('customer_id')) { ?><span class="loggedinField"><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>">

<?php echo HEADER_TITLE_CHECKOUT; ?></a></span>   <?php } ?></div>

background: url(images/Login_Right_BKG.gif) no-repeat right top !important;

It'd be nice to see this in action. If you've already tried this, I'd like to see its output too so that I could make suggesstions accordingly. I do think you're overthinking this as well.

npn2531 · December 22, 2009

I've been trying and trying all to no avail.

I can either get the correct background for the Log-In box which stays the same (to small) after logging in or I can get the correct background for the "logged in" box or a combination of the two that displays constantly.

I have tried all kinds of edited background images - full size, cut into pieces, etc...

I have tried inserting all kinds of class styles in different parts of the script.

I still think the problem is do to the fact on the headers.php page the script does not seperate the "greeting" from the log-in box (actually no sign of it) and the greeting is seperate from the log-in & logged-in box.

Here's my hacked up script on the headers.php page:

<div class="loginWrapper"> <span class="greeting"><?php echo tep_customer_greeting(); ?> </span><span class="loggedinField"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> | <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a> <?php } ?></span></div>

Here's some of my stylesheet entries I've been playing with:

.LoginWrapper {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

color: #000000;

font-weight: normal;

float: right;

margin-right: 15px;

margin-top: 10px;

/* background: url(images/LoginBox_small.gif) no-repeat right top;

height: 25px;

width: 175px; */

}

.greeting {

background: url(images/Login_Left_BKG.gif) no-repeat left top;

height: 25px;

width: 60px;

margin-right: 15px;

margin-top: 10px;

}

.loginField {

/* display:block; */

float: right;

/* padding-right: 7px;

padding-top: 6px; */

margin-right: 8px;

margin-top: -7px;

}

.loggedinField {

background: url(images/Login_Right_BKG.gif) no-repeat right top;

height: 25px;

width: 350px;

float: right;

margin-right: 15px;

margin-top: 10px;

/* padding-right: 7px;

padding-top: 6px; */

}

Here's a sample of different images I've tried:

I've searched for different alternatives, yes I'm familar with DynamicDrive.com, but nothing seems to fit the bill. Again I think it's do to not using a typical link menu structure. But hey, after all these years I'm still learning.

I just can't get a grip on how to make this work.

npn2531 · December 22, 2009

Try this.

.clear { /* generic container (i.e. div) for floating buttons */
   overflow: hidden;
   width: 100%;
}

.loginwrapper {
   background: transparent url('bg_button_a.gif') no-repeat scroll top right;
   color: #444;
   display: block;
   float: left;
   font: normal 12px arial, sans-serif;
   height: 24px;
   margin-right: 6px;
   padding-right: 18px; /* sliding doors padding */
   text-decoration: none;
}

.loginwrapper span {
   background: transparent url('bg_button_span.gif') no-repeat;
   display: block;
   line-height: 14px;
   padding: 5px 0 5px 18px;
}

.loginwrapper:active {
   background-position: bottom right;
   color: #000;
   outline: none; /* hide dotted outline in Firefox */
}

.loginwrapper:active span {
   background-position: bottom left;
   padding: 6px 0 4px 18px; /* push text down 1px */
}


<div class="loginwrapper" ><span><?php echo tep_customer_greeting(); ?>   <?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   <?php } ?></span></div>

ps - change transparent url('bg_button_a.gif') and transparent url('bg_button_span.gif') to your image urls. Make sure your equivalent of bg_button_span is wider than the entire set of links.

jhande · December 23, 2009

Thanks George

I'll give it a try tonight once the wife & kids go to bed and I can concentrate.

By the way, thanks for helping me out, I really appreciate it.

npn2531 · December 23, 2009

Thanks George

I'll give it a try tonight once the wife & kids go to bed and I can concentrate.

By the way, thanks for helping me out, I really appreciate it.

That's about how I do it, I'm a human being during the day when I'm forced to and then I work all night.

jhande · December 23, 2009

That's about how I do it, I'm a human being during the day when I'm forced to and then I work all night.

LOL

jhande · December 23, 2009

Hey George,

(hope you're still with me on this)

Made the changes last night and have been trying all day to straighten it out, but no luck.

Here's what I ended up with after your suggestion:

Before log-in

After log-in

Any ideas?

PS: It also seems to have aligned left in the table sell instead of right.

a.forever · December 24, 2009

Have you tried:

And replacing it with something like:

<td width="350" align="right"><?php if (tep_session_is_registered('customer_id')) { ?>

<?php } else { ?>

<div class="loginWrapper>"> <span class="greeting"><?php echo tep_customer_greeting(); ?> </span></div>

<?php }?></td>

jhande · December 24, 2009

Thanks for the reply and help Kevin.

But I end up with the same results as above.

npn2531 · December 25, 2009

Thanks for the reply and help Kevin.

But I end up with the same results as above.

You might be close to doing it. It looks like to me the basic mechanism is working but there isn't enough 'room' and stuff is wrapping around to new lines. I'll be out of touch for the holidays, but focus on margins and widths. Is there a minimum width thing for CSS? Check with www.w3schools.com. Also, the surrounding tables and td can play havoc with margins and widths of CSS in div tags. See if for experiments sake, if you can isolate the links, the whole thing, on there own line and not within a table or a cell (td).

npn2531 · December 25, 2009

Thanks for the reply and help Kevin.

But I end up with the same results as above.

PS -Actually I think Kevin has a great solution. I'm sure his php would work. But I would change the links within the the if and else to:


<td width="350" align="right"><?php if (tep_session_is_registered('customer_id')) { ?>

<div class="class with one image">  <span class="greeting"><?php echo tep_customer_greeting(); ?>   </span><span class="loggedinField"><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   <?php } ?></span></div>

<?php } else { ?> 

<div class="class with a different image">
all the links and stuff you see when you aren't signed in

<?php }?></td>

Also with Kevin's if else statement you don't need to use div and span tags, you could use the tr and td tags that OSCommerce uses in those links.

jhande · December 25, 2009

Thank you very much Kevin and George for staying with me trying to help.

Wish you both and your's a very Merry Christmas and a Happy Holiday.

I will give your suggestions a try and work on it after family time (kids buggin already 7:30am).

jhande · December 30, 2009

Sorry guys, I don't mean to drive you nuts with me.

Still having problems.

Before I totally give up I figured one more shot at asking for help or ideas.

And replacing it with something like:

<td width="350" align="right"><?php if (tep_session_is_registered('customer_id')) { ?>

<div class="loginWrapper"> <span class="greeting"><?php echo tep_customer_greeting(); ?> </span><span class="loggedinField"><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> | <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a> <?php } ?></span></div>

<?php } else { ?>

<div class="loginWrapper>"> <span class="greeting"><?php echo tep_customer_greeting(); ?> </span></div>

<?php }?></td>

That little } breaks the site and returns - Parse error: syntax error, unexpected '}' in C:\xampp\htdocs\hobbies\includes\header.php on line 80

I tried editing that bit of code and it just kept moving the error to the next line, next line, etc...

To bad I know just enough PHP to get myself into trouble.

<td width="350" align="right"><?php if (tep_session_is_registered('customer_id')) { ?>

<div class="class with one image"> <span class="greeting"><?php echo tep_customer_greeting(); ?> </span><span class="loggedinField"><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> | <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a> <?php } ?></span></div>

<?php } else { ?>

<div class="class with a different image">

all the links and stuff you see when you aren't signed in

<?php }?></td>

That's the problem George.

When you are not signed in it combines the greeting message with the links automatically from the includes\functions\general.php file.

} else {

$greeting_string = sprintf(TEXT_GREETING_GUEST, tep_href_link(FILENAME_LOGIN, '', 'SSL'), tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'), 'class="login"');

}

So you get = [Welcome Guest! Log In or Create an Account]

Once you are signed in it has two seperate entities.

[Welcome James!] [Log Off | My Account | Checkout]

If there was some way to either seperate the not signed in entities or combine them once you are logged in so both match, it would be a super simple fix. I tried moving the links from the header.php to the general.php but they didn't even show or work.

Totally lost in the white freezing goo on the mountain.

npn2531 · December 30, 2009

I went back and looked at what a new install has in regards to the sign on navigation. Here is the virgin programming from a new install:


<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="headerNavigation">
   <td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>
   <td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   </td>
 </tr>
</table>

Here is the modification. All I have done is change the 'if' statement above to a 'if else' below, as Kevin suggested, included the common navigation links in both the if and else clauses, AND shifted down the <td > so it is in the if and else statement. Then I created a two new classes headerNavigation1 and 2 each with hideous but different backgrounds, and removed the masking tr class. You can see it here on my test site, http://adult-acne-product.com/catalog . Create an account and watch it change from green to blue. You would use an image rather than a bgcolor

<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr >
   <td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>

   		<?php if (tep_session_is_registered('customer_id')) { 
   				?>
   				<td align="right" class="headerNavigation1" >
   				<a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation">
   				<?php echo HEADER_TITLE_LOGOFF; ?></a>  |  
   				<a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  
   				<a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  
   				<a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   
   			<?php 
   			} else { ?>
   			<td align="right" class="headerNavigation2" >
   			<a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  
   				<a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  
   				<a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   

   			<?php
   			}
   			?>
   </td>
 </tr>
</table>

a.forever · December 30, 2009

[Welcome Guest! Log In or Create an Account]

Once you are signed in it has two seperate entities.

[Welcome James!] [Log Off | My Account | Checkout]

If your background image was made so that it'd fit two lines instead of one, it could also make things easier.

[Welcome Guest!]

[Log In or Create an Account]

[Welcome James!]

[Log Off | My Account | Checkout]

So then you can use one image whose height is two lines and whose width is equal to or slightly greater than this text (in whatever size font you fixed): [Log Off | My Account | Checkout]. Then you can delcare your background images and in theory it should always look the same. I'm also placing the assumption that the text is either right-aligned or centered (left-aligned if you choose to put it on the left side of your store).

npn2531 · December 30, 2009

If your background image was made so that it'd fit two lines instead of one, it could also make things easier.

[Welcome Guest!]

[Log In or Create an Account]

[Welcome James!]

[Log Off | My Account | Checkout]

So then you can use one image whose height is two lines and whose width is equal to or slightly greater than this text (in whatever size font you fixed): [Log Off | My Account | Checkout]. Then you can delcare your background images and in theory it should always look the same. I'm also placing the assumption that the text is either right-aligned or centered (left-aligned if you choose to put it on the left side of your store).

Here is the guest message added in, with a <br/> for Forever's two line suggestion.



<?php if (tep_session_is_registered('customer_id')) { 
                               ?>
                               <td align="right" class="headerNavigation1" >
                               <a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation">
                               <?php echo tep_customer_greeting(); ?><br/>
                               <?php echo HEADER_TITLE_LOGOFF; ?></a>  |  
                               <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  
                               <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  
                               <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   
                       <?php 
                       } else { ?>
                       <td align="right" class="headerNavigation2" >
                        <?php echo tep_customer_greeting(); ?><br/>
                       <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  
                               <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  
                               <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   

                       <?php
                       }
                       ?>

Design help with the log-in menu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived