September 30, 2010 – 01:37
Have you ever noticed the icons that appear on some web pages next to external links? The ones that indicate the link will take you to a different site completely? A few good examples can be found in the References section situated at the bottom of articles on Wikipedia.
If you need to notify your readers that following a given link will lead them away from your site then the image used in the paragraph above is now a widely recognised way to do so. It is also really easy for you to implement.
Firstly you will need to upload the image you want to use to your Media Library. Remember to keep it fairly small – the image I am using is 10 pixels square. You should copy the URL that WordPress gives you; it will be used later in the CSS code.
Next, you need to set a class for each link that you want to display the image next to. This is so that we can target them all with just one declaration in the CSS. For each link, switch to the HTML editor and add class="external" to the anchor tag. You might also want to add target="_blank" which will cause the link to open in a new window or a new tab. Please note, however, that doing so can be bad for usability. Opening new windows removes the functionality of the “back” button and might mean that viewers find it more rather than less difficult to return to your site. Your final link should look something like the following in the HTML editor:
<a href="http://www.external-site.com" class="external">link text</a>
Lastly you need to add one line of code to your CSS. This will place the image next to every link that you have set to belong to the “external” class. Remember to include the URL you copied earlier which contains the location of the image file. You may also need to change the pixel values depending on the width of the image that you have chosen. The code I’ve used is below. It includes a second line specifying another rule modified with the :hover selector so that a darker image is shown when a reader places their mouse pointer over the link. You only really need to include the first line, the second is optional.
a.external {background:url("MAIN_IMAGE_URL") no-repeat right center; padding-right:13px; margin-right:5px;}
a.external:hover {background-image:url("HOVER_IMAGE_URL");}
This technique can also be applied to other link types. You can let your readers know that a link goes back to your home page, that it will start downloading a certain type of file to their computer, that it will take them to a secure web page where they will need to provide log-in details or almost anything else you can think of. All you need to do in each case is upload a new image and create a new class to add to the relevant links, it really is that simple!
September 25, 2010 – 01:52
Here is an example of a drop-cap. You can use inline CSS to include dropped capitals such as the one here into your own paragraphs, however if you want to change old entries you will have to edit them all individually. The code you need is shown below; make sure to include the span tag around the first letter at the beginning of the sentence. You may want to increase the font size and/or padding depending on the theme you are using, the values I have used are just an example.
<span style="float:left;font-size:3em;line-height:1;padding-right:3px;">A</span>wesome...
It should also be possible to achieve this with the CSS upgrade using the :first-letter pseudo-element selector. However the Mozilla add-on Firebug doesn’t support this yet (or rather: there is a problem with Firefox itself which means the style isn’t applied when using Firebug) and this is what I use to do most of my testing. If it is achievable with the CSS upgrade then adding the inline code to each paragraph would not be needed and the process would become easier, especially if there are a lot of places you want to use this feature.
September 23, 2010 – 01:57
If you have the CSS upgrade for your wordpress.com blog then the chances are you’ve already picked a theme that you like a lot. However there might be a few simple things you want to change. Perhaps a font style here or there, a few modifications to the default colours or slightly altering the layout. If this is the case then you need to make sure you insert only the specific declarations that you want to change into the editing box and select the “Add this to the THEME_NAME’s stylesheet” button before saving.
If you copy everything in the existing stylesheet, edit certain parts and paste everything into the editing box there is a good chance you will end up breaking the layout in some way. This is definitely not advised. The main problem is that most themes use relative links to images. These are links that don’t start with HTTP. When you add your own CSS rules you must use absolute links that do start with HTTP. If you’ve changed the CSS and your images have disappeared this is the most likely cause of the problem.
The C in CSS stands for “cascading”. This means that many different rules can be applied and only certain ones will take effect. Whatever you type into the editing area will be added to the existing code at the end and will normally take precedence over previous rules.
If you know quite a lot about CSS you can always design a theme from the ground up. If you decide to take this route then you will most likely want to select the “Start from scratch and just use this” button. It takes a bit more work but you can customise the site layout and design almost any way you like.
