karenak Crown

Tags  →  help




Here's the Categorian Beginner's First Aid Kit - CONTENTS



Background

Part One - Background Color

Part Two - Background Image

Part Two /a - Background with Photo

Part Two /b - Background Image Sizing

Part Three - Background for Blog Posts

Part Three /a - Background for Single Blog Posts


Blog

Part Four - Blog Width

Part Four /a - Move your Blog


Photos

Part Five - Photoblogging ? You can do better than that !

Part Six - How to post a photo and make it look good

Example - How to position text and images


Text

Part Seven - Let's talk about fonts

Part Seven /a - Fonts in the Style Sheet - CSS

Part Seven /b - Fonts in the blog posts - HTML

Part Eight /a - Text Formatting - Basics

Part Eight /b - Text Formatting - Columns



General Formatting

Part Nine - Simple Borders

Part Nine /a - Advanced Borders

Part Ten - Linking

Part 11 - Embedding



Troubleshooting

Part I - Completely messed up your layout ?

Part II - Bandwidth Exceeded



Do it yourself

Create a semi-transparent image


Addenda - PLEASE READ

Addendum I - Punctuation Is Powerful !



...to be continued


Suggestions for topics are welcome :-)








Here's the Categorian Beginner's First Aid Kit - Do it yourself - Semi-transparent image



How to create a semi-transparent image for your background


In Part Two /a of the Tutorials we learned how to use a semi-transparent image for our background. Here I want to show you how to create such a semi-transparent image.

This is done with a photo editing software. However, since there are thousands of such programs, I can realistically only show the principle involved and you'll have to see what your software of choice offers in that respect.

I do all my photo editing with Pixlr.com, a free online software that offers all the tools I need. To follow this tutorial just click the link and then select Create a new image





Start with naming the image. Then enter the width and height you want. (Ignore the presets).

I usually make mine very small (10x10px) so they load quickly and don't take up much space in my photo sharing account. However, 50x50px as in this example is ok too.

Most important: Click the Transparent checkbox !





1 Next we must select the color we want to use with the bucket tool. Double-click the black rectangle at the bottom of the toolbox, choose the color and confirm with OK.

2 Select the bucket tool.

3 Finally set the opacity. I usually create several images with varying opacity (80 / 70 / 60 / 50 etc) to see what looks best.




Then click File to save the image. Here it is essential, that you choose the right file type: PNG.



After clicking OK you get the usual file saving window.

When that is done, upload the image (or images) to your photo sharing account.





This picture shows you semi-transparent images in varying opacity: 80 / 70 / 60 / 50.






Now see Steps 2 and/or 3 in Part Two /a of the Tutorial to learn how to use it in your blog.


That is all :-)



>>>> Back to Index








Here's the Categorian Beginner's First Aid Kit - Part Eight /b



Text Formatting - Columns



CSS offers a columns property which is quite handy and allows us to ditch the tables which are so unwieldy.

However please note that so far Opera is the only browser that fully supports columns. Firefox, Chrome and Safari use a workaround and (unsurprisingly) the Internet Explorer cannot handle it at all. See example below.


Columns are defined as a class in the Style Sheet. It is really quite simple.



Add it to your Style Sheet

Click "Style" and add a new line at the end.

Since columns are for text, we simply use the P tag.


The code:

p.column { column-count: 2; column-gap: 25px; column-rule: 1px solid black; column-width: 150px; }

column-count defines the number of columns. Usually 2 or max. 3 columns look best. But that's up to you.

column-gap defines the space between the columns. The value is in px. Just test and see what looks good.

column-rule allows you to set a dividing line into the gap between the columns. It is optional. The definition is the same as with borders. So '1px solid black' will show a thin black vertical line.

column-width is optional too. The default value is 'auto' which means that your browser will calculate it for you. However, there might be cases when you wish to specify the width of your text.



Theoretically this would be all. However, as mentioned above, we'll have to think of Firefox, Chrome and Safari users. For Firefox we'll add a '-moz-' and for Chrome and Safari a '-webkit-'. So in fact we'll have to type the code 3 times in all. Like this:


p.column {
column-count: 2; column-gap: 25px; column-rule: 1px solid black; column-width: 150px;
-moz-column-count: 2; -moz-column-gap: 25px; -moz-column-rule: 1px solid black; -moz-column-width: 150px;
-webkit-column-count: 2; -webkit-column-gap: 25px; -webkit-column-rule: 1px solid black; -webkit-column-width: 150px;
}



Not difficult, just a bit irksome.

Click "Save"



How to use it


In your blog post type

<p class="column">

...type your text ...
and end it with

</p>



Example


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.



As you can see, you can easily format the text as you would any other text. So I inserted the image and used text-align:justify.

Code:

<p class="column" style="text-align:justify;"><img style="float: left; margin-right: 10px;" src="...path to the image..." width=80px;/>
...here comes the text... </p>



That is all :-)



>>>> Part Nine


















Here's the Categorian Beginner's First Aid Kit - Part Seven




Let's talk about fonts


As any web designer will tell you, fonts are essential.

However, there's this tiny little hitch about selecting that gorgeous font you found on one of those free-fonts sites: Nobody but you will be able to see it, because chances are that they haven't installed it on their comp.

Unless, of course, you ask dear Google for help. Google WebFonts is a service that allows you to choose any font you like and use it in your blog for anyone to see !



Here is how to go about it:



Step 1 - Select the fonts

