Why Do This?

This post involves editing your blog theme’s “.css” or Cascading Style Sheet, most likely the main Style Sheet.  Cascading Style Sheets are a marvelous new1 (be sure to see the foot-note for interesting history of CSS) style sheet language. Every colour, font, margin, border, layout, menu, and placement of everything on your blog is designated by what bloggers call its “theme”, but the theme you see is really composed of mainly .css pages so by learning to edit your blog’s theme’s .css page you can customize your entire blog in every way imaginable and even create your own themes! Learning how to tweak your blog’s theme’s css is momentously useful and awesome!

After this post you will know how to customize much of that! So really this is about making your blog more you and enacting upon your privilege to customize every appearance nuance that you want! By the way, CSS and HTML both can “style” or “format” web content but, CSS uses coordinates for layout and much many more advanced features leading to limitless or infinite layout and format options!

Accessing Your Style Sheet

  1. In wordpress you’ll want to look in the left-hand menu and click Appearance—>Editor. This will pull up a page that on the left-hand coloumn has a bunch of links of .php and .css pages.
  2. Don’t worry about the .php (and even most of the .css) pages for now. All of those links by the way compose the entire formatting of your blog’s theme! You want to find your main CSS sheet. Usually this is called “style.css”. It also may be “main.css” or something of a similar prominent-sounding name.
  3. AFter you have pulled up your main stylesheet, henceforth referred to as “style.css” for purposes of clarity, use your browser’s Search/Find feature to search for “blockquote”. If you cannot find it, do not fret, just append the following code to the style.css page (and if you can find it, replace the blockquote{ other code here} code with this):

blockquote {background-color:#FACC00; font-style:italic;border-left:4px solid #111; border-right:4px solid #111;margin:15px 30px 0 10px;padding-left:5;}

Now if you don’t customize that…

Customizing Your Blockquote Code

But this is about customizing your blockquote appearance, so I’ll deconstruct and describe every inch of that code so you can customize things how you wish!

  • background-color:#FACC00 – This is the background color of every blockquote. Normally this is white (#FFFFFF) by default. That rich orange hue corresponds to the hex-number FACC00. Hex-numbers are always six alphanumeric digits composed of A-F and/or 0-9. Those six alphanumeric numbers correspond to a color! You can gather an always-six-alphanumeric-digit hex-number for the colour of your choice from a nifty color-picker that provides you with the hex-number. Eliminating the background-color: attribute makes the blockquote background white.
  • font-style:italic; – Eliminating this code simple makes the font non-italicized.
  • border-left (and border-right) – This is slightly more advanced but very fitting for the customization of our blockquote. The two black bars are created by the border-left and border-right code. The colour of them (in this case black) and the width (in this case 4 pixels) are, of course, customizable. You can optionally choose to leave one out (to have only one column for your blockquote) or to exclude them both (no border-columns). Additionally, if you so desire, you can include a full rectangular border with the addition of border-top and border-bottom attributes! The cutomization features of CSS are marvelous and you can really get your pages and blog or site to look exactly how you envision!
  • padding-left – This attribute is practically identical to the “indentation” component of a word-processor. Except that a word-processor uses measly old inches or centimetres (usually) instead of the superior pixel. Furthermore, unlike a word-processor, the padding-left css “indent” is universally interpreted by every major browser! In other words, padding left indents the blockquote (border(s) included) a certain amount. In the above example, the amount is five pixels. If you really want to differentiate your quote from normal text, you might want to increase this number to make the blockquote really stand out via indentation.
  • important stuff – Every css property (padding-left, font-style, and background-color are three examples of properties) has the format property:value;. Note the colon that separates the property from its appearance-changing values and the semicolon which always separates a property-value set. The semi-colon (practically universal in code and various programming languages) allows you to have many different property-value pairs on the same line without the browser getting confused because they’re separated with semi-colons.

I’ve included some very usefull CSS quick-references here, from w3schools, and here from javascriptkit. The former, w3schools, includes links to almost every property of every attribute, providing a freakishly complete reference for almost every customizable feature of the awesome style and formatting code of css! Additionally, this is a great alphabetical reference of every css property (and corresponding values).

So to conclude our little tutorial. Just edit the blockquote{} code how you want, save the style.css, and reload a blog or site page that contains a to see the sparkling new changes!

1.  Fairly new.  Cascading Style Sheets actually have quite a lengthy history dating back as far as the 1970s with SGML.  The first version of the modern version of Cascading Style Sheets (CSS v1.0), however, emerged in December of 1996.

Advertisements

About thegeekoflinux

I like code, webdev, python, gnu/linux, math, command-line interface, classical music, and video games.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s