X-Cart forums - Align Categories Top Left

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Align Categories Top Left (https://forum.x-cart.com/showthread.php?t=54580)

Align Categories Top Left

Used the rounded categories mod, but cant get the subcategories to the upper left.

http://tinyurl.com/2avy2os

/customer/menu_dialog.tpl

Code:

{if $usertype eq "A" || ($usertype eq "P" && $active_modules.Simple_Mode ne "")}

<div class="menu-dialog{if $additional_class} {$additional_class}{/if}">

  <div class="title-bar valign-middle{if $link_href} link-title{/if}">

    {strip}

      {if $link_href}

        <span class="title-link">

          <a href="{$link_href}" class="title-link"><img src="{$ImagesDir}/spacer.gif" alt=""  /></a>

        </span>

      {/if}

      <img class="icon ajax-minicart-icon" src="{$ImagesDir}/spacer.gif" alt="" />

      <h2>{$title}</h2>

    {/strip}

  </div>

  <div class="content">

    {$content}

  </div>

</div>

{else}

<div class="menu_top"><h3>{$title}</h3></div>

<div class="menu_bottom"><p>{$content}</p></div>

{/if}

/corners/styles.css

Code:

body { font-family: arial; font-size: 76%; background: #eee; margin: 20px; padding: 0; }

#container { width: 99%; margin: 0 auto; }

/*--------- MENUS ----------*/

.menu_top { width: 100%; background: #0090FF; color: #fff; }

.menu_top .sb-inner { background: #0090FF; }

.menu_top .sb-border { background: #000; }

.menu_top h3 { margin: 0; padding: 2px; font-size: 1.1em; }

.menu_bottom { width: 100%; background: #fff; color: #333; margin-bottom: 10px; }

.menu_bottom .sb-inner { background: #fff; }

.menu_bottom .sb-border { background: #000; }

.menu_bottom p { margin: 0; padding: 2px; }

/*--------- DIALOGS ----------*/

.dialog_top { width: 100%; background: #FF6600; color: #fff; }

.dialog_top .sb-inner { background: #FF6600; }

.dialog_top .sb-border { background: #000; }

.dialog_top h2 { margin: 0; padding: 7px; font-size: 1.3em; }

.dialog_bottom { width: 100%; background: #fff; color: #000; margin-bottom: 10px; }

.dialog_bottom .sb-inner { background: #fff; }

.dialog_bottom .sb-border { background: #000; }

.dialog_bottom p { margin: 0; padding: 7px; }

/*--------- ROUNDED BOXES ----------*/

.rounded_box_filled { width: 100%; background: #eee; color: #000; font-size: 1.0em; margin-bottom: 10px; }

.rounded_box_filled .sb-inner { background: #ccc; }

.rounded_box_filled .sb-border { background: #000; }

.rounded_box_filled p { margin: 0; padding: 7px; }

.rounded_box_blank { width: 100%; background: #fff; color: #000; font-size: 1.0em; margin-bottom: 10px; }

.rounded_box_blank .sb-inner { background: #fff; }

.rounded_box_blank .sb-border { background: #000; }

.rounded_box_blank p { margin: 0; padding: 7px; }

How far off am I? I'm guessing way out there somewhere. lol

Re: Align Categories Top Left

I still can't find what's controlling this. I found every thing else in the category boxes but can't figure out how to move the links.

If someone could help me figure this out, I'd really appreciate it. I'm stuck.

skin1/corners/styles.css

Code:

body { font-family: arial; font-size: 76%; background: #eee; margin: 20px; padding: 0; }

#container { width: 99%; margin: 0 auto; }

/*--------- MENUS ----------*/

.menu_top { width: 100%; background: #9CBEBD; color: #fff; }

.menu_top .sb-inner { background: #9CBEBD; }

.menu_top .sb-border { background: #000; }

.menu_top h3 { margin: 0; padding: 2px; font-size: 1.1em; }

.menu_bottom { width: 100%; background: #fff; color: #333; margin-bottom: 10px; }

.menu_bottom .sb-inner { background: #fff; }

.menu_bottom .sb-border { background: #000; }

.menu_bottom p { margin: 0; padding: 2px; }

/*--------- DIALOGS ----------*/

.dialog_top { width: 100%; background: #9CBEBD; color: #fff; }

.dialog_top .sb-inner { background: #9CBEBD; }

.dialog_top .sb-border { background: #000; }

.dialog_top h2 { margin: 0; padding-bottom: 2px; padding-left: 4px; padding-right: 4px; padding-top: 2px; font-size: 1.3em; color: #000000; }

.dialog_bottom { width: 100%; background: #fff; color: #000; margin-bottom: 10px; }

.dialog_bottom .sb-inner { background: #fff; }

.dialog_bottom .sb-border { background: #000; }

.dialog_bottom p { margin: 0; padding: 7px; }

/*--------- ROUNDED BOXES ----------*/

.rounded_box_filled { width: 100%; background: #eee; color: #000; font-size: 1.0em; margin-bottom: 10px; }

.rounded_box_filled .sb-inner { background: #ccc; }

.rounded_box_filled .sb-border { background: #000; }

.rounded_box_filled p { margin: 0; padding: 7px; }

.rounded_box_blank { width: 100%; background: #fff; color: #000; font-size: 1.0em; margin-bottom: 10px; }

.rounded_box_blank .sb-inner { background: #fff; }

.rounded_box_blank .sb-border { background: #000; }

.rounded_box_blank p { margin: 0; padding: 7px; }

skin1/customer/dialog.tpl

Code:

{if $usertype eq "A" || ($usertype eq "P" && $active_modules.Simple_Mode ne "")}

<div class="dialog{if $additional_class} {$additional_class}{/if}{if $noborder} noborder{/if}{if $sort && $printable ne 'Y'} list-dialog{/if}">

  <div class="title">

    <h2>{$title}</h2>

    {if $sort && $printable ne 'Y'}

      <div class="sort-box">

        {if $selected eq '' && $direction eq ''}

          {include file="customer/search_sort_by.tpl" selected=$search_prefilled.sort_field direction=$search_prefilled.sort_direction url=$products_sort_url}

        {else}

          {include file="customer/search_sort_by.tpl" url=$products_sort_url}

        {/if}

      </div>

    {/if}

  </div>

  <div class="content">{$content}></div>

</div>

{else}

<div class="dialog_top"><h2>{$title}</h2></div>

<div class="dialog_bottom"><p>{$content}</p></div>

{/if}

skin1/customer/menu_dialog.tpl

Code:

{if $usertype eq "A" || ($usertype eq "P" && $active_modules.Simple_Mode ne "")}

<div class="menu-dialog{if $additional_class} {$additional_class}{/if}">

  <div class="title-bar valign-middle{if $link_href} link-title{/if}">

    {strip}

      {if $link_href}

        <span class="title-link">

          <a href="{$link_href}" class="title-link"><img src="{$ImagesDir}/spacer.gif" alt=""  /></a>

        </span>

      {/if}

      <img class="icon ajax-minicart-icon" src="{$ImagesDir}/spacer.gif" alt="" />

      <h2>{$title}</h2>

    {/strip}

  </div>

     <align="left">

  <div class="content">

    {$content}

  </div>

</div>

{else}

<div class="menu_top"><h3>{$title}</h3></div>

<div class="menu_bottom"><p>{$content}</p></div>

{/if}

Thanks.

Re: Align Categories Top Left

the list <ul> has padding and margin. Need to adjust it.

Re: Align Categories Top Left

Where do you see that?

Re: Align Categories Top Left

Im guessing it in the .tpl for he specific menus, but not sure without seeing the content of them.

if you notice {$content} in menu_dialog.tpl.

That pulls in the specific content for each menu. So like for the categories you will have

Code:

{capture name=menu}



{if $active_modules.Flyout_Menus}



  {include file="modules/Flyout_Menus/categories.tpl"}

  {assign var="additional_class" value="menu-fancy-categories-list"}



{else}



  <ul>

    {foreach from=$categories_menu_list item=c name=categories}

      <li{interline name=categories}><a href="home.php?cat={$c.categoryid}" title="{$c.category|escape}">{$c.category}</a></li>

    {/foreach}

  </ul>



  {assign var="additional_class" value="menu-categories-list"}



{/if}



{/capture}

{include file="customer/menu_dialog.tpl" title=$lng.lbl_categories content=$smarty.capture.menu}

That is where the <ul> </ul> is coming from.

Re: Align Categories Top Left

Well, here's my help.tpl

Code:

{*

$Id: help.tpl,v 1.21 2008/08/21 09:52:40 max Exp $

vim: set ts=2 sw=2 sts=2 et:

*}

{capture name=menu}

<a href="help.php?section=contactus&amp;mode=update" class="VertMenuItems">{$lng.lbl_contact_us}</a><br />

<a href="help.php?section=business" class="VertMenuItems">{$lng.lbl_privacy_statement}</a><br />

<a href="help.php?section=conditions" class="VertMenuItems">{$lng.lbl_terms_n_conditions}</a><br />

{include file="pages_menu.tpl"}

{/capture}

{ include file="menu.tpl" dingbats="dingbats_help.gif" menu_title=$lng.lbl_help menu_content=$smarty.capture.menu link_href="help.php"}

I can change the overall look and stuff in languages, but I can't figure out where the left padding is coming from. Can't use Webmaster, cause they're links.

](*,)

Re: Align Categories Top Left

For CSS debug - you need to use Firebug. Webmaster tells you what templates, but Firebug tells you want css to use and where it is.

Re: Align Categories Top Left

I got firebug. But, when I edited the location it showed it didn't do anything. Let me try again and I'll put up a screen shot.

Re: Align Categories Top Left

Maybe others can easily help you with screen shots and code - but it is way easier to assist you if you post links. (Takes too long to go through code, and with screen shots - many of the responses you get will be speculative.)

Re: Align Categories Top Left

http://www.shirtsforthepeople.com/sftp/home.php

sorry, should have mentioned it's in my sig.