Simple Zen Template - Support Thread

[grayceworks]

Ok... if you're referring to the way I have my categories list styled... I did that in a couple places... I had to change an admin panel setting, and I had to add some css code.

In the admin panel... go to configuration>layout settings

find the following settings:

Categories Separator between the Category Name and Sub Categories (set this to the following:   &#183   )


Categories SubCategories Indent (set this to the following:    )



Then in the css, add the following code, or if one of these names exists in your css, then change the values:

/*this makes these styles apply only to the categories box, not all items with the style sideBoxContent   -   this is basic categories box style*/
#categoriesContent.sideBoxContent
{width:100%; text-align:left;}

/*this makes these styles apply only to the categories box, not all items with the style sideBoxContent   -  this is the basic style for links in the categories box*/
#categoriesContent.sideBoxContent a 
{color:#933; text-decoration: none;	}

/*this makes these styles apply only to the categories box, not all items with the style sideBoxContent  - this is the basic style for links in the hover state in the categories box*/
#categoriesContent.sideBoxContent a:hover 
{color: #fff;text-decoration:none;background:#633;border:1px solid #fdfde9;}


/* this tells the basic style for links in TOP categories, both visited and unvisited*/
A.category-top, A.category-top:visited 
{color: #933;text-decoration: none;}

/* this tells the style for ANY  links in the categories box, both visited and unvisited */
A.category-links, A.category-links:visited 
{color: #933;text-decoration: none;}


/* this tells the NORMAL style  for category links, both visited and unvisited  */
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited 
{color: #933;text-decoration: none;}

/* this tells the HOVER style  for category links, both visited and unvisited */
A.category-subs:hover, A.category-products:hover, A.category-subs:hover, A.category-products:hover 
{color: #fff;text-decoration: none; background:#633}


/* this is what tells the CURRENT SELECTION style  for category links, both visited and unvisited - it tells the highlight to stay ON when a sub category or a product is selected, so that you know where you are at in the category list  */
SPAN.category-subs-parent 
{color:#fff;background:#633}

/* this  what tells the CURRENT SELECTION style  for SUB category links, both visited and unvisited - it tells the highlight to stay ON when a sub category or a product is selected, so that you know where you are at in the category list  */
SPAN.category-subs-selected 
{color:#fff;background:#633}

what you will want to change to match your site is anywhere that has a color value or a background color. color: is your text color and background: is the highlight color. you may want to change the border color as well, as I have a border applied to the hover states.

[BDCreations]

Thanks for the info..gonna try and figure that out :)

Does it matter WHERE witihn the CSS I add all that info??? Or can I jsut plop it in anywhere...???

Thanks again,
Moy

[jettrue]

Thanks for the info..gonna try and figure that out :)

Does it matter WHERE witihn the CSS I add all that info??? Or can I jsut plop it in anywhere...???

Thanks again,
Moy

I'm not sure what grayceworks code above is for, I haven't looked through it enough, but to turn off a sidebox, just go to your admin, "coyfiguration", "Layout setting" and turn off either the left or right sidebox completely. Then you can go to "Tools" then "Layout Boxes Controller" to move sideboxes to one side or the other.

And with css, you can add it anywhere you want in the stylesheet. But you have to make sure that any old references you have to anything that is in the styles grayceworks gave you is removed.

[grayceworks]

Welllll... If you read the question she had asked.. she asked how I got the highlighted rollovers on my categories listing on my site. And how I did bullet points • instead of |_ for the subcategories. I answered. She got it working fine.

Smiles. Dunno why you keep jumping on my responses to questions that someone aimed at me about how I did something on my site. Seems you'd want to know how people can customize your template instead of giving off a "DON'T MESS WITH MY TEMPLATE! " kind of vibe.

There AREN'T any references to any other sidebox in the code I gave. It exclusively refers to the "categories sidebox content" And I specifically pointed that out in the code.

[BDCreations]

Thanks for the info..I think it worked! Slowly but surely getting there...thanks ladies/guys!

Think next will be sorting out the layout issues with our products when we try and add attributes...

[dharma]

Almost all of the issues are gone now, except for these that I can clarify better+jpegs:

4. shipping insurance box is out of alignment (in check out)...see jpeg below...(safari only) could it be a fix in the ot_insurance.php pages? or css?

3. In category sidebox: large gap under last category before Specials Link (could be BetterCategories mod-not sure) Safari Only:

your suggestion:

remove the top padding from here:
HR {
height: 1px;
margin-top: 0.5em
border: none;
border-bottom: 1px solid #9a9a9a;
} 

did not work, I went as far as to delete the code completely and it had not effect.

new issue! on my login page: Safari/FF : the browser window does not fill with the login page at 100% it shows about 75% the rest is background grey, this happens only on this page...see jpegs....

[jettrue]

Almost all of the issues are gone now, except for these that I can clarify better+jpegs:

4. shipping insurance box is out of alignment (in check out)...see jpeg below...(safari only) could it be a fix in the ot_insurance.php pages? or css?

3. In category sidebox: large gap under last category before Specials Link (could be BetterCategories mod-not sure) Safari Only:

your suggestion:

remove the top padding from here:
HR {
height: 1px;
margin-top: 0.5em
border: none;
border-bottom: 1px solid #9a9a9a;
} 

did not work, I went as far as to delete the code completely and it had not effect.

new issue! on my login page: Safari/FF : the browser window does not fill with the login page at 100% it shows about 75% the rest is background grey, this happens only on this page...see jpegs....

Hi Dharma,

For the shipping insurance, try opening up includes/templates/YOUR_TEMPLATE/tpl_checkout_payment_default.php and add this:

<div class="clearBoth"></div>

right after (approx line 96):

<?php echo $selection[$i]['fields'][$j]['field']; ?>

If you would like your shipping insurance check box right before the text (a lot of people have asked about this I've finally taken the time to figure it out), change that whole section to this:

<fieldset>
<legend><?php echo $selection[$i]['module']; ?></legend>
<?php echo $selection[$i]['redeem_instructions']; ?>
<div class="gvBal larger"><?php echo $selection[$i]['checkbox']; ?></div>
<?php echo $selection[$i]['fields'][$j]['field']; ?>
<label class="inputLabel"<?php echo ($selection[$i]['fields'][$j]['tag']) ? ' for="'.$selection[$i]['fields'][$j]['tag'].'"': ''; ?>><?php echo $selection[$i]['fields'][$j]['title']; ?></label>
<div class="clearBoth"></div>
</fieldset>

As for the gap after "out of stock" in your sidebox, changing as I suggested shows an immediate response on FF with the developer tools. I can't test like that in Safari, however. BUT, when I look at the source of that section, I see this:
<br style="line-height: 0;" /><hr id="catBoxDivider" /><br style="line-height: 0;" />

those <br style="line-height: 0;" />'s are probably the issue. You can try changing those to
<div class="clearBoth"></div>

As far as the login issue, I would completely rework that credit card/authorize net seal section at the bottom of your site. Its got a few validation issues. Use http://validator.w3.org/ to run your site through the validator. You've got a beginning <td> (<td class="footerbottom" align="center">) but no closing </td> and that beginning <td> isn't even inside a table. I'd go ahead and change that to a <div class="footerbottom"> with a closing </div> at the end.

I think cleaning that up may help the issue.

[blumcafe]

You can see what it looks like here:
http://www.zencart13.jadetrue.com/

Get it here.

The download includes the buttons, the images, the css, and the needed files.

I wanted to offer a simple and uncluttered option for a zen cart, without all the clutter. Of course you can add as many sideboxes as you want, and can keep the left and right sideboxes on if you like, but I prefer only having one side on.

Complete instructions are in the download. I would not be surprised if I forgot to include a file or two, so holler at me if it looks grossly different when you install it.

Feel free to ask any questions here, and let me know if you need any different colors for the gradient in the header.

I've already realized a mistake in my upload.. I added a link to the wishlist in my header, since I installed that mod, so if you're not using the wishlist mod, you'll need to remove that link. I'll add that to a subsequent post.

I have NOT tested this in IE, so can someone please send me a screenshot if things look whacked in IE.

Thanks and Enjoy!

Hi,
First let me say, I think this is one of the best, if not the best template out there for Zen Cart. I am a minimalist myself and this is a clean slate.
You wanted to know about appearance in IE. Not sure if anyone has yet sent screen shot, but I have one. The problem I have is that the links at the top are chopped off at the bottom, i.e., login, shopping cart, etc. See attached screen shot. I also had question about dividers at the bottom and how I might go about changing the spacing and the font size for the footer links (not the copyright info) but the text above that. Thanks,
BlumCafe

[jettrue]

Hi,
First let me say, I think this is one of the best, if not the best template out there for Zen Cart. I am a minimalist myself and this is a clean slate.
You wanted to know about appearance in IE. Not sure if anyone has yet sent screen shot, but I have one. The problem I have is that the links at the top are chopped off at the bottom, i.e., login, shopping cart, etc. See attached screen shot. I also had question about dividers at the bottom and how I might go about changing the spacing and the font size for the footer links (not the copyright info) but the text above that. Thanks,
BlumCafe

Hi@

For the chopped off issue, see post 176 in this thread:
http://www.zen-cart.com/forum/showpo...&postcount=176

You can changed the font and spacing for the bottom footer links with this css tag:
#navCatTabs ul li a, #navSupp ul li a {
text-decoration: none;
padding: 0em 0.9em;
margin: 0;
color: #666;
white-space: nowrap;
}

[RKB]

The clipped header issue in IE... change the line height in the section below to 1.5em:

#navMain ul (line 290)

{

padding-top: 0.7em;

list-style-type: none;

text-align: center;

line-height: 1em;

}

Ron