Call up the page Google Web Fonts and have a look at the fonts offered there.

There are hundreds of font families to choose from. Select a font by clicking the blue button "Add to collection" on the right hand side.

If you selected more than one, click "Review" to compare the fonts.


Think carefully about what you want to do with the fonts. How many do you need ? What for ? Are you willing to use html in your blog posts ? If so, you can select more fonts because you can alternate between them according to what you are posting. If HTML is a big NONO for you, restrict yourself to one font for the blog posts and maybe one or two more for the banner and the header.

Remember: You can always come back and choose other or additional fonts...

When you made your decision, click "Use".

Now make sure that only the fonts you really want to use are checked. To begin with, select only the Normal fonts from each family. The others are hardly ever needed.



For all of us who get carried away the first time we test this, Google kindly provides a gauge that tells us how our font selection will slow down our page.

Go back to the "Review" page and do some more comparing.

Restrict yourself to maybe 5 fonts or so. Then look at that dial again. Make sure it's in the green before you get the code.








Step 2 - Get the code

Near the bottom of the page you'll find a blue box with the code.

Open the tab "Javascript"

Copy the highlighted code (beginning with "WebFontConfig" until just before </script>)








Step 3 - Where to place the code

In your blog click "Setup".

At the bottom of the page you'll find a textbox. Paste the code into it.



(don't worry, Matt has given his permission *g)

Click the "Save" button right above the box.




Step 4 - Adjust the Style Sheet

Go back to the Google WebFonts page and look at the code for the Style Sheet. (where it says "4. Integrate the fonts into your CSS")

It will show you a code line for each font you selected.

Example:

font-family: 'Sonsie One', cursive;

In your blog click "Style" and search for "font".

Now either replace the existing fonts or add the new one as the first of the listed fonts. Don't forget the comma and make sure there are no typos.

Example:

.review div.text { font: normal 100% 'Sonsie One', cursive; }

or

.review div.text { font: normal 100% 'Sonsie One',arial,helvetica,sans-serif }



Now click "Save" and that's it :-)




....unless

Unless you want to follow me to the second part of this tutorial (Part 7/a), where I'll explain in detail what and where and how to place the fonts in the style sheet to achieve the best effect, what you can do font-wise with HTML in your blog post and some other advanced info for those not scared of code :-)




This tutorial was brought to you by Matt, who had the idea, Lance, who had the know-how, and myself who had the tutorial template :-)



>>>> Part Eight










Here's the Categorian Beginner's First Aid Kit - Part Seven /a




Let's talk about fonts (2)

This part of the tutorial will show you how to set the font for each part of your page.

I do not - repeat: NOT - advise you to select a different font and/or color for each part. Just pick the part that you want to change out of the list of examples below.




The Original Style Sheet


First let's have a look at the original:






body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }






One for all


In order to set one font for the entire page, all you have to do is to add the font definition to the body section of your style sheet and remove it from the .review div.text section.

In this example the entire blog is set to use the font "Jura" in the color green. Only the links remain blue because they are specifically set to "blue" in the line below the body section. You can change that blue to any color you like of course.

Compare the two style sheets to see the changes made in this example:






/* Sets the font for the entire blog */

body { background-color: white; font: 100% 'Jura', sans-serif; color: green; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { }







One each


This example shows how to set font and color for the various sections of the blog. Each section has its own font and color to make it easier to identify.







body { background-color: white; font: 100% 'Verdana'; color: black; }
#acctnav a { font: 90% 'Jura'; color: purple; }
.pagetitleblock { font: 120% 'Kaushan Script'; color: teal;}
.pagecommands a {font: 90% 'Istok Web'; color: red; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.headpost {font: 100% 'Jura', sans-serif; color: blue;}
.review a { font: 100% 'Istok Web', sans-serif; color: navy; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: 100% 'Jura', sans-serif; color: green; }
.review div.text a { font: 100% 'Jura', sans-serif; color: orange; }



  • body
  • Use the body section to set a default font for your blog. It will show everywhere except where you specifically change to another font.


  • #acctnav a
  • This is the top line of your blog. Since everything there is a link, the a must be added to the #acctnav.


  • .pagetitleblock
  • This section contains your User-ID and therefore is predestined for a nice cursive font. Make sure you do not forget the '.' at the beginning of the line.


  • .pagecommands a
  • These are the links just above the header. Notice that the a must be added here as well or the links would appear in the color specified in the next line.


  • a
  • This line sets the color for all the links on the page. By default it is set as 'blue'. Change it to whatever color you like. Of course you can set a special font here as well.


  • .invertlink
  • This is the color combination for the Queue link in the #acctnav section for when there's a new message for you. So basically you are the only one who will ever see the color combination.


  • div.hairline
  • This is the hairline above and below your actual blog. Adjust the color to fit your overall color scheme.


  • .headpost
  • This is your banner. Very important, because it's the first thing a visitor sees when calling up your page. So make sure you select a pleasant color and easy to read font.


  • .review a
  • This sets the font and color for the links in the header bar over each review.


  • .review div.bar
  • This merely sets the background of the header bar over your reviews. Select a nice background-color or make it transparent.


  • .review div.text
  • This sets the actual font and color for your reviews.


  • .review div.text a
  • This sets the font and color for the links inside your reviews.






Now, choose wisely :-)






Follow me to the third part of this tutorial (Part 7/b) to learn how you can set the font inside the review by using some simple HTML.



>>>> Part Eight










Here's the Categorian Beginner's First Aid Kit - Part Seven /b




Let's talk about fonts (3)

This part of the tutorial will show you how to use a special font in the occasional blog post. As ever, there is a simple method and a more advanced method.



The simple method


This is the code:

font: font size 'font name'; color: color name;


font size can be set in px, pt or %

The correct font name is listed on the Google Web Font page as shown in part 1 of this tutorial.

Color name can be any color name or hex code.


As this code is CSS, we must make it acceptable to HTML by wrapping it into the 'style' attribute.

style="font: font size 'font name'; color: color name;"


Now we can attach the style attribute to an HTML tag like e.g.

<span style="font: 28pt 'Qwigley'; color: navy;">Here comes your text</span>

or

<p style="font: 28pt 'Qwigley'; color: navy;">Here comes your text</p>

and several others, though these two are the most useful.


These examples result in: Here comes your text




The advanced method

Let's say you always use a special font for poems. In this case, you define a 'class' in your style sheet and use it whenever you need it.



Step 1 - define the class

In your style sheet add the following line:

p.poem { font: 28pt 'Qwigley'; color: navy; }


p stands for the HTML <p> tag.

poem is the name of the class. It can be any name you like but make it short so it won't be a bother to use it in a blog post. You can define as many classes as you like. Remember the exact spelling. Using this in HTML is case-sensitive. So if 'poem' is in lower case here, you must type it in lower case in your blog post as well.

Classes can contain all kinds of formatting like background images, borders, padding, margin and so on.

Font size, font name and color name of course depend on which fonts you loaded from the Google Web Font page.


Now you can use that class in a blog post.



Step 2 - use the class

In your blog post type:

<p class="poem">Here comes your text</p>

which results in Here comes your text




And that's it :-)





>>>> Part Eight









Great ! Finally we have a forum !

Congratulations to Southernfried Sicilian and the other mods who set up a great place for us !

See you there :-)


