Two Questions - Speed Bar & Menu Titles

Madhatterr · #1 01-10-2009, 12:00 PM

This is my test store where I'm working on a new theme for the future opening of my 4.2 xcart. http://teststore.hortonstores.com/home.php?shopkey=showme

Currently I've got two little things I'm hung up on...

#1 I want my speed bar to go across the center section (you can probably see what I was trying to do) but it's wrapping oddly and some of the links won't change color when hovered over. Any help figuring out what I did wrong there is GREATLY appreciated.

What I did was comment out the speedbar in head.tpl and went into home.tpl (in the customer subfolder of the skin1 folder) and added the speedbar as the first part of the center section.

#2 The titles on my menu boxes, any clue how I can adjust the css to make the words center on my oval graphics?

Thanks for your help and advice!

Madhatterr · #2 01-11-2009, 01:01 PM

ARW VISIONS · #3 01-11-2009, 02:06 PM

to center the titles find this in your skin1.css

.VertMenuTitle

and add

text-align:center;

as for the other could you post your code for home.tpl?

it seem like the tabs that are not changing colors are not links.

Madhatterr · #4 01-12-2009, 07:53 AM

Since .VertMenuTitle doesn't exist in the skin1/main.css (which is the css sheet for the 4.2 version of xcart gold) I'm assuming this is the following string of code it would belong in?

Code:

/*
  side bar container
*/
.menu-dialog {
    border: 0px solid #5f94c0;
  margin-bottom: 15px;
}
.menu-dialog .title-bar {
  width: 100%;
    background: #9ec6de url(images/oval.png) left top;
  border: 0px none;
    border-bottom: #215485 0px solid;
  line-height: 27px;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  color: #ffffff;
  font-weight: bold;
  position: relative;
  text-align: center;
}

Unfortunately adding that makes it look like this:
http://teststore.hortonstores.com/screenshot1.jpg

As for my home.tpl code here it is, I've highlighted my speed bar code for you to find more easily:

Code:

