Make Your Own Blockquotes
From Homestar Runner Fanstuff Wiki
Why should YOU sit around waiting for an admin to make a blockquote style for your OCE or WUE when, with some simple CSS, you can make your own? Just a few simple steps and voila! - you have your very own blockquote. By The Mu.
NOTE: If I was wrong about any CSS labels, notify me on my talk page.
Contents |
Note on Hexadecimal Colors
See here for a good list of hexadecimal colors. A more comprehensive guide can be found here.
The Steps!
1. Decide on your layout!
First, you will need to decide what your text will look like. What will the border look like? The font? The font size? The background? Will you have a reflection? Ask yourself these questions, and answer them.
2. Make your reflection!
2A. Draw it!
You will have to draw your reflection first. If you have an OCE, that's easy - just find a toon with your character in it, press "Print Screen/SysRq", go into Paint or an image editor that you're comfortable with, and press Ctrl+V! Then edit it to have the color match the background color.
2B. Save it!
What file type, what file type? That is the question, isn't it? If you are using Imageshack to host your files, you're pretty much safe with any type - except for Photoshop's default type. If you don't use Imageshack, you should use *.PNG files.
2C. Upload it!
Use Imageshack or MediaWiki's uploading system to upload your picture!
2D. Get the URL!
If you used Imageshack, you're pretty well off - it straight-out tells you the URL of the image (look under "Direct"). But if you used MediaWiki, you have to go to the page it tells you that you can visit it at, right-click the picture, select "Properties", and get the URL. Save the URL for later.
3. Make the CSS for the body text!
Here we get into the fun part - messing with CSS. Let's look at a typical blockquote class CSS structure and then break it down.
blockquote.class {
border: (width)px solid #color;
background: #color;
background-image: url('background-image-url');
background-repeat: no-repeat;
background-position: position;
color: #text-color;
font-weight: bold|italic|underline;
padding: (width)px;
font-family: font-face;
width: (width)px;
}
3A. Break it down, now!
OK, I've probably overwhelmed the non-CSS-educated among you. Let's take a closer look, line-by-line.
blockquote.class {
This is just saying that if the <blockquote> tag has a class of class, the following instructions will apply to it.
border: (width)px solid #color;
This sets the border width, says that it's a solid border, and it's #color in hexadecimal colors. The semicolon at the end is mandatory for each line.
background: #color;
This says that the background is a certain hexadecimal color.
background-image: url('background-image-url');
This is where Step 2 comes into play. This is telling the web browser that it should load this image.
background-repeat: no-repeat;
Don't edit this line, or you could end up with multiple reflections.
background-position: position;
This tells your browser the position of the image it just loaded. The variable position is a term such as top right, bottom center, etc.
color: #text-color;
This says that the color of the text is #text-color in hexadecimal.
font-weight: bold|italic|underline;
This signifies what formatting in terms of bold, italic, or underline the text should have. If you want no formatting, you can skip this line.
padding: (width)px
This marks how far away from the border the text should be.
font-family: font-face
This is the font that the blockquote should use.
width: (width)px;
This marks the entire width of the blockquote, from border to border. Most blockquotes use 500px.
}
Ahh! The end of the formatting! Now, on to subject lines. You're almost through!
4. Make the CSS for the subject line!
You will only need instruction on a few more CSS objects. Let's take a look at a typical one:
blockquote.class div {
background: #color;
margin: 0;
padding: (width)px;
}
4A. Brick-a-brick-a-brick-a-break it down, now!
Fairly simple, wasn't it? Here's a breakdown:
blockquote.class div {
Easy enough, this says that when the tag <div> is used within a blockquote with the class class, the following format will apply.
background: #color;
You know this line already. Next one, please!
margin: 0;
This is pretty much required to keep it in place.
padding: (width)px;
You know that one, too!
}
The easiest of them all. And, *gasp* you're finished with CSS!
5. It's time to play... Add the Blockquote!
Add the blockquote to the bottom of HRFWiki:Blockquotes/Code. You might have to go through several renditions till you get it just right, though.
And just like that, you're done!
Didn't work?
If you have tried numerous times to fix your blockquotes to no avail, you should check for these common and not-so-common mistakes.
Common Mistakes
These are fairly easy to make, and have been made often.
1. px|em
Up until recently, the widths have been in terms of "px|em". Unfortunately, most (if not all) people took this to mean that px|em was to be left alone. The actual code is "px" OR "em", take your pick. The most recent versions of this page switched them all to only "px", which is less confusing than "em".
2. Formatting
The <pre> and </pre> tags are NOT included in the actual blockquote. To create the pre effect, one must add an extra space to the beginning of each line.
3. Pictures
Although I've only seen two cases of this, it's two too many. It takes about the same effort whether you use Imageshack or MediaWiki. If you have a problem with your reflection, you should probably re-read this.
Not-so-common Mistakes
I've only seen these once, or twice if they are not easily replicated.
1. Background Position
If your reflection is on the left side, this will probably help. In the line
background-position: position;
the "position" variable is something such as bottom right, not bottom-right.
