Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Navbar Module 'Account' dropdown


Recommended Posts

I am making the navbar account dropdown a little prettier only I can not seem to centrally align the icon and the links in the dropdown box as seen in the attached image.

 

The code I have is as follows

 

includes/modules/navbar_modules/templates/account.php

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(MODULE_NAVBAR_ACCOUNT_LOGGED_IN, $customer_first_name) : MODULE_NAVBAR_ACCOUNT_LOGGED_OUT; ?></a>
  <ul class="dropdown-menu">
    <li>
	 <div class="navbar-login">
	   <div class="col-lg-4 login-icon"><p><?php echo MODULE_TEXT_LOGIN_BOX;?></p></div>
        <div class="col-lg-8">
        <p>
        <?php if (tep_session_is_registered('customer_id')) {?>
		<ul>
		 <li><?php echo '<a href="' . tep_href_link('account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT . '</a>'; ?></li>
	     <li><?php echo '<a href="' . tep_href_link('account_history.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_HISTORY . '</a>'; ?></li>
	     <li><?php echo '<a href="' . tep_href_link('address_book.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li>
	     <li><?php echo '<a href="' . tep_href_link('account_password.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_PASSWORD . '</a>'; ?></li>
	    </ul>
		<?php }else{ ?>
		<ul>
		<?php
	      echo '<li><a href="' . tep_href_link('login.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGIN . '</a></li>';
	      echo '<li><a href="' . tep_href_link('create_account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_REGISTER . '</a></li>';
	    ?>
	    </ul>
	    <?php } ?>
	    </p>
	   </div>
	 </div>
   </li>
    <li>
     <div class="navbar-login navbar-login-session">
       <div class="col-lg-10">
        <p>
		 <ul>
	      <?php if (tep_session_is_registered('customer_id')) {
           echo '<li><a class="btn btn-danger btn-sm btn-block" role="button" href="' . tep_href_link('logoff.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGOFF . '</a></li>';
           }?>
        </p>
       </div>
	 </div>
    </li>
  </ul>

user.css

.navbar-login {width: 285px; padding-top: 6px;}
.login-icon{
    width: 50px;
    padding-top: 6px;
}
.login-icon{
  width: 50px;
}

add the following to

includes/languages/english/modules/navbar_modules/nb_account.php

define('MODULE_TEXT_LOGIN_BOX', '<i class="fa fa-user" style="font-size:87px;color:#c9c9c9;"></i>');

Thanks

 

Mark

post-256780-0-91819300-1477073586_thumb.png

Link to comment
Share on other sites

ok I have got the full screen display looking how I want it. The problem I have now is with the smaller view ports, screenshots attached.

 

Any help would be appreciated.

 

includes/modules/navbar_modules/templates/account.php

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(MODULE_NAVBAR_ACCOUNT_LOGGED_IN, $customer_first_name) : MODULE_NAVBAR_ACCOUNT_LOGGED_OUT; ?></a>
  <ul class="dropdown-menu">
    <li>
	 <div class="navbar-login">
	   <div class="col-lg-3 login-icon"><?php echo MODULE_TEXT_LOGIN_BOX;?></div>
        <div class="col-lg-9">
        <p>
        <?php if (tep_session_is_registered('customer_id')) {?>
		<ul>
		 <li><?php echo '<a href="' . tep_href_link('account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT . '</a>'; ?></li>
	     <li><?php echo '<a href="' . tep_href_link('account_history.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_HISTORY . '</a>'; ?></li>
	     <li><?php echo '<a href="' . tep_href_link('address_book.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li>
	     <li><?php echo '<a href="' . tep_href_link('account_password.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_PASSWORD . '</a>'; ?></li>
	    </ul>
		<?php }else{ ?>
		<ul>
		<?php
		echo '<li class="login-button"><a class="btn btn-success btn-sm btn-block" role="button" href="' . tep_href_link('login.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGIN . '</a></li>';
		echo '<li class="login-button"><a class="btn btn-primary btn-sm btn-block" role="button" href="' . tep_href_link('create_account.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_REGISTER . '</a></li>';
	    ?>
	    </ul>
	    <?php } ?>
	    </p>
	   </div>
	 </div>
   </li>
    <li>
     <div class="navbar-login navbar-login-session">
       <div class="col-lg-10">
        <p>
		 <ul>
	      <?php if (tep_session_is_registered('customer_id')) {
           echo '<li><a class="btn btn-danger btn-sm btn-block" role="button" href="' . tep_href_link('logoff.php', '', 'SSL') . '">' . MODULE_NAVBAR_ACCOUNT_LOGOFF . '</a></li>';
           }?>
        </p>
       </div>
	 </div>
    </li>
  </ul>

user.css

.navbar-login {width: 285px; padding-top: 6px;}
ul.login-icon {padding-left: 0px;}
li.login-icon {width: 50px;}
li.login-button {padding: 4px;}

includes/languages/english/modules/navbar_modules/nb_account.php

  define('MODULE_NAVBAR_ACCOUNT_TITLE', 'Account');
  define('MODULE_NAVBAR_ACCOUNT_DESCRIPTION', 'Show Customer Account Actions in Navbar.');

  define('MODULE_NAVBAR_ACCOUNT_LOGGED_OUT', '<i class="fa fa-user-circle-o"></i><span class="hidden-sm"> My Profile</span> <span class="caret"></span>');
  define('MODULE_NAVBAR_ACCOUNT_LOGGED_IN', '<i class="fa fa-user-circle-o"></i> %s <span class="caret"></span>');
  define('MODULE_NAVBAR_ACCOUNT_LOGIN', '<i class="fa fa-sign-in"></i> Sign In');
  define('MODULE_NAVBAR_ACCOUNT_LOGOFF', '<i class="fa fa-sign-out"></i> Sign Out');
  define('MODULE_NAVBAR_ACCOUNT', '<i class="fa fa-user-circle-o"></i> My Profile');
  define('MODULE_NAVBAR_ACCOUNT_HISTORY', '<i class="fa fa-file-text-o"></i> My Orders');
  define('MODULE_NAVBAR_ACCOUNT_EDIT', 'My Details');
  define('MODULE_NAVBAR_ACCOUNT_ADDRESS_BOOK', '<i class="fa fa-address-book-o"></i> My Address Book');
  define('MODULE_NAVBAR_ACCOUNT_PASSWORD', '<i class="fa fa-key"></i> My Password');
  define('MODULE_NAVBAR_ACCOUNT_REGISTER', '<i class="fa fa-user-plus"></i> Create Profile');

  define('MODULE_TEXT_LOGIN_BOX', '<i class="fa fa-user-circle-o" style="padding: 7px;font-size:87px;color:#c9c9c9;"></i>');

post-256780-0-14509500-1477757990_thumb.png

post-256780-0-20273100-1477757991_thumb.png

post-256780-0-49129500-1477757991_thumb.png

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...