X-Cart forums

[Tim CDN]

Hi all

I have been working on a solution, and have compiled some code that is working well.

Here you go!

Add this to the bottom of skin1/main.css

.xrounded h1, .zrounded h1 {
margin:0; 
font-size:1.0em; /* Change menu header font size */
padding:0 8px 3px 8px; 
border-bottom:1px solid #464141;
}
.xrounded p, .zrounded p {
margin:0; 
padding:5px 0; 
font-size:10px;
line-height:125%;
}
.xrounded {
background: transparent; 
width:100%;   /* Adjust the width here */
float:left; 
margin:0 0 15px 0;
line-height:125%;
}
.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #464141;
border-right:1px solid #464141;
}
.xb1 {
margin:0 5px; 
background:#464141;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}
.xboxcontent {
display:block;
border:0 solid #464141; 
border-width:0 1px; 
height:auto;
background:#f8f8f9;
}
.xboxcontent ul {
  list-style: none;   /* This removes the bullets and indent from the ul style */
  padding: 10px 0px 0px 0px;
  margin: 0px;
}
.xboxcontent ul a{
  text-decoration: none;
}
div.xboxcontent div{
padding: 0px 4px 0 8px;
}
.xboxcontentmain {
display:block; 
border:0 solid #464141; 
border-width:0 1px; 
height:auto;
background:#fff;
}
div.xboxcontentmain div{
padding: 10px;
}
* html .xboxcontent {
height:1px;
}
.color_a {
background: #464141; /* Change menu header colour and text colour */
color:#fff;
}
.color_a a{
color:#fff; /* This changes the colour of the Help menu link and removes the underline */
text-decoration: none;
}

Change the code in skin1/menu_dialog.tpl to this:

<div class="xrounded{if $additional_class} {$additional_class}{/if}">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb4 color_a"></b>
</b>
<div class="xboxcontent {if $additional_class} {$additional_class}{/if}">
<h1 class="color_a">{if $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1>
<div class="menu-list content{if $additional_class} {$additional_class}{/if}">{$content}<br /></div>
</div>
<b class="xbottom">
<b class="xb4 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb2 color_a"></b>
<b class="xb1"></b></b>
</div>

Change the code in skin1/dialog.tpl to this:

<div class="xrounded{if $additional_class} {$additional_class}{/if}">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb4 color_a"></b>
</b>
<div class="xboxcontentmain {if $additional_class} {$additional_class}{/if}">
<h1 class="color_a">{if $link_href}<a href="{$link_href}">{/if}{$title|escape}{if $link_href}</a>{/if}</h1>
<div class="xboxcontentmain {if $additional_class} {$additional_class}{/if}">{$content}<br /></div>
</div>
<b class="xbottom">
<b class="xb4 color_a"></b>
<b class="xb3 color_a"></b>
<b class="xb2 color_a"></b>
<b class="xb1"></b></b>
</div>

[Tim CDN]

This is a work in progress, I have found one problem.

The login menu is not displaying properly.

Any ideas guys?

http://www.breathalyzercanada.com/skin1/images/banners/user.png

[cflsystems]

Probably a float element in the menu that is not cleared

[Tim CDN]

Originally Posted by cflsystems

Probably a float element in the menu that is not cleared

That's what I was thinking. Do you think it would be in the menu_dialog.tpl or in the User Menu .tpl file?

Do you now which .tpl file set that menu?

[cflsystems]

The menu is in menu_dilaog.tpl but I don't think the problem is there. It is in the template showing the login/register buttons

[Tim CDN]

I have narrowed it down to these lines of code, any ideas?

The error occurs with the placement of the buttons within the <div>.

{if $main ne "login_incorrect" and $main ne "antibot_error" and $main ne "disabled" or $config.Security.use_secure_login_page eq "Y"}
{capture name=menu}

  <form action="{$auth_form_url}/include/login.php" method="post" name="authform" class="item">
    <input type="hidden" name="{$XCARTSESSNAME}" value="{$XCARTSESSID}" />

    {if $config.Security.use_secure_login_page eq "Y"}

      <div class="login-buttons">
        {include file="customer/buttons/secure_login.tpl"}
        {include file="customer/buttons/create_profile_menu.tpl" additional_button_class="menu-button"}
      </div>

    

    {/if}

    <div class="button-row recovery">
      <a href="help.php?section=Password_Recovery">{$lng.lbl_recover_password}</a>
    </div>

  </form>

{/capture}
{include file="customer/menu_dialog.tpl" title=$lng.lbl_authentication content=$smarty.capture.menu additional_class="menu-auth"}
{/if}

[cflsystems]

You have to look at the style classes - can't tell you like this

[Tim CDN]

I believe the problem lies with the box not auto changing in height to accommodate the buttons.

How do we change it so the box sees the buttons as objects and changes height to fit them?

[Tim CDN]

I have it working in IE & Safari but NOT in FF with this code.

http://www.breathalyzercanada.com/skin1/images/banners/user3.png

Any ideas?

{if $main ne "login_incorrect" and $main ne "antibot_error" and $main ne "disabled" or $config.Security.use_secure_login_page eq "Y"}
{capture name=menu}
  <form action="{$auth_form_url}/include/login.php" method="post" name="authform" class="item">
    <input type="hidden" name="{$XCARTSESSNAME}" value="{$XCARTSESSID}" />
      <div class="login-buttons">
      {include file="customer/buttons/secure_login.tpl"}
      {include file="customer/buttons/create_profile_menu.tpl" additional_button_class="menu-button"}
      </div>
      <div>
      <a href="help.php?section=Password_Recovery">{$lng.lbl_recover_password}</a>
      </div>
  </form>
{/capture}
{include file="customer/menu_dialog.tpl" title=$lng.lbl_authentication content=$smarty.capture.menu additional_class="menu-auth"}
{/if}

[AusNetIT]

HI,

Can you PM the site link

Thanks