Editable Home Page Centerboxes [Support]

Description

Editable Centerboxes is a simple module which adds three editable content boxes to the home page. I got the idea because I was trying to do something similar to this:

• osc.template-help.com/wt_27414/index.html
• osc.template-help.com/wt_26807/index.html

Each centerbox has an associated defined page which can be edited using the defined pages editor.

Ready to get started? Just follow the installation instructions below: Note that the module only makes small changes to one pre-existing files!

I'm submitting this to the downloads section tonight. You'll find it there when it's activated.

Hope others find this useful..
!!READ EVERYTHING!!

I very strongly recommend you read through the entire Readme file BEFORE installing.


[EDIT: Renamed to centerboxes for consistency with Zen Cart names]

Nice mod idea.

Looking FWD to testing it when it is uploaded.

Muzz:

Nice mod idea.

Looking FWD to testing it when it is uploaded.

Thanks.. If you want to try this little mod out now, PM me your e-mail address, and I'll be happy to share the zip file with you.. (Hope the admins don't object..)

Here's a test page with the middleboxes in use:
http : // zen138 . overthehillweb . com

All official and approved.. Here's the official link to the download:
http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=1562

Have the same problem as your own test page with middle box 3. Screenshot is from your test page link.

Streaming:

Have the same problem as your own test page with middle box 3. Screenshot is from your test page link.

You'll need to adjust the width of the content boxes to correct this.. This is a tableless design and with three boxes it presumes that each will only take up a third of the space. You'll notice that I have decimal values. I added those because when I was testing, I was trying to get the entire block of boxes to center, and could only get it to occur when I added the decimal values to the width.. Maybe a CSS gru can point out a better way to do this.. I'll be happy to correct the module and resubmit..

#middlebox_1 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
float:left;
width:33.1%;
background:#e0d0d0;
}

#middlebox_2 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
float:left;
width:33.32%;
background:#c0c0c0;
}

#middlebox_3 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
float:right;
width:33.1%;
background:#e0d0d0;
}

DivaVocals:

You'll need to adjust the width of the content boxes to correct this.. This is a tableless design and with three boxes it presumes that each will only take up a third of the space. You'll notice that I have decimal values. I added those because when I was testing, I was trying to get the entire block of boxes to center, and could only get it to occur when I added the decimal values to the width.. Maybe a CSS gru can point out a better way to do this.. I'll be happy to correct the module and resubmit..

Try this.. Replace lines 1-26 with this:

/*Centers middleboxes and aligns them in one row*/
#navColumnMiddleWrapper {
    margin: auto;
    }

#middlebox_1 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left; 
    width:33%;
    background:#e0d0d0;
    }
    
#middlebox_2 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left;
    width:33%; 
    background:#c0c0c0;
    }

#middlebox_3 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left; 
    width:33%;
    background:#e0d0d0;
    }

Ok, thanks for that. Have changed the code to the following which has worked fine:

#middlebox_1 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
	float:left; 
	width:32.9%;
	background:#e0d0d0;
	}
	
#middlebox_2 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
	float:left;
	width:33.15%; 
	background:#c0c0c0;
	}

#middlebox_3 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
	float:right; 
	width:32.9%;
	background:#e0d0d0;

Cool! :cool:

Streaming:

Ok, thanks for that. Have changed the code to the following which has worked fine:

#middlebox_1 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left; 
    width:32.9%;
    background:#e0d0d0;
    }
    
#middlebox_2 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left;
    width:33.15%; 
    background:#c0c0c0;
    }

#middlebox_3 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:right; 
    width:32.9%;
    background:#e0d0d0;

In the middle of a brainstorm. Where's the code for changing the Heading Titles to my own customized headings i.e. changing middle box 1, 2 and 3 to my own titles?
Many thanks.

Streaming:

In the middle of a brainstorm. Where's the code for changing the Heading Titles to my own customized headings i.e. changing middle box 1, 2 and 3 to my own titles?
Many thanks.

