By Stephanie Brown of FAIIINT

CSS Beginners

CSS is something a lot of people ask my advice on, assuming it is too technical or complex for them to learn themselves, this is absolutely not true. It’s nowhere near as scary as it seems and everyone is capable of learning the basics and using it to customize their blogs. It’s not something that will take months or years to learn, with all the excellent resources available right at your fingertips you can teach yourself the very basics in a few hours.

Layout and design play such a huge role in how your blog is seen and perceived by others, whether they be other bloggers, potential collaborators or future employers, that you should want it to look the best it possibly can. First impressions count and appearance can often make or break future relationships, especially with clients. Not everyone has spare cash lying around to hire a web designer or to buy custom templates, but everyone can, with a little spare time, learn how to do it themselves. So now there is no excuse for a poor or unoriginal design!

I’ve tried to make this as simple as possible, so that even total beginners can alter their themes with ease. Follow the instructions on how to get to the CSS editor for your blogging platform below, then simply copy and paste my CSS code examples into the box and alter the red text to suit your needs. You can go to the bottom to copy the entire code in full, or pick out only the customizations you need from the sections below.

Where

WORDPRESS [SELF HOSTED]
There will be a separate full tutorial next week, stay tuned!

WORDPRESS
To use custom CSS on a free WordPress blog, you need to have purchased the ‘Custom Design’ feature. You can do this by clicking the ‘Store’ button on your dashboard menu and following the instructions. The last time I checked, this was $30 for an entire year (or $0.08 per day) and would require renewing each year. I personally think it’s a great price and a much cheaper option than self hosting!

Log into dashboard → Appearance → Custom Design → Click ‘Edit’ button in the ‘Custom CSS’ box → Scroll to the bottom and make sure ‘Add my CSS to (Your Theme Name) CSS stylesheet’ is selected under ‘CSS Settings’

Note: The first time you customize your CSS, the area at the top for writing your code should be totally blank, if it’s not, completely delete everything inside so that it is.

BLOGGER
For the purposes of this tutorial, the majority of customizations you will be able to make using the Blogger editor and will not need to add the CSS yourself. Go through the various categories listed and make any alterations using the editor. Do not add CSS for any customizations you have already made using the editor, however, if there is something listed below that the editor cannot do simply click the ‘add CSS’ option and add only that customization/s.

Log in to dashboard → Layout → Click ‘Template Designer’ link → Advanced → Add CSS

Tips

• I suggest that you set up a second ‘tester’ blog for which you can try out your customizations first, this way, once you’re happy with it you can just copy & paste the CSS into your real blog, knowing it’s perfect. This saves your readers seeing the unfinished version, and also it’s reassurance for those that are a little scared to try it out, if you mess up the test blog, no big deal!

• All code highlighted in red can be altered to your own preferences. The descriptions also contain red words, these are your options when altering the code.

• Spellings are always North American – so ‘color’ not ‘colour’ – being British this tripped me up no end of times when I was starting out! If something’s not working, check the spelling!

Background

BACKGROUND COLOR
One of the simplest and most requested things I get asked is how to change background colour. It’s a very simple alteration that can make a big impact on your layout and design, however be wise with it – pale colours tend to work best and are the most user friendly. Also note, depending on your theme this may or may not change the colour of the background on your posts and sidebars.

The highlighted hex number can be altered to any colour you wish. See the resources section at the end of the post for a colour picker that will give you the corresponding code for any colour you select. The colour picker tool in Photoshop (or similar) will also give you the relevant code, look for the ‘#’ box.

BACKGROUND IMAGE
To add a background image, first you need to upload an image to your usual image folder and then copy the URL down. Replace my URL with the correct one for your image.

I personally suggest an image which is small and can be tiled to repeat across the entire background.

I’ve also included a background colour here, if your background image takes a while to load, or is broken, the colour will be displayed until the image loads over the top, so make this a similar colour to your image.

The repeat right top command tells the image to tile from the top right corner. This can be altered, but I would suggest leaving it as it is. Possibilities are repeat right top and no-repeat.

Font

Font customization is another simple, but very effective way to add personality and style to your blog. Again, keep in mind your background colour, dark fonts work best on light backgrounds and vice versa, users need to be able to read your blog easily, don’t make it hard for them!

FONT-FAMILY
This is the font itself, such as Arial, Times New Roman, or Verdana. Unfortunately, you cannot just use any font you like. The font must be one that all computers have installed as standard, otherwise it will not be displayed and a standard font will be used instead. This can really affect your overall design, so it is always best to use one of the fonts which are considered ‘web safe’. Click here  for a list and examples of web safe fonts and their families.

FONT-SIZE
This can be any number you want, the smaller the number the smaller the text and vice versa. 12px is the most common size, as it’s easily readable, but clearly smaller than headings and titles. If you do decide to change this, I strongly suggest choosing either 10px, 12px, or 14px.

COLOR
The same as for background, this can be changed to any hex colour code you like. Always make sure to have included the # at the beginning.

TEXT-ALIGN
This tells the text which side to align against, left is the default, but it can also be changed to right, center or justify.

Links

When styling links, a:link, a:visted and a:active should all be styled exactly the same for a clean, uniform look. I suggest customizing a:link and then copy and pasting the styling between the curly brackets into the other ones to be sure. Those 3 are all how the link appears on the page (when it’s unvisited, when it’s visited & when it’s selected), a:hover is how the link looks when the user hovers their mouse over it. It’s common to style this differently to the others, whether you want it to change colour, underline, become bold or it can be styled exactly the same as the others for no change.

COLOR
Again, choose any hex code you like to alter the colour. I think it’s nice to have the a:active colour different to the rest.