{*
$Id: home.tpl,v 1.100 2008/12/11 08:02:53 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
<?xml version="1.0" encoding="{$default_charset|default:"iso-8859-1"}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{config_load file="$skin_config"}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  {include file="customer/service_head.tpl"}
</head>
<body{if $body_onload ne ''} onload="javascript: {$body_onload}"{/if}{if $container_classes} class="{foreach from=$container_classes item=c}{$c} {/foreach}"{/if}>
<div id="page-container">
    <div id="page-container2">
        <div id="content-container">
            <div id="content-container2">
                <div id="center">
                    <div id="center-main">
<!-- central space -->
<br>
<br>
{if $speed_bar}
    <div class="tabs">
      <ul>

        {foreach from=$speed_bar item=sb}
          <li><a href="{$sb.link|amp}">{$sb.title}</a></li>
        {/foreach}

      </ul>
    </div>
  {/if}
            {include file="customer/noscript.tpl"}

            {include file="customer/bread_crumbs.tpl"}

            {if $gcheckout_enabled && $main ne "cart" && $main ne "checkout" && $main ne "anonymous_checkout" && $main ne "order_message"}
              {include file="modules/Google_Checkout/gcheckout_top_button.tpl"}
            {/if}

            {include file="customer/dialog_message.tpl"}

            {if $page_title}
              <h1 class="page-title">{$page_title|escape}</h1>
            {/if}

            {if $active_modules.Special_Offers}
              {include file="modules/Special_Offers/customer/new_offers_message.tpl"}
            {/if}

            {include file="customer/home_main.tpl"}

<!-- /central space -->

                    </div>
                </div>

                <div id="left-bar">

          {if $categories && ($active_modules.Fancy_Categories || $config.General.root_categories eq "Y" || $subcategories)}
            {include file="customer/categories.tpl" }
          {/if}

          {if $active_modules.Bestsellers}
            {include file="modules/Bestsellers/menu_bestsellers.tpl" }
          {/if}

          {if $active_modules.Manufacturers ne "" and $config.Manufacturers.manufacturers_menu eq "Y"}
            {include file="modules/Manufacturers/menu_manufacturers.tpl" }
          {/if}

          {include file="customer/special.tpl"}

          {if $active_modules.Survey && $menu_surveys}
            {foreach from=$menu_surveys item=menu_survey}
              {include file="modules/Survey/menu_survey.tpl"}
            {/foreach}
          {/if}

          {include file="customer/help/menu.tpl"}

                </div>
                <div id="right-bar">

          {if $active_modules.SnS_connector}
            {include file="modules/SnS_connector/button.tpl"}
          {/if}

          {if $active_modules.Feature_Comparison && $comparison_products ne ''}
            {include file="modules/Feature_Comparison/product_list.tpl" }
          {/if}

          {include file="customer/menu_cart.tpl" }

          {if $login eq "" }
            {include file="customer/auth.tpl" }
          {else}
            {include file="customer/authbox.tpl" }
          {/if}

          {include file="customer/news.tpl" }

          {if $active_modules.XAffiliate && $config.XAffiliate.partner_register eq 'Y'}
            {include file="partner/menu_affiliate.tpl" }
          {/if}

          {if $active_modules.Interneka}
            {include file="modules/Interneka/menu_interneka.tpl" }
          {/if}

          {include file="poweredby.tpl" }

                </div>
            </div>
        </div>

        <div class="clearing">&nbsp;</div>

        <div id="header">
      {include file="customer/head.tpl"}
        </div>

        <div id="footer">

      {if $active_modules.Users_online}
        {include file="modules/Users_online/menu_users_online.tpl"}
      {/if}

      {include file="customer/bottom.tpl"}

        </div>

    {if $active_modules.SnS_connector}
      {include file="modules/SnS_connector/header.tpl"}
    {/if}

    {if $active_modules.Google_Analytics && $config.Google_Analytics.ganalytics_code}
        {include file="modules/Google_Analytics/ga_code.tpl"}
    {/if}

    </div>
</div>
</body>
</html>

Thank you for your help Ashley!

Victor D · #5 01-12-2009, 08:05 AM

Into the main.css:
#1
.tabs a:link, .tabs a:visited, .tabs a:hover, .tabs a:active {padding:5px 0 5px 5px;}

(As there is not enough space to float all the items, so some of them go below)

#2

.menu-dialog .title-bar img.icon{display:none}
.menu-dialog .title-bar {text-align:center}

(You probably removed icons, but they are still consume space in the title when alligning as their holders preserve their width )

Madhatterr · #6 01-12-2009, 08:14 AM

You rock my world Victor, thank you VERY much!

#2 works great but I'm still having some troubles with the tabs... it's a start though!

*big hugs & virtual caffeinated beverages sent your way*

Madhatterr · #7 01-12-2009, 08:21 AM

This is the tabs section of main.css

Code:

/* header tabs */
.tabs {
    position: absolute;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
    height: 25px;
  width: 80%;
  text-align: right;
}
.tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.tabs li {
  float: right;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  background: transparent url("images/tab_r.png") no-repeat right top;
  height: 25px;
}
.tabs a:link,
  .tabs a:visited,
  .tabs a:hover,
  .tabs a:active

{
  display: block;
  background: transparent url("images/tab_l.png") no-repeat left top;
  margin: 0px 5px 0px 0px;
  padding: 5px 10px 5px 15px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #253161;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 25px;
  outline-style: none;
}
.tabs a:hover {
  color: #2863c2;
}

should your suggested code replace the red section (above) or be added in addition too the existing code? I added it in addition to and the links appeared but I did lose the tab appearance... which, if I understand what you're saying correctly, is expected because there just isn't room for it there.

What I can't figure out (cause it seems to me this should be able to work) is why the breadcrumbs can't be pushed down so the speed bar goes across above it.

Am I just failing to understand how this works and it's impossible?

Madhatterr · #8 01-12-2009, 08:26 AM

Okay, I got it to fit now to get the links to work, LOL
Here's how I got it to fit:

Code:

/* header tabs */
.tabs {
    position: absolute;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
    height: 25px;
  width: 80%;
  text-align: right;
}
.tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.tabs li {
  float: right;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  background: transparent url("images/tab_r.png") no-repeat right top;
  height: 25px;
}
.tabs a:link,
  .tabs a:visited,
  .tabs a:hover,
  .tabs a:active

{
  display: block;
  background: transparent url("images/tab_l.png") no-repeat left top;
  margin: 0px 5px 0px 0px;
  padding: 5px 0px 5px 5px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #253161;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 25px;
  outline-style: none;
}
.tabs a:hover {
  color: #2863c2;
}

Thoughts on the failure of the links to function?

Victor D · #9 01-12-2009, 08:52 AM

Yes, you just had to decrease the horizontal paddings values a bit.
for the rules below you should change the value if there is any.

Do not move the breadcrumbs with 'br' tag
just add some margin above it like this:
#location{
margin-top:15px;
}

