By droople on

Could someone please tell me how best to position custom blocks in header

eg. centre blocks, align to therigh/left, have 2/more blocks side by side

thank you

⋅ Categories: Drupal 4.7.x

Comments

dman’s picture

dman commented

So you've tried?
And given them the right weights?

maybe in your theme css add #header .block{float:left;}

for more info, search on CSS handbooks

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

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

Zoologico’s picture

Zoologico commented

I tried the handbook, but it only allows vertical placement using weight. This is great for left and right columns, but not so much for the header.

http://drupal.org/node/21869

Once you have configured a block to appear as required on specific pages and in the correct column, you may wish to adjust the block's weight to position the block vertically within its column. A block's weight is set via a pull-down selector on the block management page. Heavier blocks (those with a more positive weight) "sink" to the bottom of a column, while lighter blocks "float" towards the top.

There doesn't seem to be a way to set the header's horizontal placement from the UI as far as I can see.

Did I miss something?

dman’s picture

dman commented

The weight doesn't position things vertically by pixel, it just defines the order in which the html is output.

If the elements are block-level elements, (divs) this usually means an implict clear will happen between them and they will be displayed by the browser vertically.

However, if you float those same elements, or change them to display:inline or display:inline-block ... the rendering of them should flow horizontal.

It's your theme and your CSS that needs work - the Drupal UI gives you total control of the ordering of the elements, but you have to define the rules for rendering them.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

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

Zoologico’s picture

Zoologico commented

I looked into the theme's (Garland Minnelli Fixed default theme btw) CSS file and found this code below pertaining to the header region (based on their names).

I added "display: inline;" and "display: inline-block;" to each region section one at a time and none of them worked to display the header components "inline". If there was already a display property, I removed it and added what you told me to.

How do I go about using the float feature you mentioned?

#header-region {
  min-height: 1em;
  background: #d2e6f3 url(images/bg-navigation.png) repeat-x 50% 100%;
}

#header-region .block {
  display: block;
  margin: 0 1em;
}

#header-region .block-region {
  display: block;
  margin: 0 0.5em 1em;
  padding: 0.5em;
  position: relative;
  top: 0.5em;
}

#header-region * {
  display: inline;
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 0;
}

#header-region p, #header-region img {
  margin-top: 0.5em;
}

#header-region h2 {
  margin: 0 1em 0 0;
}

#header-region h3, #header-region label, #header-region li {
  margin: 0 1em;
  padding: 0;
  background: none;
Zoologico’s picture

Zoologico commented

Added this as well and no change:

#header .block {
float:left;
}

Zoologico’s picture

Zoologico commented

So is the answer that this cannot be done using the CSS?

mlarose’s picture

mlarose commented

I needed to align a header block on my website for an ad. I edited the style.css file of the garland theme to this. Seems to be ok for now. Not sure if this helps or not.

#header-region .block {
display: block;
margin: 0.1em auto 0.1em auto;
width:75%;
}

--
Mike
http://www.laroseweb.com

bfsworks’s picture

bfsworks commented

I have tried all I know in style.css to center placed blocks in the header. Can anyone please point me in the direction of how to center blocks in the garland theme header.

Thanks in advance.

bejayoharen’s picture

bejayoharen commented

Appologies if I am not using the right terminology, but what I have discovered is that if you have custom colors, or perhaps other custom settings in your garland theme, you must save the custom settings so that your customized style.css file is pushed out to your custom style folder. I found that

#header-region .block {
  display: block;
  //margin: 0 1em;
  margin: 0.1em auto 0.1em auto;
  width: 75%;
}

worked fine for me once I did that.