TEXT-DECORATION
This is used to add or remove decoration, most commonly to remove the underline from links. The default is underline, but setting it to none will remove the underline from your links. If doing this, I suggest making the link a different colour to the text, or making it bold, so that it stands out as a link and doesn’t just appear as ordinary text, which is confusing for visitors.

You can also use underline just on a:hover, with the rest set to none, this will make the line appear only when the users mouse hovers over it. Slightly more interesting is overline, this is the same as underline, but the line goes over the text instead of under it, line-through puts a line through the middle of text.

FONT-WEIGHT
This can work nicely if you don’t want your links to be underlined, making them bold works equally well for showing the user that it’s a clickable link. The default is normal, change it to bold for bold text , bolder for extra bold or lighter for skinnier text.

All Together Now

All together, this would look like:

References

http://www.w3schools.com/css/default.asp – for CSS help and tutorials

http://www.colorpicker.com/ – Hex colour picker

Tweet

Ah, Tax Time. Such a special time of year. For some of us a hectic last minute scramble to get everything done on time, but for those who planed ahead it’s just another day. Between working, blogging and everything else we fill our busy lives with, finding time to do taxes seems like a huge strain.

Which got me thinking - we are forced to look over our money each year – to review and budget, why not do the same with our time? If we budget it well maybe we’ll have more of it free, or at least more to spend on things we enjoy…

So, without further ado (don’t want to waste your time now, do we) here are IFB’s Tips for Budgeting Your Time

• Make Lists: Sure, it sounds cliche – but lists are an amazing way to keep track of your tasks. I like to have a few going at once – Today, This Week, This Month. There are also some fantastic apps for lists – try TeuxDeux.com or Orchestra.
• Prioritize: Yes, you can do anything you want to do, but you can’t do everything. There’s just not time for that (unless you can learn to live without sleep!) So figure out what the most important projects are, what you are the most passionate about and what you need to be doing to get by in life. Keep these as top priorities and shelve the rest.
• Visualize your Tasks: I like to use post-it notes. I color code them by project and priority and stick them above my desk. That way I can see what I need to be working on right in front of my face. It’s also very rewarding to pull the post-its off the wall when I finish a task.
• Schedule Downtime: We all need breaks. Take some. If you work constantly you’ll burn out, and then you won’t be able to get anything done! Be sure you are adding breaks to your to-do lists. (ie Cuddle with kitty, Take a walk in the park,  do yoga, etc, etc, etc)

Do you have any tips for time management? Let us know in the comments!

Tweet

Dear Amanda,

I started talking to a new blogger, and she ended up copying my exact theme, down to the font (which I changed myself. It wasn’t the default.) should I say something? – Brigid

Dear Brigid,

Dealing with a copycat is the WORST. The entire IFB team has had some kind of issue with copycatting and it is not only frustrating but tiresome. Before answering your question, my first question to you would be: did you create this them all on your own? Or did you purchase it from another source? If you created this theme all on your own (nicely done, by the way!), you definitely have rights to your theme. You can email a Cease and Desist letter (a legal order stating that the user stop whatever activity he/she is doing) to the blogger stating that you own the rights to that theme, you never granted permission to the bloggers to use your theme, and that he/she needs to stop using it.

Need blogging help or advice? Send us an email and we will feature your questions here!

Tweet

The histogram is your friend, shake hands with it and say hello.  The histogram is a visual representation of an image’s tonal values, i.e. a sort of topographical map of the brightness and contrast of the image and the image’s colors.

The left side represents darker tones, like shadows, and the right side represents brighter tones, like daylight and whites.  An untouched RAW image’s histogram should technically all be contained within the middle of the histogram, bunched slightly to the right, with no “clipping,” or loss of detail in the shadows (pure black) and highlights (pure white), on either end.  This means that your image’s data is all there, nothing is missing, and you have the most information to play around with; the original file should be relatively flat looking, with very little contrast and saturation, as you can see below.

This flat image is the Play-Doh you’ll be playing with and molding.  I tend to go for a darker overall look and so by the end of processing I usually have a lot of clipped shadow detail and dense, inky blacks in my image and a histogram that’s weighted heavily towards the left side.Here’s an example of how to read a histogram for an unedited RAW image and then for the final image after processing: 

Before:  Note the “clipped” highlights on the right side of the histogram; this represents the extremely bright, blown out highlights on the model’s face, skin, and in the white parts of the dress.  On the left side of the histogram you’ll notice “clipped” data as well; this represents the upper left portion of the image, the shadowy part where the audience sits.  You’ll also notice a high presence of red and yellow, as the runway lights are very warm and the image hasn’t been white balanced yet (which is one of the subjects for next week’s post).

 

 

After: Now notice how the histogram has changed to reflect the changes I made to the image.  I brought the exposure down to bring out the detail in her face and skin, see how the right side of the histogram is no longer clipping at all?  I also raised the level of the blacks to cut out the audience and make the model pop more, note that the histogram is now weighted more toward the left side.  Also, after white balancing the image, you can see how there is less red and yellow in the histogram, which really brings out the blues in the dress.

 

The histogram is not the end-all-be-all, there is no single “correct” histogram.  It is, however, a useful tool to know when you’re processing your images to see how contrasty your image is and to see how much information you really have.  Next week I’ll be going over the basic processing tools, which, I promise, will be way more exciting.

More in This Series:

• Making Your Images Pop: A Guide to Processing Photos Pt. 2
• Making Your Images Pop: A Guide to Processing Photos Pt. 3
• Making Your Images Pop: A Guide to Processing Photos Pt. 4 

 

Tweet