gjh42:
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:laugh: 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..:huh:
My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.
