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.

Re: Align Categories Top Left

where did you get that help file from, because fire bug is showing <ul></ul> in the help menu on the site in your sig.

Re: Align Categories Top Left

Quote:

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

My bad - I should have noticed that.

Re: Align Categories Top Left

and what is all this?

<div class="sb-inner" style="position: relative; top: 8px; height: 2048px; margin: 0pt 1px; padding: 0pt; overflow: hidden; background-position: 0pt 0px;"></div>

height 2048px???? that can't be right.

Re: Align Categories Top Left

I use the rounded corner mod for 4.3.2, and that's the stuff I can't seem to locate man.

Re: Align Categories Top Left

Quote:

Originally Posted by ARW VISIONS

where did you get that help file from, because fire bug is showing <ul></ul> in the help menu on the site in your sig.

default

Re: Align Categories Top Left

Webmastermode should tell you exactly which template to look in.

For the help section, in the default 3.2, the ul/li code is in skin1/customer/help/menu.tpl.

But you might not have to mess with the templates. You can set the margins and padding for the ul and li in the css file. For example, you could try something like:
.menu_bottom ul {margin-top:1px, padding-top:1px;}

If you need to add a class specifically to those ul/li, then you will need to figure out the templates in Webmastermode. In 3.2 - this would involve several templates.

A little more advise - before you get too far along, you might want to keep an IE browser open as you do this. It is less forgiving of some of the things you are doing and will point out issues with your changes. Also may want to run a W3C check on html and css every once in a while. It could save you time in the long run.

Re: Align Categories Top Left

that is the contents of skin1/help.tpl not skin1/customer/help.tpl

You need to make sure you are looking in the correct files.

Quote:

Originally Posted by SID357

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

Quote:

Originally Posted by gb2world

A little more advise - before you get too far along, you might want to keep an IE browser open as you do this. It is less forgiving of some of the things you are doing and will point out issues with your changes. Also may want to run a W3C check on html and css every once in a while. It could save you time in the long run.

Truly appreciate the advise.

Roger that man, it's just all jacked up in IE.

I hate IE, but the average users, use it. Looks great in Safari, looks good in Firefox, looks hella good in chrome.

IE is just jacked, and I have no idea how to fix that. That's just way outside of my realm.

What's a W3C check man?

I'm very new to this, my thing is graphics and making t-shirts. I've learned more css coding in the past month than I ever wanted to.

Re: Align Categories Top Left

You could always pay someone like me or the others in this community to do things like this.

It might seem like a waste of money, but I could of had this fixed in 10 minutes for little cost.

Then you could spend you time doing what you do best, running your business.

In the long run, if you are going to operate a successful e-commerce site it will benefit you greatly to have a design pro on your side, or better a in house professional.

Ash

Re: Align Categories Top Left

Quote:

Originally Posted by ARW VISIONS

You could always pay someone like me or the others in this community to do things like this.

I know Ashley.

I've watched your posts for a long time before I even joined. ;-)
Give a little bit of information, and then give the pitch. It's awesome my friend, I totally understand.

I want/need to do this on my own, hopefully with your guys help. I need to learn this.... If anything else than just for my own self esteem...

Once, I get everything in place, exactly where I want it, then I'll kick down some cash to fix the IE crap. That way you know the outline.

gb2world
tal

How cool are these 2 dudes?
Much appreciated.

Re: Align Categories Top Left

I get practically zero business from this forum, and I try to help when I can.

I am all about trying to figure it out on my own.

I usually only suggest pro help when the person seems entirely in over their head, like you do.

Re: Align Categories Top Left

Aww common man, I didn't mean to hurt your feelings dude.

I'm just so damn frustrated right now, and when I get like this, I just can't think straight any more. So, I'll come back tomorrow with fresh eyes and keep on trying, until I get it.

Thank all of you for posting, I really appreciate it.

This is really important to me.

Re: Align Categories Top Left

in styles.css try putting this

.menu_bottom ul{
margin:5px 0px 0px 10px;
list-style:none;
}

Re: Align Categories Top Left

or this

.menu_bottom ul{
padding:0px;
margin:5px 0px 0px 10px;
}

Re: Align Categories Top Left

Quote:

What's a W3C check man?

It finds & reports violations (errors) in your code that could cause goofiness on some browsers. (Sometimes the browsers are forgiving and accept the errors, sometimes not) You can enter you pages at these links:
http://jigsaw.w3.org/css-validator/
http://validator.w3.org/

Or - you can use this firefox addon: Web Developer Toolbar - it has tools where you can just select "Validate CSS" and "Validate HTML" and see the report (along with other developer tools)

Quote:

I'm very new to this, my thing is graphics and making t-shirts. I've learned more css coding in the past month than I ever wanted to.

Maybe you can use your css knowledge on a t-shirt:

<h1 class="politics">Liberty</h1>

.politics {clear:both;float:right;background:transparent;}

Re: Align Categories Top Left

I've had the web developer toolbar installed for a while now and haven't used it once. Just played with the validate CSS. Good stuff man, thnx!

Quote:

Originally Posted by gb2world

Maybe you can use your css knowledge on a t-shirt:

<h1 class="politics">Liberty</h1>

.politics {clear:both;float:right;background:transparent;}

lol

Yeah, pretty sure I could sell a whopping one shirt. :)