SUCats Forum

Here's the link to the new forum
















Here's the Categorian Beginner's First Aid Kit - Part 11



Embedding



Embed a video

To embed a video in your blog you need the "Embed Code". In YouTube you'll find it here:

Click "Share"




Then click "Embed"




Copy the code in the text box. All of it. Then paste it into your blog post.

Now you can format the blog post as usual, center the video, add comments etc. (Example)






Embed An Audio File

Works exactly the same way. Only sometimes the Embed Code is not so easy to find. As in Grooveshark.

Click "Options" of a song, then click "Share Song" and "Widget"




Then select "Widget" again. Specify size and color and then click
"Copy to Clipboard"



Paste the code into your blog post.

Format and add text or images as usual. (Example)





>>>> Back to Index












Here's the Categorian Beginner's First Aid Kit - Part Ten



Linking


Blogging without linking is only half the fun !


What do I need links for ?

With links you can take your visitors to places you have been and liked. If you reblog an image, just link back to the blog where you got it from. If there's a video on a page that doesn't offer embedding, just take a screenshot and link that back to the page.


The Basic Code

<a href=" ... path to the page... " > Text or image to click </a>


The Style Sheet determines the basic formatting of links. You can easily change it. But links can also be formatted indiviually.



Adjust the Style Sheet

In the Style Sheet look for a line that starts with

a { ... }

This is the definition for the links as such - if you want all the links to look alike, then adjust only this one line.

In order to change the looks of your review links, add this line to your style sheet:

.review a { ... }


Example:

.review a { font-size: 12pt; color: orange; text-decoration: none; }


You can also specify background, border, padding, margin etc.
If you read the previous tutorials all this will look familiar.

text-decoration can be none, underline, overline, line-through and blink. Please note that "blink" is not supported in Internet Explorer, Chrome and Safari (...and probably drives away visitors more quickly than the blink-frequency...).



Get fancy

Unlike other CSS/HTML code, the link can be made sensitive to the cursor ie. you can specify that it changes its appearance when the cursor hovers over it.

To achieve this, you merely add a line to your style sheet:

a:hover { ... }

and / or

.review a:hover { ... }


Example:

.review a:hover { font: Arial; font-size: 14pt; color: orange; text-decoration: underline; }


With this line you can make the link look completely different, thus catching your visitor's attention.

In addition to :hover you can also specify the looks for :active and :visited.




How to use it

Now that you have adjusted the Style Sheet, it's time to look at the HTML you need to add a link to your post.


Example for link with text

<a href="https://categorian.com/perm/post/id/1074940">Link to this post</a>


Link to this post




Example for link with image

<a href="https://categorian.com/perm/post/id/1074940"><img src="http://..."></a>






Example for individual formatting

<a href="https://categorian.com/perm/post/id/1074940"><span style="color: green; border: 1px dashed red; padding-left: 5px; padding-right: 5px;"> Link to this post </span></a>


Link to this post




Example for link with confirmation

This is a nice gimmick but not really useful to us bloggers. It's usually used to confirm a deletion. But it can also be used to warn the visitor that s/he will now leave this page. Still, just so you know it's there, here's an example.

<a onclick="return confirm('Are you sure you want to follow this link ?');" href="https://categorian.com/perm/post/id/1074940"> Link with confirmation </a>


Link with confirmation






>>>> Part 11












Here's the Categorian Beginner's First Aid Kit - Addendum 1


Punctuation Is Powerful !


Punctuation IS powerful - and never more so than when writing code.

