Archive for tag 'css'

Jan 10 2011

Variant Creative updated with new 2-column layout

A few days ago, the Variant Creative template was released. Today I have updated the template and added a second layout option with two columns, to show how the template can be customized in an easy way. This is what the new layout looks like:

What has been added?

Basically, all I have added is a second .HTML file, four lines of CSS and two new images. The new .HTML file is called 2-columns.html and it can be accessed by clicking the “two columns” button in the sidebar of the template. In the 2-column layout, the right sidebar has been removed and the main content area has been made wider. A body class has been added to the HTML, along with these four lines in the variant-creative.css file:

[css] .twocolumns #header {background:url(img/front-2columns.jpg) no-repeat top left #2a5a7a;}
.twocolumns #content {margin:-95px 30px 10px 185px;}
.twocolumns #footer {background:#fff url(img/footerbg-2columns.jpg) top center no-repeat;}
.twocolumns #footer p {width:765px; margin-left:175px;}
[/css]

These lines provide the 2-column layout with a different header image, make the main content area wider and adjust the footer to match the header and main content area. The included .PSD file for the header has also been updated to include the 2-column layout header design.

Same template, not a separate download

Most often when I make variations of a template layout, I release the modified version as a separate download. But for Variant Creative, I decided to update the original template and include the second layout in it, since I figured that it could be useful to have the option to use both a 2-column and a 3-column layout on the same website – in the same way as can be done with the andreas01 template (which Variant Creative was inspired by).

Direct download: variant-template.zip (164 Kb)

I am working on an alternate version of this template with a different header design and with a 4-column layout option, which will possibly be released in a few days. If you would want to see something specific added to it (or to the original template), feel free to post your suggestions below.

By Andreas • Build • 1 Tags: css, templates, tutorials, variant creative

Dec 23 2010

Validating your code using Unicorn

I am a big fan of the W3C web standards, for several reasons which I will write more about in future posts. All free website templates on andreasviklund.com are written using valid XHTML and CSS, and I recommend everyone to do their best to keep their code valid. One of the easiest ways to find validation errors is to use a validator service, and one of my favorites is Unicorn, W3C’s unified validator which checks the HTML, the CSS and XML feeds in one single test.

Test your code

Unicorn can test both published websites by entering the URL of the site, and single HTML/CSS files by using the file upload tab. Each test gives either a green light (if the code is valid) or a red light (if there are errors), and all errors are written out and explained which makes them easy to find in the code. The validator can handle many different standards, including html5. You can test it by entering “andreasviklund.com” in the URL field to see the result for the frontpage of this site. It will generate a green light for the HTML code since it consists of valid html5, and a red light for the CSS since I currently use two plugins which include CSS that is not valid. The fact that the errors are found in CSS which is not used on the site doesn’t matter, Unicorn finds the errors anyway.

In order to keep your websites optimized and as functional as possible, I recommend making it a habit to test your code every now and then – especially if you use a CMS and switch to a new theme or install a new plugin. In many cases, errors do not affect the rendering of the pages. But in some cases code errors can break entire layouts, and a validation check is an effective way of finding such errors.

Browser tools

There are also useful plugins and addons for most web browsers that give you the possibility to check the code of websites as you view them, for example the Web Developer Toolbar by Chris Pederick. It is available for the Firefox and Chrome browsers, and it is one of the most useful browser addons I know. I use it every day in my work as a template designer, and I recommend it to anyone interested in web design.

Got tips? Share them!

Do you know about any good validation tool that I should include in this entry? Post a comment with a link, and I will check it out.

By Andreas • Learn • 2 Tags: css, html5, tutorials, web standards

Dec 23 2010

How to add text shadows using CSS

One of many new possibilities that comes with CSS3 is the ability to add shadows on texts. It is an easy way of making a regular design a bit prettier, but it can also be useful to make some text elements easier to read. Browser support for text shadows is still not perfect as Internet Explorer has not had support for it, but the effect works well in newer versions of most other browsers (such as Firefox, Safari and Chrome). I have used it in a couple of the newer templates, such as the recently released Variant Multi (alt) (where it is used on both headers and content text) and in the mobile version of the Learn CSS template where a text shadow is used to make the white site title more visible against a light yellow background image.

The code needed…

