Someone please help!!

[raindark]

hello,,
honestly I have no idea what you mean. I went there but it shows you how to download the future zen. I'm not sure thats what I need. Thanks

[seethrou]

May be you need to find the final way by yourself, most of the time others can only provided the direction.

Take a look and feel of the demo Future Zen, and it use graphics for the sidebox.

Then
1st, download the Future Zen Templates
2nd, install it and config in your testing version of ZC and study how it handle the sidebox and its related graphics.

Or
3rd, if you have enough experiences than just look at the stylesheet and you can find the way how it works.

And the key points, it break the box graphic into 2 parts. One for the sidebox heading and the other is for the sidebox bottom. And the below is the related section for the sidebox graphics of Future Zen in the stylesheet
.

.leftBoxHeading, .rightBoxHeading {
margin: 0;
background-image:url(../images/sidebox_header_bg.gif);
background-repeat:no-repeat;
padding: 0.5em 0.2em;
}

.sideBoxContent {
background-image:url(../images/sidebox_content_bg.gif);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.6em 0.7em 1.4em 0.6em;
}

[gjh42]

Another clue:

The code above is for decorating each sidebox individually. Since you want to enclose them all in one box, you will need to apply the logic to larger units.

NavColumnOneWrapper encloses all the left sideboxes, as you will see if you use the FF Web developer tools, and navColumnOne encloses that. So you can put the top & sides of your border in the outer entity and the bottom in the next inner one so it covers the lower ends of the sides. Adjust margins & padding in all places necessary and you will be done. (I know, easier said than done, but work on it, experiment, and study CSS if necessary. You will be better prepared for your next project.)

[seethrou]

For the reader follow on
====================
Please note the following has not been tested and only suggested for experience!


@ raindark

Some suggestions, before modifications, please first read the FAQ, the Wiki and search for the basic concepts about your subjects. It will help to turn the headache or hair loss into more joys.

The following may be still not the final way but hope this closer.
Your image seems with problems, it contain large white margins and wider than the column size, so only portions of the graphic showed. Again it is about the basic concepts you need to notice.

Suggest to trim off all the margins not needed unless it is by design and I misunderstand about it.
Then cut your image mirror.jpg into 2 parts,
one for the top or header and for e.g. I call it mirror_1.jpg,
and the other for the bottom and for e.g. I call it mirror_2.jpg.
But the length of mirror_2.jpg must sufficient or longer than all the lengths of your contents!

After that, copy the idea from Future Zen and got the advices from gjh42.
And put the following to your stylesheet and trial and errors for the experiences.

#navColumnOne {
margin: 0;
background-image:url(../images/mirror_1.jpg);
background-repeat:no-repeat;
padding: 0.5em 0.2em; /* tune it to fit */
}

#navColumnOneWrapper {
background-image:url(../images/mirror_2.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.6em 0.7em 1.4em 0.6em; /* tune it to fit */
}

Again, it is your turn now.

.

[raindark]

I put an image into my sideboxes as a border. And its all doubled . Am I using the wrong code or is it in the wrong location?


http://www.veryprrettythings.com

Thanks !

[seethrou]

First, you are have two stylesheets, stylesheet_new.css and stylesheet_org.css.
It seems that you are using the version before ZC v1.3.5, please upgrade it to the current version as you still under development. It will save you time for the upgrade later.

Second, (I quote some of myself in the other topic),

you are using the default demo template - classic.
It is not wise to use it directly for your add on and modifications, it will be over wirte in the future upgrade. And you will create more troubles in upgrading.

Suggest to use your own template for that and it is easy.
My steps,
1. copy the classic template directory to a new template directory, called
includes/templates/classic_my

2. and modify the file, in your new template, for your own use
includes/templates/classic_1/template_info.php

$template_name = 'Classic Contemporary Green';

3. For example, to read as

$template_name = 'My Classic Contemporary Green';

It is only for example, you can change it to whatever you like.
And it will show up in the admin's Template Selection as a new template's title for selection.

Then within a minute or two, after the above steps, you can clone a template for your own use. It will not be overwrited in the upgrade.

And you have a new template and the path is:
includes/templates/classic_my

Return to your issue,

From recall, I had answered your question for this before for I remember the golden mirror image.
Please give more detail.
Now, you have 2 set of images of mirrors. One is golden and the other is purple and they both show up and overlap.

What is the exact effect for the sidebox which you want to achieve?
Do you want to use the golden one or the purple one?
Or, do you want to have a Mirror inside another Mirror?

[raindark]

Hello,

ok I inserted two images in my sideboxes. The first problem is that the images overlapped when I took ou the featured products box, and the second problem is I just cant get them aligned. I want the top box to be where the second one is . And I would like for the categories to fit in the boxes. I have resized them many times but that doesnt work. Thanks..

http://www.veryprrettythings.com

[barco57]

well isn't this a quandry (sp?) Firefox makes this difficult to troubleshoot with its edit css feature as it doesn't handle relative paths to images well, basically is they disappear. So with that said when you turn off the background images you see that the sidebox content are lined up all the way down, no overlap, so we know that it is working correctly. The problem is with the sidebox background images as you can see here:

#navColumnOne {
       margin:0;
       background-image:url(../images/sidetop-3.jpg);
       background-repeat:no-repeat;
       padding: 1.3em 1.2em;
}
	

#navColumnOneWrapper {
      background-image:url(../images/sidebottom-4.jpg);
      background-repeat:no-repeat;
      background-position:bottom;
      padding: 0.6em 0.7em 0.4em 0.6em
}

You have the images tied to 2 different things, so of course they don't work together. So when you turn off the one box the column shrunk and the image tied to the bottom of that column moved up.
I would implement this differently. I would go through and figure out all class and ids for the different boxes, including the one for the shopping cart which doesn't appear until something is in the cart (if your gonna use it).
Then the box that you want to be at the top would have the fancy header (Scroller thingy) for the border-top and border-left, -right would be set to double and no border-bottom defined.
Then the next boxes in the lineup would have no top or bottom borders, only border-left, -right.
The last box would have the opposite setup as the top box, no border-top, only sides and bottom.
The classes and ids for the boxes is in the code but not always in the stylesheet, that is the homework make a list of all of them.

Implementing them this way would make them dynamic, they would work when you add more content to them. As they are now if you add more content to them then can fit you would have to redo the images. What a pain that would be.
Hope I made some sense and gave you some info you can use

[raindark]

Thanks . I understand what you are saying and it makes sense but i am confused by classes. I am not familiar with coding or anything dealing with websites for that matter , How would I start to define the classes or find out whats what?

Thanks for the advice..

[kobra]

Get firefox and the web developers extentions available at the FF site, You might also like the ardvark plugin.

With these you can set them to show the information is several ways and therefore be able to make a list of the sideboxes that you are displaying. You only have to select the top most box to always be the top and the bottom to always be the bottom through the order function in the layoutboxes controller in the admin.