How? Display boxes horizontally near footer.

[WattsTubeAudio]

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.

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.

[WattsTubeAudio]

Nobody?

What about modding tabular_display and renaming it?

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

Thanks in advance....

[gjh42]

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.

[WattsTubeAudio]

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.

[nikki72]

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

[gjh42]

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.

[nikki72]

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?

[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;}

For the actual edits, you will want to find the original rules and edit them, and make some settings in admin for Column Right width and Column Right Boxes width.

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

[nikki72]

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.

[gjh42]

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.