Banners & Forcing Bottom Boxes to Stay In One Place

Is it possible to do the following:

Reference:
Bad Page - http://animalsuperstore.com/zenpro/index.php?main_page=page&id=14
Better Page - http://animalsuperstore.com/zenpro/index.php?main_page=bird&cPath=3

The main problem is the banners stretches certain pages because the banner length never changes, but all pages are different sizes and I have floating areas I would like to stay in place.

1. How can I keep the 3 green boxes & subscribe to email on the bottom of the page? The green boxes say "Gift Center", "In-store Services", and "Help Pets in Need". Like in example "Better Page'. In "Bad Page" they float up top.

2. Note: I will not be using banners-all but I'm using as an example right now. I still need to create new side boxes.

Anyway, I would like the amount of boxes displayed on each page be determined dynamically based on content size of page. So Banners should display based on a couple of things:
a) if category is showing on left side, only show small banner box underneath it if there's room, and
b) right side should be filled of small side boxes, but each side should never exceed the top green boxes at the bottom like "help pet in needs box"

3. Should not display the same banner in each of the side boxes per current page. Meaning if I have only two side boxes, sometimes I see the same banner in both boxes on one page.

I've attached 3 images to try to explain further. Hopefully, font can be read because I kept having to reduce size & quality for it to upload. But hope you get the point from it & my description of issues.

Note: my coding skills are not the greatest and no php, but I've been able to do some changes successfully like customize footer, add captcha, no login for reviews, etc. This one seems a bit bigger of a task, but since a developer I already paid is ripping me off, I'm forced to try to finish the job myself :cry: I really appreciate any help you guys/gals can give me and/or reference me to good documentation for each to help. Thanks in advance!

This is a pretty big job you describe, seriously restructuring the page output flow. I would not try it without a thorough knowledge of PHP, HTML and javascript.

I pretty much figured it would take some work. I guess I was hoping maybe somebody had already did something similar and could post code or a thread for me to get.

What if #2 wasn't so precise in matching the top of the 3 boxes (not dynamically determined), but instead a person could define how many side box banners, per column, and per page you would display. Cause I have some pages as small as putting 2 and as big that could fit 12, yet if I only put 2 the two sides will look so bare on the majority of pages. I guess I'm surprised not more people asking for such a thing or similar.

Also, what about #1 and #3? I would think they would be easier.

Thanks!

The center and side column will always be just tall enough to hold their content - you can't make divs automatically match the height of their neighbors. Since they are top-aligned, it is the bottoms that will differ.

If you want to fill the sidebars based on the center column height, that lets the center boxes be at the bottom by default. If pages with the same name (main_page=xxx) will always have about the same height, you can set sideboxes to display or not based on the $current_page_base variable. Each sidebox can have code added to its top to set a flag ($flag_display_xxx) to true or false based on any criteria you can code in. If the sideboxes will each stay the same height, you can calculate which ones will fit for a given center column height (determined by the page type). Once you have done one, it is just a matter of repeating the same work for each sidebox and varying the criteria.

Likewise, you can set #navColumnTwoWrapper to have a height depending on $current_page_base, and position the last (subscribe) sidebox at the bottom.

Another possible approach which easily covers the "bottom" boxes but does not apply tp the quantity of sideboxes would be to
give the three center boxes and the subscribe box position: absolute; and bottom: 1.0em;,
make #contentMainWrapper position: relative; to cause it to be the reference container for the absolute elements,
and give .columnCenter and #navColumnTwoWrapper padding-bottom: 12em; (adjust to equal the height of the boxes) so they keep enough open space at their bottoms and do not let other content invade that space.

Thanks for your reply Glenn!

For your first example, it sounds like you could put code in each sidebox that has a value of true or false for displaying based on certain pages that may have similar height and determined by the string of the URL?!?

So, say I have 8 sideboxes created for one side

So in not such coding terms but if.....

Specials, defaults to 12 items displaying
$current_page_base = main_page=specials&cPath=XXX
then $flag_display_xxx can be preset to have say 3 on and 5 off.

Displays 24 items
$current_page_base = main_page=specials&cPath=XXX&range=24 then $flag_display_xxx can be preset to have say 5 on and 3 off.