This is setup just like the sideboxes, so it will be in the language files.. I'm at work right now so I don't have the mod in front of me.. But it should be fairly obvious..:smile:

Said I was in the middle of a brainstorm:blush: Took me all of 2 minutes this morning to change it:smile:
Thanks a lot, your help is much appreciated.

So I think I've finally nailed what the stylesheet SHOULD look like..:clap:

I wasn't happy with the entering, and withthe fact that the boxes wouldn't all be the same length if one box contained slightly more content than the others.

I used these resources:
http://www.cssplay.co.uk
http://www.dustindiaz.com/min-height-fast-hack/

These site's helped me nail down how to get all the boxes to display correctly at the same height in both IE and Firefox.

I've tested this and good news is that it appears to work with both IE :censored: and Firefox.. I've posted the stylesheet with the changes here in case anyone wants this right now.. However, I will be submitting an update to the add-on to the downloads section this weekend.. If anyone spots flaws in my CSS I would love some feedback..

In the meantime, hope others find this helpful/useful!

#navColumnMiddleWrapper {
    margin: auto;
    overflow:hidden; 
    }

#middlebox_1 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left; 
    width:33%;
    }
    
#middlebox_2 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left;
    width:33%; 
    }

#middlebox_3 {
/*DO NOT MODIFY THE FLOAT OR WIDTH UNLESS YOU KNOW WHAT YOU ARE DOING!!*/
    float:left; 
    width:33%;
    }

#middlebox_1, #middlebox_2, #middlebox_3 {
    margin: 1px;
    padding-bottom: 1em; 
    margin-bottom: 1em;
    }    

h2.middleBoxHeading, h2.middleBoxHeading a {
    font-size: 2em;
    color: #ffffff;
    }

h2.middleBoxHeading a:hover {
    color: #FFFF33;
    text-decoration: none;
    } 
    
.middleBoxHeading {
    margin: 0em;
    background-color: #FF6699;
    padding: 0.5em 0.2em;
    text-align: center;
    }

.middleBoxContainer {
    margin-top: 1.5em;
    }

.middleBoxContent {
    padding: 0.4em;
    min-height:300px;
        /*Another stupid IE hack. The next two statements set min-height in IE's dumb-a$$ed browser*/
    height:auto !important;
    height:300px;
    }

.middleBoxContent {
    padding-bottom:32767px;
    margin-bottom:-32767px;
    }

#middlebox1Content {
    background:#e0d0d0;
    }
    
#middlebox2Content {
    background:#c0c0c0;
    }

#middlebox3Content {
    background:#e0d0d0;
    }

I installed this on my test home computer before installing it on my hosting system. I got info. in the middle - no colored header like my side boxes have and how do I place them beside each other?

Thank you
LadyDee

It sounds like you don't have the stylesheet correctly applied. Check the folder location of the mod's stylesheet and its content *on your server*.

Thank you, yes that was the problem.

LadyDee

Could you please tell me how to add three more boxes to the center? I would like to have 6 instead of three and I am not sure of everything tha has to be changed or added to.

Thank you
LadyDee

of

deemurphy:

Could you please tell me how to add three more boxes to the center? I would like to have 6 instead of three and I am not sure of everything tha has to be changed or added to.

Thank you
LadyDee

It's a fair amount of work which requires cloning the sideboxes, and then setting up the stylesheet to show two rows of three boxes in the same tableless style as the existing module uses... (IMO the discussion how to execute this might be a bit off topic for this thread..)

Bottomline is that what you are asking for is not a quick thing to do.. For me it would require DOING the work just to SHOW/EXPLAIN to you how to do it.. Work, clients, and family commitments have me pretty busy right now.. I'm afraid that I can't commit the time to volunteer doing work like this right now..

Sorry that's probably not the answer you wanted to hear..:no:

No it is not, however I appreciate the fact that you responded to me to let me know that it was not as easy as I thought. I was thinking I could just copy some files and rename them.

LadyDee

**deleted**