All 1 entries tagged CSS

View all 27 entries tagged CSS on Warwick Blogs | View entries tagged CSS at Technorati | There are no images tagged CSS on this blog

July 20, 2006

Poetry in blogs

I had a request for advice on how to format poems in blogs. This can be achieved with the addition of a little css code.

There's a lot of poetry in Warwick Blogs. I will refrain from making aesthetic judgements on a literary form that I know little about. So here's a poem by Pablo Neruda, assuming that his work is the kind of thing that slightly romantic motorcyle travellers should recite. It is followed by details of the css code and how to use it.

‘Leaning into the afternoon’
VII From:’ Veinte poemas de amor’

Leaning into the afternoon, I cast my saddened nets,
towards your oceanic eyes.

There, in the highest fire, my solitude unrolls and ignites,
arms flailing like a drowning man’s.

I send out crimson flares across your distant eyes,
that swell like the waves, at the base of a lighthouse.

You only guard darkness, far–off woman of mine,
from your gaze the shore of trepidation sometimes emerges.

Leaning towards afternoon, I fling my saddened nets,
                     into the sea, your eyes of ocean trouble.

The night–birds peck at the early stars,
that glitter as my soul does, while it loves you.

The night gallops, on its mare of shadows,
spilling blue silken tassels of corn, over the fields.

…OK, time to forget those silken tassles and the far–off woman. What about the css? A while ago it became possible for blog owners to add extra styles to their blogs using the CSS language. To do this, you create a named style with a definition of what that style is like, and copy that definition into the textbox at the bottom of the Appearance page in the Admin section of your blog. In this case, I have added a defintion called "poetry". It looks like this:

.poetry {margin-left:100px; margin-right:50px; font-family:verdana}

The effect of this is to indent the poem text 100px from the left of the blog entry, 50px from the right, and with the font verdana. You can adjust these as required, or leave out elements of the style such as the font. I have written a previous entry on doing this in Warwick Blogs for other effects such as highlighting. A good place to find out about css and other style attributes is the W3Schools css documentation and tutorials.

To apply this style to the poem text, the whole block of text needs to be wrapped in a "div" element with the class "poetry". In the blogbuilder entry editor, this looks as follows:

<div class="poetry">
Leaning into the afternoon, I cast my saddened nets,
towards your oceanic eyes.
…more lines of poetry

Warning!: make sure that you don't forget the closing </div> tag, otherwise your whole blog will end up looking rather odd.