By ica on

-currently you can place/assign many blocks to content, or footer regions..
(i'll give example of footer region)
-but..... they ordered vertically as below

_______________________footer_____________________________________
|_______________________footer block1______________________________|
|_______________________footer block2______________________________|
|_______________________footer block2______________________________|
but most of the blocks not too wide by default, so its waste of space and visually not appealing...NO good!

solution a css hack; position blocks as columns - that means 'footer' region' expands horizontaly not vertically

_______________________footer_____________________________________
|____footer block1____| |____footer block1_____| |____footer block1_____|

to do this alter your page.tpl.php

#footer {
display: block;
float: left;
}

#footer .block {
width: 200px; /* ** adjust this value to spread blocks in equally ie. if your theme with 800px 4 blocks x 200=800 */
display: block;
float: left;
}

⋅ Categories: Drupal 4.7.x

Comments

ica’s picture

ica commented

- i made a typo
you get the idea i guess, but just incase like to correct typo 'the 'drawing' should be as below

_______________________footer_____________________________________
|____footer block1____| |____footer block2_____| |____footer block3_____|

and
-to do this alter your page.tpl.php
should read
-to do this alter and add your page.tpl.php

btw- i can re-edit my comments but not my original posts.. I presume its default by drupal.org settings -some reason

Johnny5Step’s picture

Johnny5Step commented

I would love to use this footer hack but I'm not clear on what you're saying to do.

Do your notes mean to replace the current CSS in the Bluemarine style.css of

#footer {
  background-color: #eee;
  padding: 1em;
  font-size: 0.8em;
}

with

#footer {
display: block;
float: left;
}

#footer .block {
width: 200px; /* ** adjust this value to spread blocks in equally ie. if your theme with 800px 4 blocks x 200=800 */
display: block;
float: left;
}

or something else entirely?

I'm new to this, and your note seemed to be saying that this would be in the page.tpl.php file rather that the style.css file, but I couldn't find anything like that in the page.tpl.php file.

Thanks for any assistance,
Michael

ica’s picture

ica commented

Yes, you are right Michael, my typo correction was not proper correction i made in hurry i guess :)

it should read as;
---------------------
-to do this alter your page.tpl.php
should read
-to do this alter and add your themes/themename/style.css
---------------------
its a quick but working css fix not page.tpl.php

apologies

dman’s picture

dman commented

as blocks are usually tuned to look good tall rather than horizontal, this may be useful for taking advantage or the area.

http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

ica’s picture

ica commented

yes you are right... just apply if/when your design required a solution as above

this hack only fixes 1 row possibly 4 to 2 column..
maybe someone come up with solution to more rows

- and hopefully more radical solution to the core of Drupal with a module to take advantage of assigning infinite number of regions and rows and columns...
kind of improved block. module like dashboard.module for theme regions.

to give an example wordpress has something with widgets plugins drag and drop to 'sidebars' etc..

http://automattic.com/wp/wp-content/uploads/2006/03/widgets-admin1.png

it could be similar idea with or without drag and drops ie.-pull down and numbering options like in block.module like....

-add> region [number ie.4]
-add> row [number ie.2]
add> column [number ie.4]

etc.

ica’s picture

ica commented

Drupal can assign blocks to default header, content, left and right block 'regions'

this time take on the -header region and put for instance 3 blocks that you assigned on drupal admin/blocks

to exploit lesser used HEADER region l like to assign 'mini' size blocks of logintoboggan or language switch block and err.. search block on TOP of the HEADER...

I can do this by creating

|__login block__| |__language block__| |__search block__|

[_________________HEADER (region)_________________]

block-header is the css div for the 'region'
so on your theme css
--------------------------

#block-header {
width: 800px;
height: 60px;
/* **style the box as you like that is the holder/bacground of the top blocks */
}

#block-header .block {
width: 266px;
height: 60px;

/* ** adjust this value to spread blocks in equally ie. if your theme with 800px 3 blocks x 266=~800 */

display: block;
float: left;
} 
+
most themes put div id="block-header" below the  div id="header"
so if you want your mini blocks placed on the top of your header -logo etc.
you have to put div id="block-header" BEFORE the div id="header"

on page.tpl.php

<body<?php print $onload_attributes ?>>
<div id="content">

      <div id="block-header"><?php print $header ?></div>

  <div id="header">

-------------------

these are quick hacks.. i wonder if they also work for the drupal masses, if did and you might contribute further and i can put together all and post to theme hacks 'handbooks' if they are qualified

summit’s picture

summit commented

Hi,

I succesfully did the content-block changes to get the stuff horizontal!

If you want the solution to the beneeth question I will of course give it to you.
--------------------------------
I am a newbee in Drupal.
I would like to use the above hack in the content-region.
How can I do this.
I thought of doing this to: style.css:
#block-content {
width: 800px;
height: 60px;
/* **style the box as you like that is the holder/bacground of the top blocks */
}

#block-content .block {
width: 266px;
height: 60px;
/* ** adjust this value to spread blocks in equally ie. if your theme with 800px 3 blocks x 266=~800 */
display: block;
float: left;
}

and what to do with

in page.tpl.php or do I need to change node.tpl.php.

please help?
Thanks in advance,
Martijn
www.opinie.biz is my testsite for now

BobLouis’s picture

BobLouis commented

Hello, I created a new region (contenttop) that I previsously successfully created in page.tpl.php (see http://drupal.org/node/149623 )
Then I tried to apply your method:

#block-contenttop {
width: 800px;
height: 90px;
/* **style the box as you like that is the holder/bacground of the top blocks */
}

#block-contenttop .block {
width: 400px;
height: 90px;
/* ** adjust this value to spread blocks in equally ie. if your theme with 800px 3 blocks x 266=~800 */
display: block;
float: left;
}

But the blocks that I put into that region still tile up vertically, not horizontally.
What is wrong here?

ckeo’s picture

ckeo commented

I was thinking about this the other day...
but I had planned to use the panels module...
and select a 3 column layout.

summit’s picture

summit commented

Hi,

How did you succeed in being horizontal with your blocks in Panels?

greetings,
Martijn