A different use for the blockquote object: code!

This is a tip – particularly useful for coders – sent by my customer Jörg (thank you!) that I’d like to share.

If you already know that you don’t need the “blockquote” object, you may find an alternate use of it. In this example, we will use it as a ready-made object for code. Of course you could add a raw html element and embed your code inside a “pre” tag, but it’s more work.

You can find any other use of your choice of it, if you have some recurring content that needs its own presentation and you still want to keep things simple and handy and avoid repetitive tasks.

In this example, we’ll accomplish this result using Hydrogen.

First of all, we need some insight into the code; there are many options: you can export your site and look through the main.css file, browse it from a browser and use its own Web Inspector or do the whole thing in Sandvox. We’ll try the latter, so we must activate the Web Inspector directly into Sandvox from the preferences dialog:

Go to Sandvox Menu > Preferences and check “Show Developer menu in menu bar”. Then, relaunch Sandvox.

Create a blockquote object, select some text and right-click on it. Choose “Inspect element” from the contextual menu: the lower side of the window will show the insights we need (clock on images to see them larger).

Inspect the blockquote object

Locate and select your blockquote object inside the code window: on the right side you can access all its properties.

Access its properties

We can see that Hydrogen’s blockquote has custom margins (20px 0px, but they’re good as they are so we will not modify them), padding (50px on the left, 40px on the right), text formatting (Georgia, italic) and a background (two backgrounds actually, which are the opening and closing quotes).

Check its properties

If you scroll down you can detect exactly where and when these properties are declared, and if they are declared by the design’s style sheet for the blockquote itself, if they are inherited, or if they are just default.

You can also take a look at some of these metrics graphically, clicking on the fourth tab:

Check its size graphically

Let’s create a new style for our blockquote. We need the font to be monospace, the color to be darker, get the rid of the quotes (i. e. the background) and of the whitespace (padding) on both sides.

blockquote {
    font-family: "Courier New", Courier, Monaco, monospace;
    font-style:normal;
    background:none;
    padding:0;
    color:#333;
    min-height:none;
}

Let’s try something more creative and add a border and a slightly gray background, to make the code pop out of the page a bit more.

blockquote {
    font-family: "Courier New", Courier, Monaco, monospace;
    font-style:normal;
    background:none;
    padding:10px;
    color:#333;
    min-height:none;
    border:1px solid #CCC;
    border-radius:5px;
    background-color:#EEE;
}

Better, but we still have a problem: lines are too spaced and this isn’t good for code. It’s because lines are paragraphs, and we need to override this setting as well. As you can see, paragraphs have a 14px margin both on top and on bottom:

Fix paragraphs' height

Let’s add one line to solve this:

blockquote p {margin:0;}

Another option is to use an ordered list: this way your lines are even numbered!

Use an ordered list

Use this code just as a starting point. If your code doesn’t work, you might need to add an “!important” statement at the end of your property. Example:

blockquote p {margin:0;}

Doesn’t work? Try this (be careful: value – one blank space – !important – semicolon)

blockquote p {margin:0 !important;}

As I said, this is just a draft: how to tweak it and to make it valid is entirely up to your skills, your goals and how much fun you’re having doing this.