Making a sidebox with fixed height

[tpeck]

How do I go about making a sidebox (defined with the defined pages editor) a fixed height? The box settings in stylesheet_boxes.css are global. How do I set a height, say, of 60px to a particular sidebox called editable_sidebox4.php?

/* ----------------------- BOXES ------------------------- */

.box {margin-bottom:2px;}

.box_border {border:1px solid #C1C1C1; padding:5px 15px 5px 10px;}


.box_head {padding:7px 8px 11px 21px; background:url("../images/h1_ic.gif") top left no-repeat; border-bottom:2px solid #E1E1E1;}

.box_head {color:#363636; text-decoration:none; font-size:14px; line-height:normal; font-weight:bold;}
.box_head a {color:#363636; text-decoration:none;}
.box_head a:hover {text-decoration:underline;}

.box_body {color:#302B2C; margin:0; padding:8px 0 3px;}
.box_body a {color:#302B2C; text-decoration:underline;}
.box_body a:hover {text-decoration:none;}

.box_body ul {margin:0; padding:0; list-style:none;}

.box_body ul li {padding:3px 0 0px 0px;}
/*.box_body ul li {padding:3px 0 4px 17px;} */

.box_body ul li a {text-decoration:underline; background:url("../images/arrow_1.gif") top left no-repeat; padding-left:17px; color:#302B2C;}
.box_body ul li a:hover {text-decoration:none;}

.box_body ol {margin:0; padding:0; list-style:decimal inside;}

.box_body ol li {padding:3px 0 4px 1px; font-weight:bold;}
/*.box_body ol li {padding:3px 0 4px 15px; font-weight:bold;} */

.box_body ol li a {text-decoration:none; color:#302B2C; font-weight:normal;}
.box_body ol li a:hover {text-decoration:underline;}

[schoolboy]

This will require that you get into the php code of the template file for that specific sidebox, and that you "customise" the element's ID or CLASS descriptor that builds the HTML for that sidebox.

It looks like a CLASS setting (.box), so in the php template file for that sidebox, find the string " .box ", and add in some additional text that makes it unique... EG: .boxFour .

Then, in the boxes stylesheet, create appropriate declarations for:

.boxFour {height: 300px;}

[schoolboy]

PS: REMEMBER... as you have "over-ridden" .box with .boxFour, you are going to have to copy other style declarations from the .box declarations, in order to ensure consistency in other, generic styles for the boxes.

[tpeck]

Thanks! - I'll give that a shot tomorrow...

[tpeck]

I just did it now:

1. includes/templates/your_template/css/stylesheet.css

.sideBox4Content {height: 60px;}

2. includes/templates/your_template/sideboxes/tpl_editable_sidebox4.php

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBox4Content">';

I should probably add that these sideboxes are created using an add-on called Editable Sidebox.

Thanks again 'schoolboy' for putting me on the right track!

[schoolboy]

Great...

...although I do see:

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBox4Content">';

which should allow you to create custom CSS for the individual boxes' DIV id's as well, as the relevant ID is parsed into the HTML at this point.

[gjh42]

Or, since you have created the new sidebox with the name of editable_sidebox4, the view source should have a line which includes an id of editable_sidebox4 (unless Template Monster has deleted the box id output from its code). If you are unsure about the box id, let us see your site live and we can tell you what it is if it is there. You can then use the box id in your stylesheet to control that particular box without upsetting any existing styling.

The line shown will work as schoolboy says to control the content of the box (everything below the box heading). This is probably all you need for your current purpose, but if you want to affect the whole box, use the overall box id.

[tpeck]

OK: it's aapress

I'm trying to add the Google+ and Facebook buttons in sideboxes (Google+ doesn't work yet for some reason).

[gjh42]

The ids you can use to control the boxes are #editablesidebox4 {} for Google and #editablesidebox3 {} for Facebook.