How did they do that?

[deviouscow]

I've been looking at a zen-cart template and would like to know how they've done what they have because I've tried to replicate it and can't figure it out.

In this example shop : osc4.template-help.com/zencart_28694/index.php

How have they
1) Put links (Home page, new products etc) in their title graphic?
2) Put the headings for the sideboxes (Categories / Best Sellers) so they overhang the sidebox?
3) Make the background image for the whole website so that the first one at the top of the page has a different horizontal offset to the repeated background image further down the page.

Thanks!

[Website Rob]

Nothing more than some custom images and css coding.

A good Browser will allow you to look at individual images and the css.

[deviouscow]

I can see the images without a problem, and I have looked through the css. Unfortunately as I'm new to this I couldn't see what made it work - hence the post. Also, I was wondering if they've used a different module to get the links in the heading bar or is that done in the css somewhere too?
Any pointers please?!?!?!

[Website Rob]

There are no pointers or shortcuts here as the template is customized and the only to see what they did is to take it apart. Many of us, myself include, have learned how something was done by downloading it then taking it apart to see how certain effects or look was done. Nothing wrong in that as long as you don't use their code / images for your own.

[deviouscow]

There are no pointers or shortcuts here as the template is customized and the only to see what they did is to take it apart. Many of us, myself include, have learned how something was done by downloading it then taking it apart to see how certain effects or look was done. Nothing wrong in that as long as you don't use their code / images for your own.

Thanks for your replies Website Rob.
I had already downloaded their css and tried to work out what they had done but I didn't get anywhere. I tried using their css on my test site to learn how they're doing it, and I didn't get the same result - hence my question. (I have no intention of stealing their work, just discovering how it's done then doing something similar). I might be wrong but I think there's more than just the css involved - either custom code or hopefully a module that when applied to the css makes it all format nicely like they've done.

[stevesh]

1. The top menu is a re-located navEZPages, where they've used EZpages to link to internal pages.

2. I haven't tested it, but I assume you could just make the sidebox headings wider than the sidebox and maybe float them left.

3. Not sure, but if you view the image to get the image names, then check the stylesheet, you'll probably see how they positioned them.


The easiest way to figure out what is where is by installing the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. A very handy tool.

[CoolCarPartsOnline]

I've been looking at a zen-cart template and would like to know how they've done what they have because I've tried to replicate it and can't figure it out.

In this example shop : osc4.template-help.com/zencart_28694/index.php

How have they
1) Put links (Home page, new products etc) in their title graphic?
2) Put the headings for the sideboxes (Categories / Best Sellers) so they overhang the sidebox?
3) Make the background image for the whole website so that the first one at the top of the page has a different horizontal offset to the repeated background image further down the page.

Thanks!

1) You create a new unordered list (copy the header links from zen cart original template), add a background to the the whole div. Then style the unordered list to use image instead of original o as a list background.
2)You style the margin of you sidebox content so it is 10 or 15 px offsetting the header.
3)You look exactly where you want it to be display and located that div. You can style any div. Adjust the zoom on the image.

This is all done in CSS. You can even go a step ahead of this developer and use CSS gates to minimize background image sizes. (That would be my next major project).

[deviouscow]

1) You create a new unordered list (copy the header links from zen cart original template),

Sorry for the beginner level questions! Where is the list created though? If I create EZPages, I can't see an option there to put the EZPages as a list rather than just links. Do you create them through the Admin page somehow or is that using a plugin?

2)You style the margin of you sidebox content so it is 10 or 15 px offsetting the header.

Thanks!

3)You look exactly where you want it to be display and located that div. You can style any div. Adjust the zoom on the image.

Hmm, I'll look through their stylesheet to work that out.

This is all done in CSS. You can even go a step ahead of this developer and use CSS gates to minimize background image sizes. (That would be my next major project).

Hmmm, never heard of them. I'll be looking them up tomorrow!

1. The top menu is a re-located navEZPages, where they've used EZpages to link to internal pages.

Yup, I can see now looking at the stylesheet that the list of items is within the EZPages tags.

Thanks heaps Stevesh and CoolCarPartsOnline!!! I'll install that plugin tomorrow Stevesh and see how I go (the Firebug one does a similar job but I'm finding it a bit buggy). Thanks for the tips on how to use it too!