Editable Home Page Centerboxes [Support]

[DivaVocals]

To set standard middlebox wrapper styling in the stylesheet, change the
#navColumnMiddleWrapper {
to
.navColumnMiddleWrapper {
The #navColumnMiddleWrapper1 {} rules can then be added for any individual wrapper/group styling desired.

Without touching PHP files, there are already handles to address all middlebox headings:
.middleboxContainer h2 {}
or specific headings:
#middlebox_1 h2 {}

I don't recall how much I did with the stylesheet; it may want a makeover to reflect the full scope of the latest version.

Okay.. so based on your post I rolled back my changes to the middlebox_controller. Then I took a GOOD look at the stylesheet and I made the following changes.. I'd appreciate your feedback..

I replaced this:

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

With this:

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

#navColumnMiddleWrapper1 {}

#navColumnMiddleWrapper2 {}

#navColumnMiddleWrapper3 {}

#navColumnMiddleWrapper4 {}

#navColumnMiddleWrapper5 {}

#navColumnMiddleWrapper6 {}

#navColumnMiddleWrapper7 {}

I discovered that I needed to use the specific middleboxes styles to get the middlebox headings to format correctly..

For example... this worked:

#middlebox_1 h2, #middlebox_1 h2 a {
    font-size: 2em;
    color: #6f6c63;
    text-decoration: none;
    text-align: center;
    margin: 0em;
    padding: 0.5em 0.2em;
    }
#middlebox_1 h2 a:hover {
    color: #FFFF33;
    text-decoration: none;
    }

This did not:

.middleboxContainer h2, .middleboxContainer h2 a {
    font-size: 2em;
    color: #6f6c63;
    text-decoration: none;
    text-align: center;
    margin: 0em;
    padding: 0.5em 0.2em;
    }
.middleboxContainer h2 a:hover {
    color: #FFFF33;
    text-decoration: none;
    }

Finally, I added a border-radius setting to my own middleboxes (border-radius is not part of the default stylesheet). For whatever reason the border-radius was not being applied to the bottom of the middleboxes (the top of the middleboxes were rounded, but the bottom was not) until I added this:

.middleBoxContainer {
    margin: auto;
    overflow:hidden; 
    }

Not entirely sure why that worked, but that made the border-radius settings work on the bottom of the middleboxes..


Finally I removed all of these declarations as it appears that they are no longer needed:

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

#middlebox3Content {
    background:#e0d0d0;
    }
    
#middlebox4Content {
    background:#e0d0d0;
    }
    
#middlebox5Content {
    background:#c0c0c0;
    }

#middlebox6Content {
    background:#e0d0d0;
    }

#middlebox7Content {
    background:#e0d0d0;
    }

#middlebox8Content {
    background:#c0c0c0;
    }

#middlebox9Content {
    background:#e0d0d0;
    }

and here is the development site with all these changes applied: http : // clientlaserdiscvault (dot) overthehillweb (dot) com/

The only issue I am still trying to figure out (and could use a little help with) is how to get the border-radius bottoms on the middleboxes to display correctly in Opera.. The border-radius on the middleboxes appears correctly in every other browser I tested with with except Opera.. Can't figure this out..