Ronda, Spain, Spanish, Themes, and Everything Else

This tutorial demonstrates how to place two background images behind the HTML <blockquote> tag. The first image will be positioned at the top left of our blockquote and will be our opening quote mark, and the other at the bottom right which will be our closing quote mark. The apporach I'm going to demonstrate appears to work in all of the modern browsers, although some of the older browsers might struggle.

The reason for this tutorial is the inability of CSS to allow more than one background on a single page element, so in the case of the blockquote I, like many other template designers, have resorted to creating borders and background colors to separate blockquotes from the surrounding text. We do this because many blog and forum scripts provide a quote button that simply wraps the quote in <blockquote> </blockquote> tags.

Using CSS and the :first-letter pseudo class, we are able to assign two background images to our HTML <blockquote>, and all we need to do is position them so that they work correctly. The image below shows you what I mean.

The opening quote mark and larger first letter are defined by blockquote:first-letter, and the border, background and closing quote mark are defined by the blockquote style.
Read More

This short tutorial is about changing the text used in sidebar titles with images so that unusual fonts or artistic headers become possible. This is a really cool effect, and if you're a fan of the css Zen Garden you'll know that websites can be works of art.

The designers of Serendipity really did think of all possibilities when they gave every sidebar block its own unique style name.

Replacing the sidebar title with an image is relatively easy, start by creating your image and give it a width and height that compliment your sidebar. Read More

Have you ever thought it would be great if you could make the latest entry in your Serendipity blog stand out, perhaps use a different color, or even add some imagery to let your visitors know this entry is special?

Using some Smarty code and css we can, imagine how much more usable your blog would be. Even more so if your blog is part of a network. If you run competitions, review new products, or perhaps comment on breaking news, your site visitors will appreciate seeing at a glance which entry is most important.

So what could your latest entry or sticky post look like? Well, CSS allows us to do so much, you could literally change every single style. In my experiments I changed the background color around the entry title, in another I added a background image which reads 'Breaking News', but you could go so far as to give your entry different font settings, adjust your margins and padding, perhaps even remove the entry footer so your latest entry looks like an html box.

So how do you go about making your latest entry stand out? The key is to understand that all entries on overview pages are given a unique id starting at 0 which is the top (first) entry. Once we understand this, we also need to make sure Serendipity only changes our first entry if it also appears on the startpage otherwise the top entry of every page will adopt our new styles. Read More

Regular visitors to my site will know I often include code snippets in my posts. To refresh your memory on html in your entries be sure to read adding html code to your blog entries

Including html in your posts isn't something you need to do very often, and certainly can't damage your blog, so please feel free to experiment. If you're familiar with HTML basics you would know that the <code> tag is available to be used for code snippets within webpages, and this is equally true of blog posts.

Where it gets interesting is that actually putting any html into your post will automatically be interpreted by your browser. So lets say for example you wanted to include a code snippet that your site visitors could use to link to your website. If you actually place the direct html into your post you'll notice that your browser makes this into a link, and not into a code snippet. Read More

Many new template designers have great ideas, and are often very capable at creating layouts in Photoshop. Unfortunately if they don't know html, the image slice and export to webpage function of Photoshop will simply create a page filled with nested tables that are hard to read and even harder to convert to a blogging engine like Serendipity or Blogger.

In this article I'm going to focus on creating a simple two column css only template which any Serendipity or Blogger template designer can customise for their own template.

Let's start with the assumption that the template will have a header area, and beneath that will be a container holding a content column and a sidebar which could either be on the left or right, and then at the bottom of the page we'll include a footer for the copyright and credits. Read More