A Different Zen Template or "Sage"

This is a general assistance post for the "A Different Zen Template" or "Sage" template available in the downloads section. You can download it and follow the instructions to install. It is generated in the same structure as ZenCart to aid in you determining where the folders/files need to be placed.

As provided, it passes the XHTML Transitional test. I hope that this can help you get started in creating your shop.

Post your questions and/or issues and I or another will provide the assistance that we can.

Hi Kobra,

If you'd like to see a work in progress using a slight variation of your template you can see it here:

http://www.jacksimports.com/

I still have a couple of issues in my header design to take care of and some other tweaking, and the shipping information page. However besides that it has the colors and layout all done.

betty

Glad you found it useful...

If you can create a gif the only thing that I would change is the logo and place your elements on a transparent matt there by reserving the seamless nature of the background....

kobra:

Glad you found it useful...

If you can create a gif the only thing that I would change is the logo and place your elements on a transparent matt there by reserving the seamless nature of the background....

Yeah, I know about the background issue that's why I mentioned I'm still tweaking. I plan to bring it back into photoshop and fix it. I did the bg background in paintshop pro and didn't notice the color difference until it was online. I have some nasty leftover white edges in the salesman figure to clean up before I can go transparent.

My main goal was just to get it up and in place so the owner can start adding his products. I need fresh eyes before I can tweak anymore. Well, that and new glasses would help alot!

(and if Santa is reading this - and a new pci-extended graphics card and a 19-20" 800:1 ratio lcd monitor! :blush: )

betty

Oh yeah, if you have PS....just place the images on a trans matt....no background at all as it will show through and remain as seamless as it was.

(Santa, I'll take the LCD, but as Web Graphics are a bit mundane you can keep the highend card)

kobra:

Oh yeah, if you have PS....just place the images on a trans matt....no background at all as it will show through and remain as seamless as it was.

(Santa, I'll take the LCD, but as Web Graphics are a bit mundane you can keep the highend card)

Thank you for the advice as well as the sage template!

(Video card is more to make my system Vista Ultimate compliant, monitor is to help my poor eyes see the graphics better)

betty

I'd like to say thank you for this template too. :smile:

Tina
http://www.waveneybooks.co.uk

Tina,

Happy that some will find it serves their purposes.

how do you change the 'tagline here' at the top?

Find your answer here

Thanks very much

how do you stop the top bar categories going off the page in firefox and opera?

When I looked at https://ecstasylove.org/stores/ the "Sage" template was not enabled

try now. i will leave as sage for 1 hour

I do not know what is causing the scroll L&R bar as the template is set to 100% and as such should only take the full width and no more you could adjust the following and see if it helps. (includes/templates/sage/css/stylesheet.css)

I did not see the top bar categories going off the page FF 1.5.0.9 or 2.x

#mainWrapper {
	background-color: #f5f5d6;
	text-align: left;
	width: 99%;
	vertical-align: top;
	}

And to get the designed look the L&R columns need to be set to about 10px wider than the L&R boxes in the admin > config > layout settings

Hi kobra,

After struggling mightily to get my own mods to Custom to do what I want, and creating in the end severe and probably unfixable bugs, I'm going to start over using Sage as a foundation. It's already more than half-way towards what I want.

My main issue is that I have a vertical format logo. (See it here. Looks great in Firefox! :laugh: )

Can you think of any way to get that logo up in the top-left corner? I'm going to use a common background color on the header as well as the left column, so the area the logo will occupy should be fine. But I'll need to push the left column sideboxes down -- maybe a negative top margin on the top-most one? -- and the header content to the right. And then how do I get the logo in? I think I could add a div (in which file?) and use position absolute to take it out of the flow -- if I can make space behind it by moving the other elements.

Before I go messing things up too much, I thought I'd ask if you had any hints. Maybe if together we can get this working, it could be another template contrib, as there must be others out there who have logos that don't fit the usual Zen Cart template layout.

Thanks for any help you can offer,

Rob

I'll answer my own question about floating a vertical format logo in the top-left corner of the page, in case anyone wants to do this. It turned out to be easy. :laugh: Remember, I'm using the Sage template; I've no idea if this would work in other templates.

First, replace the Zen logo with your own, in the usual place: includes/languages/english/header.php (Or in your override folder.)

In the style sheet give logo a style like this (adjust the px to suit)...

#logo {
	position: absolute;
	top: 10px;
	left: 10px;
}

The "position: absolute" takes it out of the flow, so everything else on the page will ignore it.

In the style sheet give a left margin to whatever is in the header other than the logo -- in my case that was tagline and navMainWrapper -- to push them over to the right to avoid your logo.

You may or may not want to set a height on the header. I didn't since there's only text up there now that the logo is out of the flow.

You'll need a top-margin on the top-most element in your left column to push it down below the logo. In my case the cart summary sidebox is active and is first, so I put a large top-margin on its header, like so...

#cartsummaryHeading {
	margin-top: 200px;
}

Add chocolate sauce to taste and serve over ice-cream! :P

Rob

Thanks for your generosity in sharing this template! I have one small issue relating to the left and right columns. I've got them both turned on and need the width of each to be 200. I see in your install.txt that you require them to be 190px. How can I change the stylesheet to honor my necessary width? Should I create my own bg images at the width I need them for the two columns? You can view my store here: http://bes.lunarservers.com/~godig4/shop/index.php?main_page=product_dnld_info&cPath=20&products_id=215. It gets worse when I view a product that has a relatively small product description.

PS I have not changed anything in this template set that you provided.

Thanks in advance for your assistance!

Sorry, but this thread fell off my subscribed list somehow...probably operator error!!!

I see that you have created a nice looking "custom" template and congrats to you!!

Hi

Am thinking on changing template, will that effect in any way my meta tag?
Will that effect in any way what has been index by Google and other search engine?
Thank You