Making a sidebox with fixed height

04 Sep 2011, 10:40

#1

Zen Follower

Join Date:: Oct 2008
Posts:: 197
Plugin Contributions:: 0

Making a sidebox with fixed height

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

04 Sep 2011, 11:08

#2

schoolboy

Totally Zenned

Join Date:: Jun 2005
Posts:: 10,324
Plugin Contributions:: 0

Re: Making a sidebox with fixed height

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

04 Sep 2011, 11:12

#3

schoolboy

Totally Zenned

Join Date:: Jun 2005
Posts:: 10,324
Plugin Contributions:: 0

Re: Making a sidebox with fixed height

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.

04 Sep 2011, 11:16

#4

tpeck

Zen Follower

Join Date:: Oct 2008
Posts:: 197
Plugin Contributions:: 0

Re: Making a sidebox with fixed height

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

04 Sep 2011, 12:07

#5

tpeck

Zen Follower

Join Date:: Oct 2008
Posts:: 197
Plugin Contributions:: 0

Re: Making a sidebox with fixed height

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!

04 Sep 2011, 12:11

#6

schoolboy

Totally Zenned

Join Date:: Jun 2005
Posts:: 10,324
Plugin Contributions:: 0

Re: Making a sidebox with fixed height

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.

04 Sep 2011, 12:24

#7

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Making a sidebox with fixed height

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.

04 Sep 2011, 12:29

#8

tpeck

Zen Follower

Join Date:: Oct 2008
Posts:: 197
Plugin Contributions:: 0

Re: Making a sidebox with fixed height

OK: it's aapress

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

04 Sep 2011, 12:38

#9

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Making a sidebox with fixed height

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