When changing your Style Sheet or writing HTML in your blog posts take extra care to get all the punctuation right !

Watch those commas, semicolons, quotation marks, colons etc. with extra care. One tiny little mistake and the entire command will either be ignored completely or give you some unexpected results.

So check those , ; : " carefully before you click Save or Post.



>>>> Index








Troubleshooting - 1


If you completely messed up your layout


Can't see your links anymore ?


In your Firefox menu select "View"

Then click "Page Style" and "No Style"

This will show your blog but ignores the Style Sheet.



Now click "Style" and copy&paste your code into a text file (Notepad, Wordpad or the like). Thus you can send it to me to check where you made the mistake :-)


Here's the original code of the Style Sheet

Start from scratch. Delete your code completely and copy&paste the following code into your Style Sheet.

body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }




>>>> Index








Troubleshooting 2 - About Bandwidth



What your blog will look like if you exceed bandwidth




How this happens

Free accounts on image hosting sites usually have a limit on the number of images you can upload, or the space you can use or the bandwidth you use. Or all of those.

Photobucket limits your bandwidth usage to 10GB per month. That is actually a lot.

BUT

if you exceed it, they will politely ask you to get a paid account and then mercilessly shut you down until the month is over Counting from date of creation of the account i.e. if you created the account on the 5th of any given month, bandwidth will be reset on the 5th of every following month..


So what IS this bandwidth thing ?

In this context, bandwidth is the amount of data transferred from photobucket to whichever computer called up a web page that shows one of your photos.

So whenever a web page calls Photobucket for one of your pictures, bandwidth is used - how much depends on the size of the image. (And the number of images of course)


How you can find out your bandwidth usage

In Photobucket click "Account Settings" and then "Account Status".


Why reblogging is NOT good !

If you reblog another person's image without uploading that image to your own photo sharing account, you will be using that person's bandwidth ...

...and however nicely you say thank you, you might just kill that person's account !

...and your blog post will show this instead of the image




How to limit your bandwidth usage

  1. Background Image

    Check the size of your background image.

    The best background images are the small tiles. In that case your browser will do all the work while bandwidth usage is minimal. (See Part Two of the tutorial)

    If you absolutely want a photo or big wallpaper for your background, check the size of the image. Use a photo editor to compress it. NEVER use a bmp file. Use png or jpg.


  2. Posting Photos

    As already mentioned in Part Four of the tutorial, you can set the width of your images with HTML.

    Don't do it.

    Reduce the size of your images in a photo editor. Even Photobucket offers that functionality.

    It really makes no sense to download an image with 1600px width when you have to reduce it to 800px width in your blog post. It takes longer to load and it uses too much bandwidth.












Here's the Categorian Beginner's First Aid Kit - Part One



Change that boring black/white into something colorful !

Step 1

If you click "Style" the following code will be shown:


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



Step 2

There are 4 lines here that concern us now:

1. First Line
Here you set your background color and the text color.

First find a color you want to use. Go --- here --- to find one.

Let's say you want the color "DarkBlue" for the background and simple "White" for text. Just replace the color names with those of your choice:


body { background-color: DarkBlue; color: White; }



2. Second Line

The a sets the color of the links. So that's everything that was blue up to now.

Just replace the "blue" here with some other color you like.


a { color: gold; }



3. Second To Last Line

This is the header bar of your posts. You need a color that contrasts both your page background as well as the link color Or you can make it transparent. Since you already know how to replace one color name with another, we'll set this one transparent:


.review div.bar { background-color: transparent; }



4. Last Line

Here we set the color of the text in your blog posts.


.review div.text { font: normal 100% arial,helvetica,sans-serif }



As you can see, there's nothing said of color so far. We'll just add it:



.review div.text { color: white; font: normal 100% arial,helvetica,sans-serif }




And that's it !


If you made these changes, your style sheet looks like this now:


body { background-color: DarkBlue; color: white; }
a { color: gold; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: transparent; }
.review div.text { color:white; font: normal 100% arial,helvetica,sans-serif }



Step 3

Click the SAVE button and have a look :-)




>>>> Part Two








Here's the Categorian Beginner's First Aid Kit - Part Two



Use a picture for your background !

Step 1

If you click "Style" the following code (or something similar if you already made changes) will be shown:


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



Step 2


The background-image for the entire page is set in the first line.

In order to have a picture instead of a color, we need to make the following changes:


