Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How? Display boxes horizontally near footer.

How? Display boxes horizontally near footer.

Locked

Views: 2,198

Results 1 to 12 of 12
This thread is locked. New replies are disabled.
13 May 2008, 5:15 PM
#1
wattstubeaudio avatar

wattstubeaudio

New Zenner

Join Date:
Apr 2008
Posts:
3
Plugin Contributions:
0

How? Display boxes horizontally near footer.

I am using 1.3.8 and the default template.

I have modded the template a little and I have written a stylesheet to suit my needs but, I am stuck on this one. :frusty:

I modded tpl_main_page so the right sidebox is to be inserted underneath the main content. I styled out the right sidebox to the correct size etc...

Now, the reason I did that is I THOUGHT that I could get a couple/three "sideboxes" to fill that space horizontally. That way I can call up three sideboxes with similar heights to appear below the main page content.

I adjusted box 150px and column width 500px in the admin panel " /configuration/layout setings" as well.

How in the heck can I get them to appear in a row instead of vertically?

I am sure the answer resides in a loop somewhere in
tpl_box_default_right.php
and/or
column_right.php

I REALLY appreciate any assistance. :clap:

14 May 2008, 1:32 PM
#2
wattstubeaudio avatar

wattstubeaudio

New Zenner

Join Date:
Apr 2008
Posts:
3
Plugin Contributions:
0

Re: How? Display boxes horizontally near footer.

Nobody?

What about modding tabular_display and renaming it? :lamo:

I know this is an "easy" mod for someone out there! Just not me. :blink:

Thanks in advance....

14 May 2008, 3:19 PM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How? Display boxes horizontally near footer.

You say you modded tpl_main_page.php. What changes did you make? The best way to get the sideboxes horizontal can't be known without this information.

Did you change the contentMainWrapper table layout to put the navColumnTwo cell below the center column cell?

Floating the boxes right or left may let them arrange themselves the way you want.

15 May 2008, 3:12 PM
#4
wattstubeaudio avatar

wattstubeaudio

New Zenner

Join Date:
Apr 2008
Posts:
3
Plugin Contributions:
0

Re: How? Display boxes horizontally near footer.

Thank you, I knew someone would help.

Yes I modded tpl_main_page considerably. Also wrote a new style sheet since my template is really quite different. I did keep some of the basic text, alert and other "not up front" styles of the default css to save time. All the common templates are totally different now as well, needless to say. I continually test in FireFox, IE6, IE7, and IE 8 beta as I go to prevent and major time wastes after the fact. I still however, may have to break off a couple sections of the stylesheet and use browser a detection script for the big differences. So far it is ok but, not uhh "perfect' without doing that.

I took a minimalists approach and built up from there. I wanted the style sheet and main site templates to end up with way fewer lines code and way less divisions than the original default without touching the core. That took me two weeks alone. I also wanted it to be themeable with diff graphics packs of my flavor. So I just make a new set of graphics, upload them and bam, a whole new cart theme without modding my style sheet. I am working on a crude text/link color selector in admin side now for when the theme colors change dramatically. A little PERL script (I am pretty new to PHP and PERL is way easier for me) that saves to a flatfile which serves as an alternate css snippet for text control. So far so good.

It was the float value you mentioned that did it. I was too close to see the obvious. Seems to be working well now with just some minor cross browser differences. I do like firefox better but, my other sites stats show that ~90% of the visitors are IE. Far better than 3% of firefoxers two years ago. Surfers are getting wiser to IE issues and using firefox more and more!

Keeping a site appearing "identical" cross browser is a chore for me. One or the other is easy. I spend more time on this area than a complete graphics wrapper/theme. I do not make sites, I make tube amps. So all this is quite a learning curve for me.

Thanks again for your response! Really helped out. :clap:

9 Jan 2009, 1:47 PM
#5
nikki72 avatar

nikki72

New Zenner

Join Date:
Dec 2008
Posts:
97
Plugin Contributions:
0

Re: How? Display boxes horizontally near footer.

could you please tell me how did you get the right boxes to appear in the center? thanks

9 Jan 2009, 2:31 PM
#6
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How? Display boxes horizontally near footer.

I don't know the details of what WattsTubeAudio did, but in basic terms, you could achieve this layout with a couple of minor tweaks to the <tr> and <td> arrangement in the single layout table in #contentMainWrapper, in /includes/templates/your_template/common/tpl_main_page.php.

