Tag Archives: CSS

Getting an HTML webpage to centre in all browsers

This is something I’ve got cross about faaaar too many times, so here is a simple explanation, for my reference and yours.

1) IE (being completely pants) requires that you text-align: center; the body element. You can do this in CSS:

body {
margin:0px;
text-align: center; /* align for IE */
}

…or in the tag itself:
<body style="margin:0px;text-align:center;">

2) Next, you need to undo that so that your text is left-aligned and actually centre your main wrapper div (using auto margins), as follows (again in a stylesheet or in the HTML itself):

div#maindiv {
margin:0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
width:1000px; /* or some other value */
border:0;
padding:0;
}

I like making my main div as thin as possible for the content, specified in pixels, so that the page works seamlessly on any size screen above that value. At the moment I tend to use a value around 800; wide enough for a sidebar and content, keeping up the good old LaTeX tradition of only having a thin column of text for readability, but that’s just a personal preference.


Subtheming in Drupal is really easy

I just created a Drupal Subtheme in about 20 minutes!

If you like the look (mostly) of one of the exiting Drupal themes, you can easily add a few customisations by extending a theme rather than starting from scratch. This is also a good way to start the development of a from-scratch theme, as you can build up some CSS and new logos and colours without losing most of the functionality until you are finished coding it all.

The first thing to do is create the bare minimum required to activate your theme. Go to the sites/all directory, and create the themes directory (if it isn’t already there). In there, create another directory with the same name as your theme (the machine readable name, all lower case, as opposed to the human readable name, which we will specify later). The rest of these instructions assume that you named your theme “theme”.

Next, you need to create a theme.info file. Below is a sample:

; filename theme.info
; $Id$
name = Human Readable Theme Name
description = a simple example theme that depends on the marvin core theme.
version = 0.1
core = 6.x
base theme = marvin

This is really all you need to create a theme; you will get an empty logo (replaced by a link called “home”), and you will have the rest of the marvin theme there to play with. To insert your own site logo, just drop a logo.png into your theme directory and you are done!

You can then add a stylesheet, which will allow you to override the marvin CSS elements one at a time as you develop your theme further. Just add the following lines to the info file:

; for the default stylesheets:
stylesheets[all][] = style.css
; for your own stylesheet:
stylesheets[all][] = my-styles.css

Where to go from there is up to you! You have the full armoury of CSS styling available to you. I recommend something like Firebug (Firefox plugin) for finding out the names of the different CSS elements you want to change, but you can just dive straight into the marvin CSS files if you prefer.

In a future post I will explain how to take an existing scheme (page and CSS) and turn them into the base for a Drupal theme (which may be more useful to people who want to change their CMS, or borrow a theme that they saw that was cool).