body { background-image: url( http://...path to the picture ); color: White; }




By doing this, the entire page will be filled with the picture by repeating it as many times as necessary.



This is the picture of the background on my page (at the moment). It's small and "seamless", meaning that it will show as a smooth pane. So, if you google for a suitable background picture, make sure to include the search term "seamless".


A word of caution here:

Choose a background that is easy on the eye if you like to have visitors to your blog. Make sure that the text can be easily read. Change the text and link color to contrast nicely with the background.

Yes, there are ways to have a vivid background for the page and a quiet background for the pictures and blog posts and we'll get there.

But for now:


Step 3

Click the SAVE button and have a look :-)




>>>> Part Two /a








Here's the Categorian Beginner's First Aid Kit - Part Two /a



Use a photo for your background !




Creating a page like this is not difficult at all. However, it requires a few more steps than the other tutorials we have done so far.

Let's have a look at the code:


For the page background

body {
background-image: url(http://...path to the image...);
background-size: cover;
background-attachment: fixed;
color: white; }


For the blog background

.blog {
background-image: url( http://...path to the image... );
width: 960px;
padding-left:30px;
padding-right:30px;}


For the blog post or review background

.review {
background-image: url( ...path to the image... );
width: 800px;
margin-left: 50px;}


For the banner

.headpost {
background-image: url( http://...path to the image... );
padding-left:30px;
padding-right:30px;
}




Step 1 - The Page Background

Find a BIG image for your background but one that loads quickly. Visitors are impatient. Also remember that if the image is too small, it won't cover the entire background unless you scale it. And if you scale it, it'll become blurry or pixelated.

Choose an image that does NOT have its main attraction in the center. That's where your blog will be. So browse those free-wallpaper sites. I'm sure you'll find a good one :-)

The property background-size: cover; means that the image will be scaled until it fills the entire background, whatever screen resolution is used by your visitor.
background-attachment: fixed; prevents the photo from scrolling with the rest of the blog.


Step 2 - The Blog Background

The background of the blog is even more important than the background of your blog posts or reviews since it is also the background for your messages, the friends list, the library and so on. So you must select a color or an image that makes it easy to see the text on those other pages as well.

If you choose the color or image for the blog background well, you might not even need to define a separate background for the reviews.

For the example above I created a 10x10 px semi-transparent .png image:

The width of the blog is set to 960px to allow 30px on each side as padding (meaning the text does not start exactly at the edge of the blog).


Step 3 - The Blog Post or Review Background


The width is set to 800px and the margin of 50px takes care that it is in the center of the blog.

For this example I created a 10x10 px semi-transparent .png image:





Step 4 - The Banner



In most cases it's probably not necessary to set background-image or background-color for the banner. In this case I used the same background image as for the reviews. The padding is the same as for the blog.







>>>> Part Two /b








Here's the Categorian Beginner's First Aid Kit - Part Two /b



The intricacies of background image sizing


This tutorial is about how to set the size of your background image so that it looks good on most monitors.


Why bother ?

As mentioned before and after, there is a lamentable variety of screen resolutions and of browsers in use, which mess up our beautiful blogs if not taken into consideration.

Just so you get an impression of how different a blog can look, here an example of my blog on 3 different screens:





mtbooke was so kind as to provide the left screenshot, which is from a 1024x768 monitor. The middle one is from my laptop (1440x900) and the right one is from my new monitor (1920x1080).



Now imagine what happens to your background photo, if you force it to cover the entire screen and it is displayed on three so widely different formats.

Basically there are two options.

- You can either stretch and distort it to fit or
- you can keep the proportion and decide which part can be cut off when it doesn't fit on the screen.









This tutorial will try to help you decide which method to use for your image of choice.




The basics are always the same

The page background image is defined in the body, right at the top of your style sheet:

body {
background-image: url( http://...path to the image... );
background-repeat: no-repeat;
background-attachment: fixed;
....}


The first line contains the path to the image
The second line determines that the image is displayed only once
The third prevents the image from scrolling with the rest of the blog

Please note all the brackets (or braces), colons and semicolons - they are important !


These 3 options are the basics. Without them the whole background image thing won't work.




Background Size and Position

The other two background properties are size and position.

background-size: percentage|cover;
background-position: top/bottom/left/right|px|percent
;


This means that there are several options to choose from:

percentage sets the height and width of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto".
background-size: 100% 100%;

cover scales the image keeping the proportion intact.
background-size: cover;

The position of the background image can be set in px or percentage or with top or bottom, left or right


Width and Height

As mentioned above, the first value is the width, the second the height. Let's have a look at the possible combinations:


  • 100% 100%
  • This will stretch both width and height until the entire background is covered, ignoring the aspect ratio. This is what caused the moon to become an elipse in the example above.


  • 100% auto
  • With this combination the image is scaled until the width covers the background. Aspect ratio remains intact, meaning that the image height will be cut off either top or bottom or both. This depends on what is selected for background-position.

    Please note: If the image is much wider than high, it is possible that there is not enough height to cover the background entirely.


  • auto 100%
  • This scales the image until the height covers the background. The proportions are kept but it may happen that the width gets too large and is cut off or may not be sufficient to cover the entire background and thus an empty strip remains.


  • auto
  • The image remains unchanged. This only works with really big images.


  • cover
  • Cover will scale the image until both width and height cover the background while keeping the aspect ratio. Thus there is always some part of the image that will be too big and therefore cut off.

    However, the big advantage is that the proportions are kept intact and there is never a strip of uncovered background.


Position

With background-position we "anchor" the image on the screen. For our purposes neither the exact px position nor the percentage is useful.

Instead we use left / center / right and top / center / bottom.

  • left top
  • This is the default value i.e. if you do not mention the background-position in your style sheet, the image will be anchored in the top left corner of the screen.

    Select this option if the important part of your image is in the top left corner. It will always be visible.

    Anchored like this, the right side and the bottom of the image may be cropped if the image becomes too large for the screen size. Alternatively, if set to "auto" and there's not enough image to fill the space, this is where the empty strips will appear.


  • center center
  • The image is anchored exactly in the middle of the screen. Thus it's the outer rim that may be cut off or empty strips may appear wherever the image doesn't reach the corners.


  • bottom right
  • With this selection it is always the bottom right corner of the image that will be visible. Top and left may be cut off or show the empty strips.



I'm sure I need not explain all the combinations - you get the drift.




Examples



background-size: 100% auto;
background-position: center center;







background-size: cover;
background-position: right center;







background-size: 100% auto;
background-position: right bottom;







Remember the handicapped

So, the final background code could look like this....


body {
background-image: url( http://...path to the image... );
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-position: right center; ...}



....if only there weren't those fellow bloggers among us who are handicapped by using Internet Explorer or an old version of Firefox, Opera, Safari and so on.

So, to make sure that really most people are able to see your beautiful background image, you better add the following lines:


body {
background-image: url( http://...path to the image... );
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
-o-background-size: 100% auto;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;

background-position: right center; ...}


Make sure that they all show the same values as the normal background-size.

Please note: If you use "cover" instead of percentage, you don't need those extra lines.




My special thanks go to Denis who very patiently took screenshots for me.


>>>> Part Three









Here's the Categorian Beginner's First Aid Kit - Part Three



Background Image for Blog Posts

Step 1


If you click "Style" the following code (or something similar if you already made changes) will be shown:


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



Step 2


We already know how to set the page background image. (See Part Two). Now, depending on what kind of image you chose, you will want to add a background to your reviews so the text can be read and your photo-blogging looks good.

Easily done:

We will add a new line to the style sheet.


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review {background-image: url( path to your picture );}
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



This simple line will fill each blog post with that background image.

Of course you can also just select a color. In that case the line would read:


.review {background-color: Name or Hex-Code of the color;}




About semi-transparent images:

In order to make the background of your reviews semi-transparent, you need to either download such an image or make one yourself in one of the many online photo editors. Pixlr.com is one such - my favourite.

Save the image as .png


Please note: Old Internet Explorer versions cannot display that transparency.


Step 3

Click the SAVE button and have a look :-)




>>>> Part Three /a








Here's the Categorian Beginner's First Aid Kit - Part Three /a



Background Image for a single Blog Post


In Part Three of this tutorial we learned how to set a background image for ALL our reviews / blog posts.

However, you might want to set a different background color or image for one single blog post. In that case you do not bother with the style sheet (although it can be done) but you simply enter the HTML code directly into your blog post.


The syntax

The code for the image itself is the same that we used in the Style Sheet for the page background (see Part Two of the tutorial):


background-image: url( http:// ... path to your image ... );



But this is CSS and in order to be able to use it in a blog post - which is done in HTML - we have to wrap it into the "style" attribute:


style="background-image: url( http:// ... path to your image ... );"



Now, the "style" attribute cannot stand alone. As an attribute, it merely provides additional information about an HTML tag - for example the DIV tag. So we use the DIV tag as a container for our background image:


<div style="background-image: url( http:// ... path to your image ... );"> ... your blog post text.... </div>

Please note that instead of the DIV tag you could also do this with the P tag (P = Paragraph) or the UL tag (UL = Unordered List = bulleted list) or several others. All of them can be the container of the "style" attribute and therefore of the background image.

Also be aware that you can add "background-position", "background-repeat" and "background-size" etc. according to what is wanted/needed. (See examples below)




How to use it

If you post a picture with the IMG tag and add no other code or text, the review will be just as big as the height of the image. (The width is determined in the style sheet)

This is NOT the case with the background image !

You determine the size of the blog post by the number of lines you enter - either text or empty lines. ONLY THEN will your container be filled with the background image. So if not all of your background image is visible, hit "Enter" a few times until it is !

Remember to also define the right text color - as in the style sheet this is done with


color: colorname;




Example 1 - For small, seamless images


<div style="background-image: url( http:// ... path to your image ... ); color: color name;"> ... your blog post text.... </div>



Example 2 - For photos


<div style="background-image: url( http:// ... path to your image ... );background-size: cover; color: color name;"> ... your blog post text.... </div>



Example 3 - As a decoration on the left side


<div style="background-image: url( http:// ... path to your image ... );background-repeat: repeat-y; color: color name;"> ... your blog post text.... </div>



Example 4 - For a background color


<div style="background-color: darkblue; color: gold;"> ... your blog post text.... </div>



>>>> Part Four








Here's the Categorian Beginner's First Aid Kit - Part Four



You want to post those BIG pictures ? Make the blog wider !


Don't we all love those big photos ? But it doesn't look so good when they are too big for the blog post size.

So we just increase that size.


Step 1


If you click "Style" the following code (or something similar if you already made changes) will be shown:


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



Step 2


All we do is add a new line.


body { background-color: white; color: black; }
a { color: blue; }
.invertlink { background-color: blue; color: white; }
div.hairline { border-color: silver; }
.blog { width: 900px; }
.review div.bar { background-color: lightgrey; }
.review div.text { font: normal 100% arial,helvetica,sans-serif }



If you already have a line that starts with .blog { you set the


width: 900px;


right behind that { thus making it the first parameter for .blog.


Of course those 900px are only an example. You can choose any size you want.

BUT

Remember that people have different monitors with different display resolutions. So what might look good on your monitor need not look good on someone else's. An astonishing number of people still use monitors with a 1024x768 resolution. Try to find a compromise. Experiment a little.


Step 3

Click the SAVE button and have a look :-)




>>>> Part Four /a








Here's the Categorian Beginner's First Aid Kit - Part Four /a



Move your blog


This tutorial will show you how easy it is to move your blog away from the middle to the left or right side of the screen.


The Code

In your style sheet look for a line that starts with

.blog {

Now find the line where the corresponding } is located.



If it's not there, add it:

.blog { }



In between those brackets we will add the following code:

margin-left: 30px;

or

margin-left: 1%;


or margin-right of course

margin-left specifies the distance between the left side of the screen and the left side of your blog, while margin-right is - unsurprisingly - for the right side of the blog / screen.

You can change the px and the % to your liking.










That's it :-)


>>>> Part Five









Here's the Categorian Beginner's First Aid Kit - Part Five



Photoblogging ? You can do better than that !


Why ? What's wrong with photoblogging ?

There are several things very wrong with photoblogging.


  1. You have no control over what happens with the image. If the page with the photo is taken down for whatever reason, you lose the image and have either a very ugly icon that says the page could not be found or an empty hole in your blog. If you photoblog the background image of your blog you might be surprised some day when the image is gone...




  2. You are stealing bandwidth and some site admins are quite allergic to that. Best case scenario: Instead of your photo you get an image like this:


    But it could also be something like this:


    Not so pretty, is it ?



Here's how to do it right

In order to post a photo in your blog you need the direct link to that photo (same goes for background images !)

So you need a place where you store all your images. I guess the two most popular ones are Photobucket.com and Flickr.com. There are tons of others. Just make sure that you choose one that offers "photo sharing".

Get an account. It's painless and free and done in seconds.


  • Upload the picture to your album.

  • Get the Direct Link !

  • In your blog click "post to blog"

  • Enter the following code:


    <img src="http://..... ">


    Paste that direct link in between those " "


  • Click "Post"


Read the following tutorials to learn how to position that photo, how to set the size and much more.




>>>> Part Six








Here's the Categorian Beginner's First Aid Kit - Part Six



How to post a photo and make it look good


The HTML tag to post a photo is:


<img src="http://...path to the image...">


This is the simplest form. It will place the picture on the left side of the post and that's it.



However, there is a lot you can do to improve on that:

Adjust the size of that image

Although I would always recommend to resize the image in a photo editor, you can set the size right here in your blog post.

Please note: I recommend setting either width or height because if you set both and make a slight error, you will distort the image.


<img src="http://...path to the image..." width="700">




Center that image

There are several ways to center an image. This is the simplest one:


<center> <img src="http://...path to the image..."> </center>




Put text next to that image

Sometimes you might want to place text next to the picture. The easiest way is this:


<img src="http://...path to the image" align="right">

...or align="left" of course



However, this simple method will place the text very close to the image, which might not look good.

This is why I prefer the following method:



<img src="http://...path to the image" style="float:right; margin-left:10px;">


You can let your image float right or left.

margin-left:10px will create a gap between text and image. You can change the number of px to your liking.

margin comes in 5 variations: left, right, top, bottom. Or without any attribute at all, which will set the margin right around the image.




I like style="..." because there are several other things we can use it for.


How about a border ?

This is the standard border:


<img src="http://...path to the image" style="border: 1px solid black;">


1px is a thin line. You can make that border as thick/wide as you like.

Borders can be solid, dotted, dashed, double, groove, ridge, inset, outset and hidden.

Borders can have any color you like. Just type in the color name or hex code of a color.




And now we will combine all that !





For this text to be placed next to the image, in addition to the image source, I used "style" to combine float, margin and border and then added width and wrapped all into one simple command.








<img src="http://...path to the image" style="float:right; margin-left:10px; border: 1px solid black;" width="200">




>>>> Examples








Here's the Categorian Beginner's First Aid Kit - Example 2



How to position text and images


Here are a few examples for the positioning of text and images in your blog posts.


Set two images side by side

Noting could be simpler:

You merely type one img tag after the other. If you want some space between them, you use "style" and "margin".

<center>
<img style="margin-right: 10px;" src="...path to the image..."> <img src=" ... Path to the image ...">
</center>


Set two images on either side of text

To set two images on either side of text, we use "style" with "float" and "margin" again.

Text alongside floating images should always be ended by adding

<br style="clear: both;" />

Thus all following elements will be placed BELOW the images.
<img style="float:left; margin-right: 10px;" src="...Path to the image..."> <img style="float:right; margin-left: 10px;" src=" ... Path to the image ..."> and here follows your text...<br style="clear : both;" />


Clear can be used with left, right and both.

Thank you Brian (Airtoob) for telling me about the "clear" - very useful indeed :-)




For your banner


A banner always looks nicer if you place your profile or welcoming text beside your image.

<img style="float:left; margin-right: 10px;" src="...Path to the image..."> ... your banner text...<br style="clear: left;" />





>>>> Part Seven









Here's the Categorian Beginner's First Aid Kit - Part Eight /a



Text Formatting - Basics


Basic Formatting Tags

HTML offers some basic tags for formatting text:

  • <b>
    <i>
    <u>
    <del>
    <sup>
    <sub>
  • Text in bold
    Text in italic
    Text is underlined
    Text is deleted
    Text in superscript
    Text in subscript
  • </b>
    </i>
    </u>
    </del>
    </sup>
    </sub>



Example for bold and underlined text: <b><u>Bold and underlined</u></b>



Align Text


<center> is probably the most important formatting tag when blogging. We have already seen it used for images, but it serves equally well for text.</center>


BUT

center is not our only option and eventually becomes boring. Let's see what alternatives we have...


This is when the property "text-align" comes in handy. It offers all the possibilites of aligning text and images.

text-align: right;

text-align can be left, right, center or justify.



However, "text-align" is just a property. And, as is the case with properties, it is owned - by the "style" attribute:

style="text-align:right;"

Now, depending on what we want to do, we can attach the style attribute to several HTML tags.


The <P> Tag

The <p> tag is used for paragraphs and thus predestined to be our first choice as a container for our text-aligning.

<p style="text-align:right;"> will set a paragraph on the
right hand side of your blog post.</p>


<p style="text-align:center;"> But you can also center the text.</p>


<p style="text-align:justify;">Or Justify might be useful sometimes. Use this to generally push your paragraphs around in your blog post. Make your reviews more interesting by formating them.</p>




The <DIV> Tag

Use the <div> tag if you want to format the entire blog post / review in only one way.

<div style="text-align:justify">


div works mostly like the <p> tag but it's supposed to define sections of a document. So basically it's used for formatting what affects the entire blog post while <p> is for the fine-tuning...




The <UL> and <OL> Tag

The <ul> tag is for Unordered (bulleted) Lists, the <ol> tag is for Ordered (numbered) Lists.

They both work exactly the same:

<ul>
<li>item</li>
<li>another item</li>
<li>and a third one</li>
</ul>

You can add the "style" attribute to the list itself <ul style="text-align: center;">

and / or to the items <li style="text-align: center;">



The <CENTER> Tag

Erm, yes, I know. This is strange. But it actually works.


<center style="text-align:right;"> Actually results
in the text being aligned right. </center>





There are more but I guess the list is already long enough.


>>>> Part Eight /b




















Here's the Categorian Beginner's First Aid Kit - Part Nine



Simple Borders


Border is a recurrent topic and so here is some basic info about how to do borders.


Basic Code

This is the basic code for a border:

border: 1px solid black;


1px is the width of the border. It's a thin line just like the one you see on the left side of this paragraph. You can make that border as thick/wide as you like.

Borders can be solid, dotted, dashed, double, groove, ridge, inset, outset and hidden. Please note that some types of borders need more than 1px in width (see examples below)

Borders can have any color you like. Just type in the color name or hex code of a color.


1px                          solid
1px                          dotted
1px                          dashed
3px                          double
4px                          groove
4px                          ridge
3px                          inset
3px                          outset


Padding

Borders should always be used in combination with "padding".

Padding provides a space between the border and the text.

padding: 10px;


The number of px for the padding can be set to your liking.



How to use it

The code as shown above is CSS. This means that in the Style Sheet you can simply add it to an element that you want ALWAYS to have a border.

For example your reviews / blog posts:

.review { border: 1px solid black; padding: 30px; }

Or the header bar of your blog posts:

.review div.bar { border: 1px solid black; padding: 5px; }


However, you will probably want to use it mostly for images, single blog posts or a paragraph here and there.

In that case the CSS code must be smuggled into HTML territory and that is done by simply hiding the code in the style attribute:

style="border: 1px solid black; padding: 10px;"

Now we can attach it to the tags we use in a blog post:


Image

Simply add it to the image tag (no padding necessary here):

<img style="border: 1px solid black;" src="..." width="..." >


Blog Post / Review

If you want to set the border around a review, use the div tag.

In the first line of your blog post type

<div style="border: 4px ridge blue; padding: 30px;" >

then write your review as usual and finish it with the last line as

</div>



Paragraph


Use the p tag if you want to set a border around a paragraph:

Start the paragraph by typing

<p style="border: 3px double green; padding:10px;" >

write your text and finish it with

</p>



Word

You can also put a border around a single or several words:

Use the span tag for this. Padding is not needed here.

<span style="border: 1px dashed red;" > write the text and put the </span> right behind the word(s).



Advanced Borders

Borders are a very handy tool to style your reviews and there is a lot more one can do with them than shown in this tutorial. For more information please read the next part Advanced Borders.


>>>> Back to Index








Here's the Categorian Beginner's First Aid Kit - Part Nine /a


Please read Simple Borders first, if you haven't yet.


Advanced Borders



Simple Rounded Corners

This is the simplest way to create rounded corners:

border-radius: 10px;


This will set a 10px radius on all 4 corners

To create this border I used:

<div style="border: 4px ridge blue; border-radius: 10px; padding:25px;">
...
</div>







Advanced Rounded Corners

But you can define all 4 corners separately if you want to:

border-radius: 15px 60px 15px 60px;


Starting with the top left corner these 4 values define the corners in clock-wise sequence.

To create this border I used:

<div style="border: 3px solid green; border-radius: 15px 60px 15px 60px; padding:25px;">
...
</div>






Freestyle Rounded Corners

You can even define horizontal / vertical radi for all 4 corners

border-top-right-radius: 100px 230px; border-bottom-right-radius: 100px 230px; border-bottom-left-radius: 30px;


Available are: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. The first value is for the horizontal, the second for the vertical radius.

To create this border I used:

<div style="border: 3px solid red; border-top-right-radius: 100px 230px;
border-bottom-right-radius: 100px 230px; border-bottom-left-radius: 30px; padding:25px;">
...
</div>







Partial borders

The border need not be complete. You can define merely one, two or three sides of the border and format each separately.

border-right: 6px double green; border-bottom: 6px ridge gray;


Available are: border-left, border-top, border-right, border-bottom.

To create these borders I used:

<div style="border-right: 6px double green; border-bottom: 6px ridge gray; padding: 25px;">
...
</div>







>>>> Part Ten