also your .tabs are have absolute position for speedbar, that's why it messes with breadcrumbs so change from absolute to relative:
.tabs {position:relative;width:100%}

(the width was set to 80% so the tabs were not across the whole center column area )

The third line of your header is empty but is still has a height of 39px. So you should also change height to 0 for links to work properly
#header .line3{
height:0px
}

Madhatterr · #10 01-12-2009, 09:22 AM

Hmmm, I applied the three things you mentioned and the only one that seemed to change anything was the location margin and it gave me the following error:

Quote:

"Error: Smarty error: [in customer/home.tpl line 35]: syntax error: unrecognized tag: margin-top:15px; (Smarty_Compiler.class.php, line 446) in .../teststore/include/lib/smarty/Smarty.class.php on line 1092"

The other two things don't seem to have done anything. I did a cleanup on the template cache to make sure it wasn't just an issue with the template refreshing and showing up correctly. Below is snips of the code to show you how I applied your suggestions.

HOME.TPL

Code:

{*
$Id: home.tpl,v 1.100 2008/12/11 08:02:53 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
<?xml version="1.0" encoding="{$default_charset|default:"iso-8859-1"}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{config_load file="$skin_config"}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  {include file="customer/service_head.tpl"}
</head>
<body{if $body_onload ne ''} onload="javascript: {$body_onload}"{/if}{if $container_classes} class="{foreach from=$container_classes item=c}{$c} {/foreach}"{/if}>
<div id="page-container">
    <div id="page-container2">
        <div id="content-container">
            <div id="content-container2">
                <div id="center">
                    <div id="center-main">
<!-- central space -->

{if $speed_bar}
    <div class="tabs">
      <ul>

        {foreach from=$speed_bar item=sb}
          <li><a href="{$sb.link|amp}">{$sb.title}</a></li>
        {/foreach}

      </ul>
    </div>
  {/if}

#location{
margin-top:15px;
}

            {include file="customer/noscript.tpl"}
            
            {include file="customer/bread_crumbs.tpl"}

MAIN.CSS

Code:

/* header line 3 */
#header .line3 {
  position: relative;
  width: 100%;
    height: 0px;
    text-align: right;
}
.line3 .printable-bar {
    position: absolute;
  top: 6px;
    right: 186px;
    height: 18px;
}
.line3 .printable-bar a:link,
  .line3 .printable-bar a:visited,
  .line3 .printable-bar a:hover,
  .line3 .printable-bar a:active
{
  background: transparent url(images/printer.gif) no-repeat right top;
  padding: 2px 20px 2px 0px;
  color: #818891;
  font-size: 10px;
  line-height: 16px;
}

Code:

/* header tabs */
.tabs {
    position: relative;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
    height: 25px;
  width: 100%;
  text-align: right;
}

.tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.tabs li {
  float: right;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  background: transparent url("images/tab_r.png") no-repeat right top;
  height: 25px;
}
.tabs a:link,
  .tabs a:visited,
  .tabs a:hover,
  .tabs a:active

{
  display: block;
  background: transparent url("images/tab_l.png") no-repeat left top;
  margin: 0px 5px 0px 0px;
  padding: 5px 0px 5px 5px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #253161;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 25px;
  outline-style: none;
}
.tabs a:hover {
  color: #2863c2;
}