Then in the stylesheet, make .rightBoxContainer {float: left;}, and probably a few other minor tweaks depending on the particular circumstances. Post a link to your site if you need more specific advice.

9 Jan 2009, 5:33 PM
#7
nikki72 avatar

nikki72

New Zenner

Join Date:
Dec 2008
Posts:
97
Plugin Contributions:
0

Re: How? Display boxes horizontally near footer.

Here is a link to my test site. It's not live yet. I just installed better categories and fly out menu, the color scheme on the boxes are not my finished product lol.

http://2antioch.org/store/index.php

Thanks for your help.

Is there away I can change it on every page, not just the index.php?

10 Jan 2009, 8:08 AM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How? Display boxes horizontally near footer.

Good news! Your template (cherry zen) significantly modifies the standard page organization, and while that would usually not be a good thing for further customization, this template is set up for easy CSS manipulation.

There will be a number of things you will have to change, starting with a main background image, but you can get a taste of the possibilities with a quick paste into your stylesheet.
Find this:.leftBoxContainer, .rightBoxContainer { margin: 0em; border: 1px solid #CECECE; border-bottom: 5px solid #CECECE; margin-top: 1.5em; }and after it add this:```
.rightBoxContainer {
margin: 0; width: 30% !important; float: left;}

#navColumnTwo {clear: both; width: 100% !important;}

#navColumnTwoWrapper {width: 100% !important;}


These changes will apply to every page on your site, unless you add rules to specify otherwise.
10 Jan 2009, 5:20 PM
#9
nikki72 avatar

nikki72

New Zenner

Join Date:
Dec 2008
Posts:
97
Plugin Contributions:
0

Re: How? Display boxes horizontally near footer.

ohhhhh thankssssssss!

I am at work so I only had time to paste your recommendation for effect.

Off the top of my head, I believe I need to take out the right col width for the main wrapper...right>? I don't want the blank space on the right of my site.

I also have to figure out how to space the boxes and center them.

10 Jan 2009, 7:57 PM
#10
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How? Display boxes horizontally near footer.

It looks like you have turned the right column off or set it to 0 width in admin. This will make it impossible to show the "right column" at the bottom. I can't diagnose the changes needed from where it is now; if you reset to what you had yesterday I can probably tell you what else the stylesheet needs. There will be some margin changes, since cherry_zen uses advanced CSS techniques involving negative margins and other things to get its standard layout.

22 Feb 2009, 8:38 PM
#11
boggled avatar

boggled

Zen Follower

Join Date:
Mar 2006
Location:
Tennessee
Posts:
286
Plugin Contributions:
0

Re: How? Display boxes horizontally near footer.

gjh42:

Good news! Your template (cherry zen) significantly modifies the standard page organization, and while that would usually not be a good thing for further customization, this template is set up for easy CSS manipulation.

There will be a number of things you will have to change, starting with a main background image, but you can get a taste of the possibilities with a quick paste into your stylesheet.
Find this:.leftBoxContainer, .rightBoxContainer { margin: 0em; border: 1px solid #CECECE; border-bottom: 5px solid #CECECE; margin-top: 1.5em; }and after it add this:```
.rightBoxContainer {
margin: 0; width: 30% !important; float: left;}

#navColumnTwo {clear: both; width: 100% !important;}

#navColumnTwoWrapper {width: 100% !important;}

> 
> These changes will apply to every page on your site, unless you add rules to specify otherwise.


Hi Glenn,

As you can see on my site <https://www.mybikergear.com> *(far from finished)* I'm using a heavily modified version of the Cherry Zen template.  

I added the above code to my stylesheet and the right sideboxes are displaying in the center now, BUT *(there's always one of those isn't there)* I can't get them to move up under the center column.   Despite trying several 'tweaks' to both the stylesheet and the tpl_main_page.php file, I still have a big gap.

I suspect it has something to do with the left column because on the product pages it is butted up under the center column like it should be.

I'm not sure where to go from here or what to change and ANY suggestions would be greatly appreciated! :smile:
22 Feb 2009, 9:37 PM
#12
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How? Display boxes horizontally near footer.

The clear: both; makes the right column stay below all other floated content (left and center columns). Getting that template to put the right column below only the center column will probably be tricky - it would be easier with the standard main layout table.