Displays All items
$current_page_base = main_page=specials&cPath=XXX&range=All
then $flag_display_xxx can be preset to have say all 8 on.

Do I have the basic concept here? And, if so it sounds like you could do individually for each page, but it would require a lot of coding to a sidebox (but then just copy code to others).

Example 2 - Sounds like you would put #navColumnTwoWrapper to a static height depending on $current_page_base which is only requiring coding in one place instead of all the sideboxes?!? And, you could also put individual pages, but just will be a lot of work.

Example 3 - Sounds like I won't be needing if I do 1 or 2 so I'll focus on them for now.

I'm going to at least start on creating the extra sideboxes tonight. I know there's a forum out there that describes the code in detail. Just got to find it. Hope that goes well :D

Thanks again!
Christina

I found this code.....

if (!isset($ezpage_id) || !in_array($ezpage_id,explode(",",'2,5'))) {
    require($template->get_template_dir('tpl_order_history.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_order_history.php');
    $title =  BOX_HEADING_CUSTOMER_ORDERS;
    $title_link = false;
    require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
 }

"Which means that the template to display the sidebox will be called whenever the page is not an EZ-Page or, if it is an EZ-Page, it does not have ID 2 or 5."

So I would think that should take care of the ezpages for each sidebox to be displayed. I guess I just need to modify that into also supporting the main_page=xxx method?!?

That would be the general kind of code you want to use. What file is it from? Or what tutorial/post/etc?

$current_page_base will hold a value like 'index' or 'product_info' or 'contact_us', nothing more or less. There are other variables that hold other information you may want to use.

Some sideboxes (the top two in the right column) will not need to have any restrictive coding, since there will always be space to display them. The third sidebox will be restricted in only a few cases, while the ninth sidebox will be restricted in most cases.

Glenn good point about the first 2 boxes not needing code based on a condition bc there's room. :yes:

Here's the article you asked about....
Titled: How can I vary which sideboxes are shown on each of my EZ-Pages?
https://www.zen-cart.com/tutorials/index.php?article=249

I also got some pointers from this one and played around with certain side boxes on just the home page from this article...

Titled: I want to display some of my sideboxes on my front page only, and suppress them from all other pages.
https://www.zen-cart.com/tutorials/index.php?article=270

I then found and installed some sidebox mods like (scrolling specials, scrolling featured, and scrolling new). I have been playing around with them some and made them only display on first page for learning purposes. Not sure if I will use in place of some sideboxes or not, but just experimenting right now. :P

Yet after finding all those mods, I still haven't found the forum or any mods (if any available) to create new sideboxes. I saw a forum days ago, but my keywords not picking any good ones up now. And, there were a bunch of side boxes in the mods, but I don't think any for the banners, unless you know of any?!? Or anyone that reads this thread? Appreciate the pointer to the proper documentation.

Anyway, I do have a couple of new questions that came up....
My home page is http://animalsuperstore.com/zenpro/index.php

1. Whenever I put one of these new mods on the right side, the background color and title don't look like the ones on the left. How can I make the right look the same way?

2. I get sql errors when I click on "MORE" with these new side boxes. I think I know why, I just don't know how to fix. If you click on specials in the side box, it goes to main_page=specials. However, we customized my specials to go to only the specials for the type of animal I have. So normally, you would click on say Cat first, then in categories on that page, specials and it goes to main_page=specials&cPath=2 where you only get the specials for that category of Cat. So besides the path being wrong, I don't think I have a page that would display all pet specials.

So would it be a lot of work to support those side box mods from my home page? And, if I decided to put them in a category like this one http://animalsuperstore.com/zenpro/index.php?main_page=cat&cPath=2 and from that page only display those type specials, would that be a fairly easy one to fix? Just a path change and sql query change?

Sorry so long, but I'm trying to be detailed. Going to bed after posting this, so hopefully tomorrow is a good day for my banners.

Thanks again for any help!
Christina

Kuroi's Blank Sidebox is the standard starting point, or you might want the Editable Sidebox. Either of them will hold any content you want to put in them.

There was discussion about cloning bannerboxes recently; have you searched for that?

Your style_bg.css has rules like```
#bannerbox .bottom-bg,
.columnLeft .bottom-bg,
.information_blocks .bottom-bg {
background: url(../images/bottom-bg2.gif) repeat-x left bottom;
}

.columnRight .bottom-bg,
and the rule will apply to right sideboxes as well.

SQL is not my specialty, so someone else will have to help with that.
Applying the sideboxes to only certain category pages is quite possible.

Glenn, I did see those sideboxes, but the description sounded like they only could put your own images or links in them and didn't say anything about the banner code being linked to them. I'll check them out. And I'll also search the cloning forum as well. Thanks!

If anyone else reads this thread and has an idea about the SQL query for my page, I'd much appreciate any help.

I might be having unexpected guests over tonight so might not be able to get back to this until tomorrow night. I'll keep this thread posted with my results.

Have a great weekend Glenn! :smile:

Hey Glenn (or whoever may respond)

I was able to get the background color and borders for the right boxes to match the left by editing the rules in the css file like you suggested. Thanks! One problem came up after that tho. There is bottom brown corner colors in Subscribe to Email now. Take away the code for the background and the funny brown corners disappear and look normal. Do you have any idea why? Also, do you know where in the css file I change the headers to the sideboxes (ie. one says right1) so they are centered like the left ones?

http://animalsuperstore.com/zenpro/

I decided to go with the Editable Sideboxes since they both looked fairly a like except the Editable gives you the Defines Pages Editor option. I installed the Mod and added a bunch of sideboxes for each side to get ready for the specific page task. I found a thread about this subject a little while ago, so I'm going to read through it and see if it helps. For anyone who might be interested, it's http://www.zen-cart.com/forum/showthread.php?t=44364&highlight=clone+banner+box

Oh and the side box header's text color is different between the two side boxes. Probably coding in the same place?!?

It looks like you want the subscribe sidebox to have different colors from the rest of the sideboxes, since there is a heading background rule just for it. There are presumably more box bg rules that you will need to duplicate and edit just for that sidebox. The multiplicity of bg wrappers makes it hard to unravel.

Hi Glenn

I was able to get the subscribe to email, informational boxes (green center column boxes), and the credit card mod (on the left that I recently added) all to stay on the bottom and not float anymore. All went pretty good except for the informational boxes. They are no longer 33% in width. Setting is still that, but it must not be judging the center width the same anymore. I also had problems with some content like if you clicked on subscribe to email and got an error, the text and red box would over flow over the banners on the right. I changed something (can't remember what now) and it fits except there is no padding on the right of the text and left of the banner. Could these two issues be related? Do you know how to fix?

http://animalsuperstore.com/zenpro/index.php?main_page=subscribe

stylesheet.css

.columnCenter {
	padding-bottom: 14em;
}

#navColumnOneWrapper, #navColumnTwoWrapper {
	margin: auto;
	padding-bottom: 14em;
	}

style_new.css

#contentMainWrapper {
	background: url(../images/contentMainWrapper_bg.gif) repeat left top;
	border: 1px solid #afadad;
	border-bottom: 0 none;
	padding: 10px 6px 0 6px;
	position: relative;
	margin:-1px 0 0 0;
	}

.information_blocks {
	font-size: 1.1em;
	padding: 0 0px 0 2px;
	position:absolute;
	bottom: 2.0em;
	}

style_sideboxes.css

#subscribe{
	position: absolute; 
	bottom: 7.0em; 
}

#ccaccept{
	position:absolute;
	bottom: 2.0em;
}

Thanks!

I haven't gotten a response to my post yet so I'm flagging it again. Is there anyone that may know the answer to my problem? Thanks!

You have a bunch of nested tables in the center column, one of which extends over the right column, and I have a feeling those are involved with your problem. Tables respond differently to styling than divs in some cases - I don't use them much so don't know all the differences.

The information block ul and li paddings are also involved, as changing them changes the block width.
There are so many interlocking elements that this could be a nightmare to sort correctly. I would start by getting rid of the nested tables and simplifying the structure as much as possible.
You can use a div with negative right margin to get the top box extension, along with a top padding on #navColumnTwo.

You do have the right column set in admin at 150px, while right column boxes are set at 170px. Harmonize those and see if it helps anything.