To add your own text shadow, the first thing to do is to identify where you want the shadow to appear. If you want to add a shadow to all h2 header tags, then find the CSS for the h2 tags (or create it if needed, and add the following code:

[css] h2 {text-shadow:#888 2px 2px 3px;}
[/css]

“text-shadow” is the property used, and the value it is given here is “#888 2px 2px 3px”. The first part of the value is the color of the shadow, which in this example is grey. The following two values defines the distance for the shadow in relation to the text. First comes the horizontal distance and then the vertical distance, measured in pixels. “2px 2px” moves the shadow two pixels to the right, and then two pixels down from the text position. To move the shadow to the left and up, use negative values, like “-2px -2px”. If both values are set to zero, the text-shadow can work as a “glow”-like effect below the text.

The third pixel value defines the blur radius of the shadow. The lower the value, the sharper the shadow will be. If set to zero, the shadow will be as sharp as the original text. By using a 3px radius, the shadow will fade from the defined color (#888) to the color of the background over a 3-pixel distance.

What value is the best for different kinds of texts? That depends on many factors. background color, font size and what kind of effect you want to get. The best thing to do is to try different values, starting with a light shadow and a small distance and blur radius. Be careful when using text shadows on content text, as the effect should not be used in a way that makes the text difficult to read.

Advanced shadows

The above example shows the absolute basics of the text shadow. The effect can be used in many different ways, and there are a lot of interesting examples to find on the web. For example, you can apply multiple shadows at once, using different colors and distances. For some interesting examples of how to use CSS text-shadow, visit W3.org or kremalicious.com.

By Andreas • Learn • 3 Tags: css, css3, tutorials

Dec 16 2010

How to edit the Variant Multi layout options (part 1)

The latest free website template release, Variant Multi, offers a lot of layout options. But how do the different layouts work? Here is the first part of a short walkthrough of the ideas behind the Variant Multi design…

One CSS file, many small tricks

As you may have seen from the screenshots or the live demo, four HTML files are included in the .zip download. The main difference between those files is that they use different ID:s and classes for some key <div> tags. First of all, this is what index.html looks like:

This file has the 980px wide layout. It has a dual-column feature area, a combined 2- and 3-column main content area with a sidebar and a 3-column footer area with one footer section wider than the other two. Compare this with the included file 600px.html, which looks like this:

Here you can see the 600px wide layout, a single-column feature area, a single column main content area with no sidebar – and a dual-column footer. Both files use the same stylesheet, the included variant-multi.css file. But the files use different ID:s and classes. Here are the most important ones:

The container div

The first div in each HTML file, right after the body tag, defines the layout width. In index.html, the ID used is called “container980″. It gives the layout a fixed width of 980 pixels, as defined by the #container980 style definition in the CSS. The second file, 600px.html, uses an ID called “container600″, defined by #container600 in the CSS. Both ID:s have only one style definition, the width, but it affects the entire page layout since the style is applied to a div which contains all other content in the HTML file. Other options for the container div are “containerfull” for a full-width fluid layout, and “container760″ for a 760 pixels wide fixed-width layout.

The feature div

The feature area looks like this in index.html:

[html] <div id="feature">
<div class="left">
<h2>Feature #1</h2>
<p>This area can be used to put something special in focus. Products, a presentation
or anything you may want to highlight. If not needed, this area can be removed completely.</p>
</div>

<div class="right">
<h2>Feature #2</h2>
<p>Use div class="left" and "right" for two columns, or remove the two extra div:s to use a
single column here.</p>
</div>

<div class="clear"> </div>
</div>
[/html]

The two columns in index.html are created by the two div:s with the classes “left” and “right”, followed by a clearing div that makes sure that the content that follows the feature is positioned in the right place.

In the single-column feature area of 600px.html, much less code is used:

[html] <div id="feature">
<h2>Feature #1</h2>
<p>This area can be used to put something special in focus. Products, a presentation or
anything you may want to highlight. If not needed, this area can be removed completely.
This is the single-column feature style.</p>
</div>
[/html]

Since the feature content doesn’t need to be split into two parts, no additional div:s are needed. In other words, the feature column option is handled in the same way as it is in several of my newer templates, including Variant Duo (which was used in the “Building your first website using a free website template”-tutorial).

The main content area

The same “left” and “right” classes that were used in the feature div, are also used to create the dual content column split in the main content area in index.html. To reduce the main content area into a single column, the div:s with id=”content” and id=”sidebar” are not used at all. All main content is placed directly in div id=”main” – similar to how all content in the single-column feature was placed directly in the div id=”feature” rather than splitted into separate div:s.

So, 600px.html doesn’t use the div:s with id=”content”, id=”sidebar” or the classes “left” and “right” at all. Those classes are not needed to build a working layout using the Variant Multi template – but they give you the ability to choose if you want to use a simple or a more advanced layout for your site. In short, the extra ID:s and classes are what gives the template its name.

Moving on…

The footer area is explained in part 2…

By Andreas • Learn • 1 Tags: css, tutorials, Variant Multi

Dec 10 2010

Changing body fonts

Changing fonts in the templates can give the design a very different look. For a long time, the selection of fonts to use on websites has been limited to a few standardized “web-safe” fonts. But this is no longer the case, there are ways to include own fonts like @font-family – a topic for a future post for sure. But I am still sticking to the basic and most common fonts, and I want to show how the fonts are handled in most of the templates on this site.

It’s all in the <body>

Most often, I define a default font for the template in the CSS definitions for the body tag. For example, in the Daleri Single template the CSS for the body tag looks like this:

[css] body {padding:0; margin:0; font:76% verdana,tahoma,sans-serif;
background:#1a1a1a url(bodybg.jpg) top center no-repeat;
color:#444; border-top:4px solid #444; text-align:center; line-height:1.5em;}
[/css]

The part handling the font is:

font:76% verdana,tahoma,sans-serif;

The percentage sets the size, and the comma-separated list after that sets the desired fonts in order of priority. If Verdana is available in in the browser, then it is used. If Verdana is not available, then Tahoma is used. If neither Verdana or Tahoma is available, the default sans-serif font is used.

If I would want to use another font, for example Georgia, it can be done by simply editing the font titles to “Georgia,Times New Roman,serif”. This affects all text on the page, unless font styles are defined specifically for other tags. One of example can be that the default font is set to Verdana but all headers use the Georgia font.

andreasviklund.com