Nettuts+ » Site Builds

Building a Custom Lifestream Website with Sweetcron

Chris Coyier — Thu, 25 Sep 2008 12:00:28 +0000

Sweetcron is “The Automated Lifestream Blog Software”. It is still in public beta, but is already a very nice blog software package. The beauty of Sweetcron is that new posts are created automatically from your activity elsewhere on the web. New photos on Flickr? Tweets on Twitter? Thumbs up on StumbleUpon? Blog posts on Tumblr? Add them all to your Sweetcron-powered site and they will appear on your site in minutes.

Step 1: Download Sweetcron & Preparation

Sweetcron is free and open source! There is a Google Group that hosts the downloads, wiki, discussion group and all that. You’ll get links to all that by going to the main Sweetcron site and entering your email to download/join.

Before you begin, know that you’ll need to be running this on a server which is running PHP (at least version 5, I had to upgrade versions for my demo site). You will also need a MySQL (4.1) database and all the connection info (database name, database username, database password, database hostname).

Download the latest-greatest copy of Sweetcron and then upload the entirety of it to the directory on your web server you wish the blog to reside. The root directory, if you wish it to be at the root of your site, or in a subdirectory like /blog or /lifestream.

Note: included in the download is an .htaccess file which is required for Sweetcron to run correctly. Some operating systems like to hide this file, so if you don’t see in in the directory you uploaded to, you’ll need to create a new one (see the code below).

Step 2: Install Sweetcron

The first thing to do is verify your .htaccess file is in place and has the following code in it:

	Options +FollowSymLinks
	RewriteEngine On

	RewriteBase /

	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule ^(.*)$ index.php?/$1 [L]

Next, open system/application/config and rename the file “config-sample.php” to “config.php”. Replace the URL with your sites URL. Then rename “database-sample.php” to “database.php” and fill in those details.

Note:If you are installing in a subfolder, there two extra steps.

In config.php make sure the base_url is the full url path to your Sweetcron install, i.e. including subfolder.
Open the .htaccess file found at the base of Sweetcron and change RewriteBase / to RewriteBase /

Now navigate to your site in a web browser and you should be greeted with the final steps for installation (setting your admin account and such).

Step 3: Configuration

After you’ve installed and verified that everything went smoothly, probably the best place to start is to start adding some feeds. Click onto the feeds tab and then the “Add new Feed” button on the right.

Simply drop in a feed address in this box and click the “Add This Feed” button. If you have the “real” feed address (e.g. http://feeds.feedburner.com/nettuts) that is your best bet. However, you can just drop in a regular website URL and it will attempt to auto-detect the feed on that site (e.g. http://nettuts.com/)

Now head over to the Options tab. Here you’ll see the Title and Admin Email you’ve already set up, but there are some other important options here. Items per page is self-explanitory, Cron Type isn’t so obvious. You have two options here: Psuedo-Cron and True Cron. What these options designate is how/when the software does a check of each of your feeds and looks for new items. Pseduo Cron is the default as it requires no server configuration. With Pseduo Cron, if it has been longer than 30 minutes, the next visitor to your site will trigger the job to go look for new feeds. Not a big deal, but that user will experience a longer than normal page load time. True Cron eliminates that problem by having the Server itself trigger that event. If you know what you are doing and can configure your own servers Cron Jobs, click that option and it will give you the URL to hit.

Right after you add your feeds and set your options, you may go back to your site only to find that there are no items! Don’t worry, it’s (probably) not broken. It’s just that 30 minutes have not passed and the Cron job hasn’t been triggered. If you want to “force it”, go back to your options panel, click True Cron, copy the URL and visit it in a browser. This should pull in all your recent feed entries. Or (even easier), click over to the “Items” tab and press the “Fetch New Items Now” button.

Step 4: Administration

The real beauty of Sweetcron is the automation and lifestreaming capabilities, but it is also a regular blogging engine as well. Click the “Write” tab to write your own posts, including tagging!.

Another important note about Sweetcron is that it really is a blogging engine, not just a feed parser. What this means is that when it pulls in a new entry (say, a new Twitter Tweet) it makes an entry for that in the Database and that content now officially lives on your site. If you delete that Tweet on Twitter later on, or in any way change the content of the feed, that won’t automatically change it on your site like it might if you were using a feed parser.

This leads to the last tab in the admin panel: “Items”. This shows you each of the entries that you have either written and posted manually or that it has automatically grabbed from one of your feeds. This is very nice I think. You can easily edit, delete, or simple “unpublish” and particular entry on your site. This is the kind of simple control you want on a website

Step 5: Customization

At this point, your Sweetcron website looks something like this:

That is the default “Sandbox” theme. Not much to look at, but is very well built and a great place to start for designing your own theme! The theming structure for Sweetcron is fantastic and should be very familiar for anyone who has used WordPress.

Sweetcron comes with another theme, “Boxy”, which Sweetcron’s lead developer uses on his own personal site. Here is Yong Fook’s site:

The “Boxy” theme shows off one of the really cool features of Sweetcron, and that is the ability to have each blog post be formatted differently according to its source. Notice how each of the different boxes (posts) on Jon’s site looks different? The top left box is a photo from Flickr (with the title and info overlayed). The next box is a Twitter tweet (speech bubble with user icon). The top right is a “digg”. You are not limited to any particular sources, you can create your own custom designs and apply them to your own custom sources!

Step 6: Designing a Custom Theme

As I mentioned, Sweetcron supports custom themes and works in a way very similar to WordPress. Themes exist as directories of the “themes” folder which lives at system/application/views/themes.

The easiest (and safest) way to get started is to simply duplicate one of the existing themes and modify from there. For my custom theme, I started with the Boxy theme, because it already had the custom-design per-source thing I wanted to use built in.

After you have duplicated and renamed one of the themes, that new theme will show up in the “Options” panel in the admin backend. Simply choose it and click the “Save Options” button.

Most of the files you’ll see in your theme folder are fairly self-explanatory. The “_header.php” file is your DOCTYPE, head section, and beginning of your body. “._footer.php” closes things off (good place for your analytics and such) and “._sidebar.php” is (wait for it) your sidebar.

Perhaps the most important file of the theme is the “_activity_feed.php” file. This is the main content area of your theme and controls the boxes of each blog entry. Similar to the “WordPress loop” this file also contains a loop displaying as many posts as appropriate for that page

Here is the loop, simplified:


    

        
        

        	

			
        	get_feed_domain() == 'twitter.com'): ?>
        	 

        	
        	
        	get_title()?>
        	

			
        	get_feed_domain() == 'chriscoyier.stumbleupon.com'): ?>
        	 
        	
        	
        	get_title()?>
        	get_content()), 38)?>
        	

			
        	feed_id): ?>
        	
        	get_title()?>
        	A blog post
        	

			
        	
        	
        		You don't have anything set up for this!
        	

        	

        	get_human_date()?> | Comments »

To create new custom treatments for posts from different sources, just copy and paste one of the PHP elseif statements from above and customize it. On my site, I am including my Twitter feed, StumbleUpon feed, Flickr feed, and the feeds for CSS-Tricks and my personal blog. I created special elseif statements for each of these sources, in case I want to do special styling for any of them.

This came in quite handy. Sweetcron provides a built in function for snagging favicons of the source, which worked for everything except StumbleUpon who’s subdomains (chriscoyier.stumbleupon.com) prevent that from working. So because I had complete control over how that type of post is displayed, I simply told it to look in the right place manually (see StumbleUpon code above).

Here is what my custom theme looks like:

It is extremely simple. It simply lists the first line of the content of any given post. In the case of Twitter, it’s the tweet itself. In the case of StumbleUpon, it’s the link. In the case of CSS-Tricks, it’s the title of the post. Each post shows its source by the favicon in the margin of the page.

Step 7: Single Page & Static Pages

Each blog post of yours will have a permalink as well, A.K.A, a “single” page. If you want to add comments to your site, this is the place to do it (single.php). Commenting isn’t a built-in feature of Sweetcron, but it is simple enough to add with powerful easy-to-use systems like Disqus. In my theme, I used the dead-simple JS-Kit to add comments to my single pages (literally two lines of code).

If you want non-templated “static” pages for your site (like a Contact page), that is easy to do as well. Simply create a page called something like “contact_chris.php” in your theme directory, and that page will be available at http://your-site.com/sweetcron/contact_chris and the page title will automatically be “Contact Chris”. Keep in mind the header and footer files will be automatically applied here, so you are just creating the main content area.

Wrapping Up

Our lives on the web are more scattered about now than they ever have been, but thanks to generous API’s, open formats like RSS, and awesome software like Sweetcron, the personal website is not dead!

Sweetcron is a relatively new software, but its ease of use, great user interface and extensibility are surely going to be help it take off. I could see it amassing a huge user base and even stealing a little market share away from blogging giants like WordPress.

How to Create a Mobile Site with MoFuse

Thord Hedengren — Mon, 01 Sep 2008 12:34:26 +0000

MoFuse is a service that lets you convert basically any site with a RSS feed, to a mobile site hosted by MoFuse. You can customize the design, setup your very own domain, and even add advertising to the mobile version of your site. This is a great option if you don’t feel comfortable hosting your mobile site yourself. And the best part is, MoFuse supports both traditional mobile phones, and the iPhone, which is really cool.

Getting Started

It is actually very simple to get your site setup with MoFuse. Just fill out the URL to your blog (or whatever), and let MoFuse detect it, on the front page. For our example, I’ll add a mobile version to my own site, and then I’ll customize it somewhat.

In the second step you’ll have to choose an URL for your mobile site, hosted under the mofuse.com domain. Mine is tdhedengren.mofuse.mobi“>tdhedengren.mofuse.mobi, which will work when I’ve finished setting up my mobile site. You’ll also get to pick a category for your mobile site, and play with a dummy version if you will.

If you haven’t used MoFuse before, you’ll be prompted to setup a user account as well. However, if you have, you should do the setup process from within the MoFuse Dashboard (i.e. you need to login first, click Launch a Mobile Site in the left menu). It is basically the same thing, however, so no worries.

Not very difficult, was it?

Customizing the Mobile Site

If you’re happy with the default look of you mobile site, you can skip the customization, however, I do encourage you to at least change the colors to match your current design, and possibly add a logo if you’ve got one. This is how my mobile site looks per default:

It looks decent enough, however, nothing spectacular. I want to carry my brand with me to the mobile screens as well, so let’s make it a little more tdhedengren.com, shall we? First of all, login to your MoFuse Dashboard, and click the site you want to edit. Starting with colors, click Design/Colors in the right column menu within. This will take us to a straight-forward page where you can edit background, header text, header background, text, and link color by entering HEX values in the boxes, or just click them to choose the color you want from the palette.

You can find your colors in your CSS file. I edited mine to go with the style on tdhedengren.com, clicked the Save button, and then clicked the Upload Logo link, which is also available to the right but called Your Logo instead.

My logo is simple. I created a 200 pixel wide one, but added some extra whitespace in the file to the top, since I want to avoid having it “hit” the top header, where my mobile site’s name is displayed. You’ll probably want to play a bit with that, but I went with 10 pixels extra whitespace above my actual logo.

Upload you logo, and then go back to the Design/Colors page. Now you’ll have options for header background color behind the logo, logo alignment, and of course if you want to show it at all. Edit accordingly, use the “refresh preview” link in the dummy preview below the actual settings, and click Save when you’re done. Now it looks like this:

Tweaking and Monetizing

We’re pretty much good to go now, but I’d like to tweak my site a little bit more. With my mobile site selected (i.e. clicked) in the MoFuse Dashboard, I click on Edit Homepage in the right column. This will let me write a little something to add under the header of my mobile site, or even on every mobile page should I want to. You get a simple WYISWYG editor to play with. Keep in mind that a lot of text will push down the links to the actual content, so keep it short. I just went with my standard catch-phrase “designer, writer, blogger” on the front page.

You can even add new pages, exclusive to your mobile site. Just click Add a New Page in the right column, and you get something similar to the Edit Homepage page. There are a bunch of more or less interesting add-ons for you to incorporate, play around if you will. I especially like the QR code, which might not be working across the world. It is basically an image you can print or whatever, and when someone takes a picture of it with their mobile camera, they’ll be directed to your mobile site. Nifty!

You might want to add a 57×57 pixel webclip icon for the iPhone and iPod touch. Click iPhone Settings in the right column, a wee bit down, and provide an URL to the icon file. You can turn on and off the iPhone version of your mobile site here as well, but why you’d want it off is beyond me.

One of the more interesting one is the Monetize option. This will let you embed ads on your mobile site, just by entering some details for either Google Adsense, or AdMob. Then you’re good to go. Mobile ads will probably not be a heavy hitter for you, but still, it might be something. For myself, I’ll leave it off, my site isn’t about ad dollars, and even if it were, I tend to look at mobile sites as a way to prolong the brand and, hopefully, get a faithful visitor on the traditional website as well.

Finally, you might want to redirect visitors using mobile devices to your mobile site, automatically. Click Automatic Redirect to the right, and fetch the PHP code to paste it according to the instructions. However, this code is experimental, but as far as I can tell it really shouldn’t harm or slow down your site much. Tests with it worked too, but use at your own risk, of course.

Setting Up Your Own Domain

I’m not happy with having tdhedengren.mofuse.mobi as my mobile URL. It is too long, and it doesn’t really work wonders for my brand. I want m.tdhedengren.com to lead to the mobile site, which is something of a standard solution for traditional websites having a mobile version: Put it on a subdomain, preferably m (short) but mobile is pretty common too.

You’ll need access to DNS records to pull this one off, which means that you’ll probably have to be hosting your own site (although some creative redirects might be able to solve this as well). Managing DNS records isn’t something most of us do, so you might want to talk to your webhost about this. Remember, screwing up the DNS means that your site won’t be working, and I’m not talking about just your mobile one, your main site might be affected as well. Proceed with caution!

Since I’m a madman, I’ll give it a go anyway. First of all, let’s click Custom Domain in the right hand menu, at the top. All you need to do there is to enter your custom domain, mine being m.tdhedengren.com, and click Save. This won’t point the domain in question to MoFuse and your mobile site, but it will let MoFuse know that it should expect it.

Now let’s point the subdomain, m.tdhedengren.com, to the mobile site. This is when it gets dangerous, since you’ll need to make a DNS entry for the subdomain. What you want to add is a CNAME entry for m, pointing to your MoFuse address, mine being tdhedengren.mofuse.mobi. Various DNS managers look and work in different ways, and my current host needed me to send in a support ticket to make the CNAME entry. Another host I’ve got access to, however, have a DNS manager that looks like this:

Please note the m CNAME pakten.mofuse.mobi part, which is the m.pakten.se subdomain pointing to pakten.mofuse.mobi.

Save, and then wait. It will take up to 48 hours for a DNS entry to go through across the world, although you’ll probably see result faster than that.

If you don’t want to fiddle with the DNS, you could do a subdomain redirect to your MoFuse URL. That would mean that anyone using your subdomain would be sent to your MoFuse URL, which is almost as good. Most webhosts offer subdomain redirects like this, so that shouldn’t be a problem to setup. You could also use the PHP script mentioned above to check what kind of device that are visiting your site, and serve the mobile version when appropriate that way

Welcome to the mobile web!

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

From PSD to HTML, Building a Set of Website Designs Step by Step

Collis Ta'eed — Thu, 19 Jun 2008 13:10:05 +0000

Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

Demos

If you’re like me, you like to see the end before beginning. You can see the final four HTML files by following these links:

Download the Files

Additionally you can download the full HTML/CSS/Image source files here.

What We’re Building

As you may or may not know, I’ve (very slowly) writing a book on WordPress theming. What we’re building is actually the HTML that I’m using in the book to build the main example themes. The final set of themes is called Creatif. You can see the 4 mockups shown in screenshots below (click to get the larger versions).

You can get the full layered PSD files *and* a tutorial on designing them up from our PSDTUTS Plus membership – but it will cost you $9 a month to access. If you don’t wish to join though, don’t worry because you can follow today’s tutorial completely just using the JPG screenshots below.

Part 1 – Building the Framework and First Page

Unlike previous Site Builds this tutorial is covering a decent sized template. So we’re going to take this in stages. First we’ll do the framework, then the first page, then alternate pages, then finally an alternate colour scheme.

Step 1 – Getting Ready

So first of all we boot up our code editor of choice. I actually use Dreamweaver most of the time (and Textmate sometimes). I find it has some pretty decent code tools and a few features that I’m really used to (in particular a powerful Find+Replace and a quick hook up). If you do use Dreamweaver, I recommend setting up a "Site".

In any case the first things to do are create a directory structure and get ready to build. I usually have an /images/ directory and a /scripts/ directory, and then plonk all my CSS and HTML in the root.

Step 2 – Quick Early Layout

The first thing we’ll do is a quick overall layout in HTML with some barebones CSS just to make sure we’ve got a solid foundation. We can also check it in the major browsers (IE7, IE6, Firefox, Safari) just to make sure we’re on a solid footing. There is nothing worse than coming back all the way to the beginning to fix browser compatibility issues. It’s much better to do it as you go.

So we’re building the first mockup, we can see a few things:

The design is centred. That immediately tells us we have to wrap it in a container and then centre that container.
Essentially the design is a series of horizontal blocks. Sometimes the blocks have two columns, sometimes one. So we can do it as a series of
’s. This is good because we can then mix and match elements into different pages as you’ll see later.
We have a footer which is a different colour. This means the background needs to be that colour, in case the users browser stretches. So the footer will need to sit in a different container to the main stuff.

So here’s a HTML layout:





    
    Creatif
    




    

    	

        	

            	Logo / Menu

            

            

            	Featured Content

            

            

            	Content

            

        

    

    

    	

        	Footer Stuff Goes in Here

As you can see there are two segments: the #main area and the #footer area. Inside each we have a

element which will be fixed width and centred. Then inside the main container we just have a sequence of

’s. Now let’s add a little CSS as follows:


body {
	margin:0px; padding:0px;
	background-color:#131211;
}

#main {
	background-color:#c4c0be;
}
#footer {
	color:white;
}
.container {
	width:950px;
	margin:0 auto;
	border:1px solid red;
}

So we’re setting the body’s background colour to the dark brown of the footer. Then the #main area has the lighter background. Finally you can see the .container elements have a width of 950px and are centred using margin: auto. I’ve also added a red border just so you can see where the elements are on the page.

You can see the layout here, or view the screenshot below.

Step 3 – Add Some Background Images

So our layout is looking ship shape. With the main elements positioned, it’s just a matter of going through and styling it all up, couldn’t be easier

The first thing we need are some images. You can make these yourself if you have the layered PSD’s, or just grab the download ZIP and you’ll find some I made earlier!

Here’s a screenshot of me saving the first image – a large background JPG. I’m using this large background image to get that radial gradient highlight, then I’ll use a thin 1px slice to fill out the left and right sides so it extends off.

Similarly we’ll create a background image for the footer to tile along as a border between it and the main area (you can find that image in the ZIP file, it’s called background_footer.jpg). Now we’ll update the CSS file to remove that red border and add our new background images, as follows:

@charset "UTF-8";
/* Background-Styles */

body {
	margin:0px; padding:0px;
	background-color:#131211;
}
#main {
	background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
	background-image:url(images/background_light.jpg);
	background-repeat:no-repeat;
	min-height:400px;
}
#footer {
	background-image:url(images/background_footer.jpg);
	background-repeat:repeat-x;
	color:white;
	padding:40px;
}
.container {
	width:950px;
	margin:0 auto;
  	position:relative;
}

Two things to note:

There are multiple ways to set a background. In #main I’ve used a single selector which sets three properties – colour, image, image repeat. But you can also set each property individually as I’ve done in #main .container and #footer.
Notice that because I want to apply the "background_light.jpg" image to the
which inside #main, but not to the one that is inside #footer, I’ve written #main .container. In other words, apply it only to elements with the class=’container’ that are inside elements with id=’main’.

Step 4 – Testing in Browsers

So far so good. Don’t forget to test in different browsers. Here you can see in IE7 it’s looking fine and dandy!

Step 5 – Making a Transparent Logo

Next I’ve created the logo element. Because later on we’ll be running an alternate colour scheme I’m going to use a transparent background PNG file. You can make these by switching off the background in Photoshop and then going to File > Save for Web and Devices and selecting PNG-24. You should be aware that PNG-24 produces pretty high file sizes. It’s OK for a small image like this, but for larger ones it can be big.

(If anyone knows how to make compressed PNG files, leave a comment, because I’m pretty sure there is a way to do it, I just don’t know how!)

Anyhow you can grab the transparent logo PNG here.

Now we’ll add our logo and also a menu with this HTML:




    
    Creatif
    
    



    
    	

        	

            	
                	Portfolio
                	Services
                	About
                	Testimonials
                	Request a Quote
                

            	
                	Creatif
                    A Family of Rockstar Wordpress Themes
                

            

            

            	Featured Content

            

            

            	Content

            

        
    

    
    	

        	Footer Stuff Goes in Here

and this extra CSS:


#header {
	padding-top:20px;
}
#logo h1, #logo small {
	margin:0px;
	display:block;
	text-indent:-9999px;
}
#logo {
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
	width:194px;
	height:83px;
}
ul#menu {
	margin:0px; padding:0px;
	position:absolute;
	right:0px;
}
ul#menu li {
	display:inline;
}

Some things to note:

Rather than just placing the logo image in the HTML, we’ve created a
and inside that placed a
with the title. Then using CSS we’ve made the text vanish and swapped it for the logo image. This has some SEO benefits.
I used to just set the text to display:hidden, but a kind commenter on a previous tutorial pointed out that this is a bad practice and it’s better to use text-indent. So as you can see I *do* read my comments
I’ve placed a very quick, unstyled menu using an unordered list. By setting the display property to inline for the
elements, the list changes to a horizontal set of elements … yay!
Finally because our
element has position:relative, we can now use absolute positioning inside and set right:0px for the menu and it will be aligned to the right. This is great for a WordPress theme because as the person creates new pages the menu will extend, and this way it will stay right aligned.

Step 6 – Fixing Transparency in IE6

Now the one problem with transparent PNGs is that our friend Internet Explorer 6 doesn’t support them! Fortunately that’s relatively easily fixed thanks to this article I found – The Easiest Way to Fix PNG for IE6. We just download a script and add this line in our CSS:

/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }

Unfortunately for me though my testing copy of IE6 which because I’m on a Mac is through Darwine – doesn’t recognize the fix … So I have no idea if my hack is working

So anyhow at this point I stopped paying attention to IE6 I’m going to have to get me yet another way to view IE6, maybe through parallels.

In any case, here’s a screenshot of what we get in IE6 when transparency is *not* working…

Step 7 – Fixing up the Menu

Now our menu is still looking pretty ugly, so let’s add a few styles to finish it off, as follows:

ul#menu {
	margin:0px; padding:0px;
	position:absolute;
	right:0px;
}
ul#menu li {
	display:inline;
	margin-left:12px;
}
ul#menu li a {
	text-decoration:none;
	color:#716d6a;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
	color:#211e1e;
}

Nothing very exciting here except that we’ve defined an "active" style which is the same as the :hover style (namely it’s a darker shade). That means we can write and the link will darken. Later in WordPress we’ll make it so that you can tell what page you are on at any given time.

Step 8 – Adding the Featured Portfolio Item Content

Now we have the base of our page laid out, it’s time to start adding the content blocks. As I mentioned earlier we are going to make this site as a series of interchangeable content blocks. The first one is the "Featured Project" block. So let’s add some HTML:

            
            	

                	
                    	
                    
                    
                        Eden Website Design
                        in web design tagged corporate, web2

                        And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. 
                        

                        View Project

So that code goes below the

code from the previous steps. And unstyled it looks like this:

There are two important things to note here:

You will see that we have a
followed immediately by a . This is because the boxes we are drawing have a double border, first there is a 1px dark grey border, then inside that a 1px white border. So having two elements means we can have a border on each. I don’t know why I used a on the inside, and as you’ll see later on we wind up changing it
Where we have the View Project button, instead of using an image, we’re going to create a ‘button’ class and then apply it to regular text links. This makes for a very simple, reusable button look and feel.

Step 9 – Adding some Basic Styles

Now we apply some basic styling like this:

/*
	Block-Styles
*/

.block {
	border:1px solid #a3a09e;
	background-color:#ffffff;
	margin-bottom:20px;
}
.block_inside {
	display:block;
	border:1px solid #ffffff;
	background: #ffffff url(images/background_block_slice.jpg) repeat-x;
	padding:30px;
	overflow:auto;
}

.image_block {
	border:1px solid #b5b5b5;
	background-color:#d2d2d2;
	padding:5px;
	float:left;
}
.image_block img {
	border:1px solid #b5b5b5;
}
.text_block {
	float:left;
	width:430px;
	margin-left:30px;
}

So as I mentioned above we have the .block class which just sets a border and bottom margin. Then immediately inside we have the .block_inside element which has a white border, thin slice background (to give it that faint gradient), some padding and finally an overflow value.

We have overflow:auto because we are going to have two floated elements inside. I used to use a clearing

but someone in my previous comments pointed out that this works just as well and is a lot cleaner!

Then inside we have an .image_block class which gives our image a double border (one on the

and one on the itself) and which is floated left with our main .text_block also floated left to form a mini columned layout.

So our layout now looks like this:

Step 10 – Adding Text Styles

Now the text styling is all over the place at the moment. It sort of looked OK in the previous screenshot because Firefox which I was using has defaulted to a Sans-Serif font. But if I’d screenshotted IE you would have seen a Serif’d typeface instead. So we should get the text sorted out now. We’ll add these bits of CSS to our stylesheet:

body {
	margin:0px; padding:0px;
	background-color:#131211;
	font-family:Arial, Helvetica, sans-serif;
	color:#7f7d78;
	font-size:13px;
	line-height:19px;
}

/*
	Text-Styles
*/

h2 {
	margin:0px 0px 10px 0px;
	font-size:36px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
}
small {
	color:#595856;
	font-weight:bold;
	font-size:11px;
	display:block;
	margin-bottom:15px;
}
a {
	color:#007de2;
	text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }

a.button {
	background:#32312f url(images/button_bg.jpg) repeat-x;
	padding:5px 10px 5px 10px;
	color: #ffffff;
	text-decoration: none;
	border:1px solid #32312f;
	text-transform:uppercase;
	font-size:9px;
	line-height:25px;
}
a.button:hover {
	background:#007de2 url(images/button_bg_o.jpg) repeat-x;
	border-color:#007de2;
}

So:

First I’ve updated the body tag to have a default font, colour, size and line-height.
Then we’ve created a
style which fixes the margins and sets the font to Helvetica
We’ve also created a style for subheadings (like what category a post is in etc)

We’ve created a link style and link:hover style

We’ve reset the

styling so that the margins are fixed from the stupid defaults

Finally we’ve created that button class. Note that I’ve defined it as "a.button", or in other words all tags with the class = "button". Why didn’t I just make it ".button" ? Well later on there is a good chance that I will make a second button class for ’s and it will be slightly different. So this way they won’t accidentally interact.

In the button class you will see we’ve set some padding, a border, a background image, a hover style and a line-height attribute … wait a line-height attribute? Yes unfortunately this is a fix for IE which otherwise cuts off the button.

Withour extra styling, the page is starting to take shape!

Step 11 – Adding the Ribbon

One of the neat things about this design is the little blue ribbon strips in the right corner. Thanks to a mix of CSS, transparent PNG files and absolute positioning, these are really easy to add. So first we need to make the image. Once again we create an image with a transparent background and save it as PNG-24, here’s the image:

Next we need to place the image in our HTML, we can do it like this:

			
				
            	

                	
                    	
                    
                    
                        Eden Website Design
                        in web design tagged corporate, web2

                        And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. 
                        

                        View Project

So you can see the tag there on the second line. Note I’ve given it a class=”ribbon” and put it inside the .block element, but outside the .block_inside element. That’s because if we do it inside .block_inside it messes up the overflow:auto property we set earlier. Anyhow right now this will just mess up our layout, so let’s add some styling:

.block {
	border:1px solid #a3a09e;
	background-color:#ffffff;
	margin-bottom:20px;
	position:relative;
}
.ribbon {
	position:absolute;
	top:-3px;
	right:-3px;
}

You can see that we’ve:

Added a position:relative attribute to the .block element. This is so that we can use absolute positioning inside and have it relative to the .block element (and not the whole page)
Then we’ve set the image to appear 3px past the right edge and 3px past the top edge.

Easy! Back in the day, we would have had to use some super complicated

layout to achieve that same effect. Here’s how it’s looking now:

Step 12 – Creating the Second Block

With the ribbon added, our first block element is complete! Now it’s time to start on the next

block. This one will have that text about the theme and the recent projects list. So first we add some HTML:

			

            	

                	
                    	
                            
                            PSDTUTS Theme Design
                            Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. 
                            View Project
                        
                    

                	
                    	
                            
                            PSDTUTS Theme Design
                            Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. 
                            View Project
                        
                    

                    
                    	
                            
                            PSDTUTS Theme Design
                            Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. 
                            View Project
                        
                    

                

                
                    Creatif is a WordPress portfolio theme for designers and creatives
                    You can use it to quickly turn WordPress into a portfolio website.  Not familiar with WordPress? Fear not, the theme accompanies a book called How to Be a Rockstar Wordpress Designer by Rockstar Resources due for release in 2008.
                    The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.
                  And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at PSDTUTS and NETTUTS.

So that looks like lots of code, but it’s not really. Let’s go through it:

First we’ve created a container
to wrap up the code segment
Next we’ve got a
which contains three identical
’s. We’ll talk about these in a second.
Next we have a
which is filled with some text and a
heading.
What we are going to do is float the text column and portfolio items side by side to form two columns of content.
We’re going to replace that
with a background image.
And we’ll style up those mini_portfolio_item divs to look nice using a similar double border effect as we did earlier.

Here’s the CSS:

/*
	Portfolio-Home-Styles
*/

#block_portfolio {
	overflow:auto;
	margin-bottom:20px;
}
#portfolio_items {
	width:615px;
	margin-right:25px;
	float:left;

}
#text_column {
	float:right;
	width:310px;
}
#text_column h2#text_title {
	text-indent:-9999px;
	background-image:url(images/creatif.jpg);
	background-repeat:no-repeat;
	width:310px;
	height:129px;
}

.mini_portfolio_item {
	border:1px solid #a3a09e;
	margin-bottom:10px;

}
.mini_portfolio_item .block_inside {
	background:none; background-color:#e2dddc;
	padding:25px 30px 15px 30px;
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

OK again, looks like a lot, but it’s not too bad. Let’s go through it step by step:

First we’ve again used overflow:auto on the main #block_portfolio element. That’s because we again have two floated columns and if we don’t do this, they’ll run over the footer.
Next we’ve set #portfolio_items to float to the left, have a margin to separate it from the text column and a width of 615px.
The #text_column is set to float to the right with a width of 310px.
Inside the text column we’ve again done that trickery with our
tag where we use a massive text-indent to make the text disappear and then instead use a background image.

Next we have three style definitions for the mini_portfolio_item elements as follows:

First we set a 1px dark border and a margin between them
Next we redefine the .block_inside styles to suit these elements. Remember .block_inside was defined earlier when we did the Featured Project area. So here we are overriding the background image, changing the background colour and changing the padding.
Finally we make the thumbnail images float left and have a border.

So all in all it’s looking like this:

Step 13 – Adding a Ribbon.

Now we want to add a "Recent Projects" ribbon to the top most item. To do this we simply slot it in, in the same position in the HTML as previously, like this:

					
                    	
                    	
                            
                            AudioJungle Site Design
                            Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. 
                            View Project

Then we add a position:relative attribute to the mini_portfolio_item element like this:

.mini_portfolio_item {
	border:1px solid #a3a09e;
	margin-bottom:10px;
	position:relative;
}

But something weird happens… While the right hand side looks correct, the top is getting cut off, as you can see in the screenshot:

The reason is that the element that our mini_portfolio_item is sitting inside is cutting it off. So we check up and see that the mini_portfolio_item’s are all inside a

. So the solution is pretty easy, we add 3px of padding to the top which is just enough space for our ribbon to show through. Here’s the adjusted CSS:

#portfolio_items {
	width:615px;
	margin-right:25px;
	float:left;
	padding-top:3px;
}

Step 14 – Finishing off the Portfolio Items

Finally I’ve swapped in a few images and titles so we can see how the page looks with 3 different items instead of the same one repeated. Then I also decided to get rid of the View Project button and just have a text link. This looked a bit cleaner and less busy. So here’s the final portfolio items section (shown in Safari, don’t forget to keep testing in different browsers!):

Step 15 – Adding Footer Content

Now there is just one more section to our page: the footer! Let’s add some text content to it:

	
    	

        	
                Designed by Collis Ta’eed, do with this as you please
                You can read a photoshop tutorial for creating the design at PSDTUTS, You can read a PS->HTML tutorial for creating the site at NETTUTS and you can learn how to turn the HTML into a Wordpress theme in the upcoming book How to be a Rockstar Wordpress Designer
			

	        
                More Links
				
                    VECTORTUTS
            		FlashDen
            		AudioJungle
            		FreelanceSwitch
            		FaveUp
                
            

            
                RSS
				
                    RSS Feed
            		What is RSS?

A few things to note:

I’ve created three
’s to house the content of the footer, we’ll float these into place in a second.
Since the first column is a different width I’ve given it a second class called "long". Note that you set two classes like this: class="class1 class2", not like this: class="class1" class="class2" which is invalid markup.
Inside the columns I’ve used

Here’s how it’s looking!

Step 16 – Styling the Footer

Styling the footer is a pretty simple job, here’s the code we need:

/*
	Footer-Styles
*/

#footer {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
.footer_column {
	float:left;
	width:120px;
	margin-right:30px;
}
#footer .long {
	width:610px;
}
#footer h3 {
	color:#e2dddc;
	text-transform:uppercase;
	font-size:10px;
}
.footer_column ul li, .footer_column ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

Going through:

First we set the fonts for the #footer area
Then we set all the columns to float with a default width of 120px
We override this width for the .long column. Notice that I’ve set "#footer .long" instead of just ".long". The reason I did this is that "long" is the kind of generic name I might use again later on somewhere else, so it’s a good idea to specify it more clearly.
Finally the
and

Step 17 – Adding a Favicon!

We’re almost finished our first page. It’s time to add some niceties. First a Favicon. These are those little icons that appear in your browser bar. I don’t need anything fancy, just a little black square with a C for Creatif will do nicely. So first we create a square image like this:

There are lots of sites to make Favicons (Visit SixRevisions for a list of them) but I always use html-kit’s for no particular reason. You just upload the image and hit Generate Favicon.ico.

Then we hook it up with this line of HTML:

Step 18 – Validating!

Now it’s time to check that our markup is w3c valid! So we go to the Validator put in our code and cross fingers … and pah-bow We are not valid. I don’t think I’ve ever been valid on the first try actually, I must have some bad habits!

Looking down there are 14 errors. The number one problem is that there is no alt text on any of my images… whoops! So going back and adding them like so:

should fix up lots of the errors. So now we run it again and … drum roll … D’oh! Still invalid. OK this one looks a bit trickier:

Fortunately the remaining 8 errors are actually the same problem. Basically I’ve used an inline element (specifically a ) and then tried to put block level elements like

’s inside. Apparently that’s not allowed … whoops!

Luckily that’s easily fixed, we just change every instance of to a

. And … YAY! We pass

Finished Part 1!

OK we have successfully made our basic page! Here you can see me testing it in IE7 and thankfully there are no bugs.

Here’s the completed page

Part 2 – Building the Variations

With our basic framework in place we are now ready to build the extra pages and the alternate colour scheme. Happily we’ve lain a good foundation and will be able to make use of a lot of the code we’ve already written. This is why it’s really important to plan ahead.

If you don’t plan you can easily wind up with a lot of duplication, extra code and other folly.

Step 19 – Building the Blog Homepage

The next page we’re going to build is the blog homepage. This is similar to the portfolio homepage in that it will have a featured blog post and then a series of blog posts below. Eventually these will become two related WordPress themes – one for portfolios, one for blogs.

So first we duplicate our index.html – the file we’ve been working on up ’til now, and call the new file blog.html.

In our blog.html we first delete the whole

. We’re going to replace that block with a different one shortly. Then we replace the

with a new block for featured blog posts which is just slightly different and looks like this:

			
				
            	

                	
                    	
                    
                    
                        New Blog Design Launched
                        on april 13 in web design tagged blogging
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. 
						Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. 
                        

                        Read More

So really all I’ve done is change the id tag to be block_featuredblog, the ribbon image and the content. Essentially though it’s the same layout. So let’s take a look and see how it’s looking:

Step 20 – Adjusting some CSS

So that pretty much works as is, we’ll just make a couple of small adjustments to the CSS like this:


#block_featuredblog .text_block { padding-top:5px; width:490px;}

h2 {
	margin:0px 0px 10px 0px;
	font-size:36px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
	line-height:39px;
	letter-spacing:-1px;
}

Here I’ve adjusted the "text_block" class but only when it’s in the #block_featuredblog element. It now has a tiny bit of padding at the top and is wider.

Also I’ve added an appropriate line-height to the heading and on a whim adjusted the text kerning by -1px. And we’re finished with this element! Easy peasy!

Step 21 – Making the Main Content Area

Making this content area is the last big thing we need to do really. It will form not only the bottom of this page, but also the whole basis of the generic page (with some adjustments of course!). So first let’s put in some really basic HTML:

			

            	
                    

						Content

                    
                 
                 
                 	

                    	Sidebar Content

So basically what we’ve created is a container element –

and then inside that we’ve got two blocks which we’re going to float to either side. You’ll see I’m making use of our good old

elements to add the double border. Here’s the CSS to make them sit correctly:

/*
	Block-Content-Styles
*/

#block_content {

}
#content_area {
	width:665px;
	float:left;
}
#sidebar {
	float:left;
	width:281px;
	position:relative;
	left:-1px;
	margin-top:15px;
	background-color:#e2dddc;
	border:1px solid #a3a09e;
}
#sidebar .block_inside {
	background:none;
	background-color:#e2dddc;
}

Going through the styles:

Then we’ve given the #content_area box and the #sidebar box each a width and a float.
Next I’ve moved the sidebar to the left by 1px using a position:relative. I did this so that the left border would overlap and it would look like it’s jutting out.
Additionally I’ve added a 15px top margin so that the sidebar isn’t top-aligned. Currently it looks a bit odd, but when we add some content it will look great.
Finally I’ve redefined the .block_inside in the #sidebar element to override the background image and instead give it that beigey colour for a background.

Step 22 – Adding Content

Now we add some content to our two elements to style:

Working on a New Project
on april 13 in web design tagged blogging
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.
Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

Design Awards!
on april 13 in web design tagged blogging
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.
Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

This Site is Almost Complete Finally...
on april 13 in web design tagged blogging
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.
Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

RSS Feed
Email Updates

Step 23 – Making the Generic Page

Making our final page is a piece of cake now. We just duplicate our blog.html and call it page.html this time. Then remove the featured blog post and alter the HTML of the #block_content area as follows:

		

            	
                    

                        Services
    					Branding
                        

                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. 
						Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

                    
                 
                 
     				
                 	

                    	Services

                        
                        	Branding
                        	Graphic Design
                        	Web Development
                        	Marketing
						  

                        Related Portfolio Items

                        
                        	Eden Branding
                        	FlashDen Logo Design
                        	PSDTUTS Website

Which is pretty much the same HTML as previously just with some different text and a new ribbon. The only real change is that now we have a title and above that a subtitle wrapped in an

tag. So we can style that with a couple of lines of CSS as follows:

h4 {
	color:#007de2;
	margin:0px 0px 0px 0px;
}

And that is that! See the final generic page here.

Step 24 – It don’t matter if it’s Black or White!

Now we’re going to do some very simple CSS to switch the site from light to dark. What’s neat about this is the only HTML we need to alter is this one line:

That’s it! With that one bit of extra HTML code we can make all the CSS adjustments necessary. This means if you wished you could very easily make a little Javascript button that switches the stylesheet. The way it’s going to work is for any class which needs to change we just add an extra style beginning with body#dark. So first of all we say:

body#dark {
	background-color:#1e1d1b;
}
body#dark #main {
	background:#292826 url(images/background_dark_slice.jpg) repeat-x;
}
body#dark #main .container {
	background-image:url(images/background_dark.jpg);
}
body#dark #footer {
	background-image:url(images/background_dark_footer.jpg);
}
body#dark ul#menu li a.active, ul#menu li a:hover {
	color:#ffffff;
}

And that tells the browser that if then to override the styles for #main, #main .container, #footer, and the active and hover states of the menu, swapping in some new background images and changing the text colour to white! Easy as pie!

Step 25 – Borders and Fixing the Text

As you can see in the image below our footer is fixed thanks to the new background image and colour, there’s just two more fixes: the "Creatif is a WordPress …" text and the borders around the boxes which are quite light and should be dark now. So we do this:

body#dark .block, body#dark .mini_portfolio_item {
	border-color:#1b1a19;
}
body#dark #text_column h2#text_title {
	background-image:url(images/creatif_dark.jpg);
}

Step 26 – Alternate Colour!

And that’s it! We have an alternate colour scheme all controlled by a single id tag on the element. That’s the magic of transparent PNG files and CSS for ya!

Finito!

So that’s it! The HTML is totally finished. Don’t forget you can see the full pages by following these links:

Additionally you can download the full HTML/CSS/Image source files here and via PSDTUTS Plus you can get the full layered PSD files *and* a tutorial on designing them up.

Finally if you are interested in my upcoming ebook on WordPress theming – How to Be a Rockstar WordPress Designer - where I’ll show you how to build these themes and lots of other neat stuff, then you can add your name to the mailing list below and we’ll send you a $10 off discount code when it comes out:

(Note that the discount code email is the only one you’ll get, your details won’t be going anywhere else!)

How to Build a Maintainable Site using CushyCMS and Twitter

Collis Ta'eed — Wed, 14 May 2008 06:27:49 +0000

Sometimes it seems there are as many CMS products out there as there are web developers. In this tutorial we’re going to build a simple one-page site and then in less than 5 minutes, get it setup with a Twitter feed for daily updates and with CushyCMS for general content. If you haven’t seen it, Cushy is a completely free and extremely simple to use product that’s come on the market recently.

Demo and Source Code

The Brief!

Recently I came to the realisation that I should really have a personal site. I don’t take design work, but it’s nice to have a place to refer to when I write bio’s and so on. Also a month or so ago I started using Twitter to put up my daily thoughts on business, the web and stuff. This seemed like a logical thing to stick on my personal page. Also it’s important that the site be easy to manage so I don’t let it get outta date. So you could say this was my brief.

First a Design

Before getting to the build I spent a few hours in Photoshop trying some ideas. I need something simple – I don’t have time for anything else, professional – who knows who is going to visit, and nice looking – I do claim to be a designer right?

Anyhow here is my design. I used a nice vector illustration from iStock – always good for doing something quick that looks awesome! I used a really nice and free font – Colaborate Thin. And finally a nice orange-blue colour scheme that by a stroke of good fortune turned out to match my orange photo!

So I won’t dwell on the design too much. If you click the image below you can get a large version of the JPG in case you want to follow along.

Step 1 – Cutting up Images

Looking at the design in Photoshop, it’s clear there are a bunch of images I’m going to need. If this were a more complex design, I’d use Photoshop’s Slice tool, but it’s pretty simple, so I’ll just crop the file and create a bunch of images – one for the table, one for all the titles, one for the "follow me" bubble, one for the nettuts image and one for the photo of my giant forehead! Here are the images I made:

Note I’ve only shown one title, but of course I actually made lots of those.

Step 2 – Planning the HTML

Next we plan our HTML layout. Very deliberately this site is going to be extremely easy to build. It’s simply a sequence of blocks. Previously I’ve written about how to us Absolute Positioning to make a layout, this time we’re going to use super simple Relative Positioning.

As you will recall when you place elements on a page they have a natural place they go to, relative to elements that came before. Because we’re not using columns or really anything fancy in this design it’s going to be perfect for using this regular postioning.

As a general rule, whenever you want to make your life easy in HTML, it’s best to do things in blocks laid out horizontally. This is the easiest way to work with CSS and doesn’t require much fiddling for browser compatibility. As soon as you start putting in columned layouts, things get a bit trickier. So we’ll save that for another tutorial, on another project.

So anyhow the layout we’ll use is something like this:

Main Heading

Section Heading
Div Block of Content

Section Heading
Div Block of Content

Section Heading
Div Block of Content

... and so on...

The best thing about this plan is that later on if we suddenly go "hey I wish I had my an extra block for favourite images", it’s like no problemo! Just slip it in, use the same CSS classes and everything. This really is the simplest layout around, and with a nice design it can look really cool nonetheless!

Step 3 – Laying out the initial HTML

OK Create an index.html file and then here’s my first stab at the HTML, it’s not perfect and is missing the Twitter bit, but it’s a good starting point and we can make a few adjustments later as we go:




	Collis Ta'eed - A Little About Me
	





    Hi I'm Collis, entrepreneur, blogger and designer.

	
    

    	
	    After working as a web designer - both employed and freelance - I cofounded a startup with a few friends in 2006.  Our company, Eden, has since grown and I've had the good fortune to work on lots of very exciting and interesting projects, everything from FlashDen to Blog Action Day. 

		Thanks to the brilliant nature of the web, I'm currently living and working out of Hong Kong and travelling the world. You can find me online on Twitter where I post random thoughts, or you can send me an email from the form at the bottom of this page.  Thanks for stopping by!

    

    
    
    

    
    

    	
        NETTUTS
		In April Eden launched a sister site to PSDTUTS which Iíve been working on.  The site hosts web development and design tutorials.

    

    
    

    	Some links to sites that I have a hand in:

        
        	FlashDen - Our main Eden project
        	How to Be a Rockstar Freelancer - A book I cowrote with my lovely wife
        	FreelanceSwitch - The highly successful blog on freelancing
        	PSDTUTS - The best photoshop blog around!
        	Blog Action Day - A nonprofit, annual event
          

    

    
    

    I'm the first to admit that Iím not very good at answering all my emails, but I do my best and if you have need, then you can email me.

Things to note:

I’ve linked to a file called "style.css". This is where we’ll place our styles later, so go ahead and create a file with that name.
The whole thing is inside a
. I did this partly out of habit to be honest, but I’m going to use the
to place my background image. and to make sure I don’t stray out of the 1000px width that I need to stay inside of for people on 1024px x 768px screens.
The "logo" heading is inside a
. Then we’ll use the part to make the text invisible and give it a background image so it looks like the design. This has benefits for SEO, and was a suggestion from the comments of a previous NETTUTS tutorial (thank you commenter whose name I’ve forgotten, but whose suggestion I’ve taken to using! )
Each section is an title and then a
. I’ve filled them in mostly with content, except for the Twitter box which we’ll worry about in the next step.

Step 4 – Add a little CSS

Now we’ll add a tiny bit of CSS to make the page look a bit more like where it’s going to end up. Create your ’style.css’ file and place these two definitions in:

body {
	background-color:#191e25;
	margin:0; padding:0;
	color:#5f6874;
	font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif;
	font-size:13px;
	line-height:21px;
}

#container {
	width:900px;
	padding:50px;
	padding-top:30px;
	background-image:url(images/Computer.jpg);
	background-repeat:no-repeat;
	background-position:top right;
}

A couple things to note:

I’ve set a font-family that uses a slightly unusual set of fonts. Lucida Grande is on most, if not all Macs, and Lucida Sans Unicode is on most PC’s, so most people should see a nice Lucida typeface. If not they’ll still see Arial or some default sans-serif. Either ways Lucida looks cool, and that’s what I get to see
I’ve used my
The 50px padding we’ve set in the container will effectively do most of our positioning for us on the page.

And here’s how our page is looking now:

Step 5 – Now Let’s Grab the Twitter

Now we add the content from Twitter. This is a great way of making the page feel really dynamic because I update my Twitter feed most days. Also it’ll be a way of driving people over to add me to their Twitter networks, and then in the future when I launch new sites I can drive traffic to new places. So really it’s all part of my not-particularly-devious plan.

So Twitter have made grabbing their feed really easy for us, just do the following:

Log in to your Twitter account
Click that Yellow box in the right hand bar that says "Put your updates on your site!"
When prompted for MySpace, Blogger, etc, choose "Other"
Select the HTML/JS option so we can style it up with CSS later
Then set the Number of Updates (I set mine to 3) and copy + paste the code.

Here’s the process in images!

And here’s the code that Twitter gives us:

Note I deleted the

bit that Twitter inserts in, because we don’t need an extra title, we’ve already got one. Then it’s also worth taking Twitter’s advice and moving the two Javascript lines to the bottom of the page just before . That way it loads in last. Because Twitter is notorious for its downtime, this will stop them from killing our site accidentally!

So by looking at the HTML they’ve given us, we can guess that the Javascript is probably going to fill in that

’s it’ll place there. And that is exactly what it does do…

Step 6 – Add Google Analytics

Now at this point I will also add in some Javascript to hook my site up with Google Analytics. I think most web developers have heard of Analytics, but if by chance you’ve been living under a rock, I really recommend trying it out. It’s free, and it’s a powerful way to monitor your traffic. When you’ve gotten an account, you simple Create a New Website Profile, enter a domain name and you’ll get in exchange some Javascript code to paste into your HTML documents. Easy peasy!

Step 7 – More CSS

Next we’ll add a couple more styles that will get us even closer to our end product. They are:
```
a img { border:0 }

a { color:#cc5630; text-decoration:none; }
a:hover { color:#ffffff; }

.content_box {
	width:590px;
	margin-top:15px;
	margin-bottom:30px;
}
```
Here we are removing borders of linked images (i.e. the link to NETTUTS and the photo of me which will link to a bigger version), also we’re setting the colour of our links on the page in general. Finally with the content_box style we set a width for our content blobs and using top and bottom margins separate them up on the page. Here’s how our page looks now:

The next thing to do is to get some text-wrapping happening around our two images. The first thing to do is add an class to the images we want to wrap (the photo and the nettuts image). I didn’t think to do this earlier, but can see I need to now. So we change the images to have:
Then we add a quick style to make the float to the left with a bit of a margin, like this:
```
img.photo {
	float:left; margin-right:20px;
}
```
Unfortunately while nice and simple, this solution doesn’t quite make the grade because my text block is too long, so it’s wrapping … booo! Never mind, easily fixed. We’ll place that text in it’s own block and make it float too.

So we’ll adjust this content_box so the HTML code is now:
```
	

    	
	    
            After working as a web designer - both employed and freelance - I cofounded a startup with a few friends in 2006.  Our company, Eden, has since grown and I've had the good fortune to work on lots of very exciting and interesting projects, everything from FlashDen to Blog Action Day. 

            Thanks to the brilliant nature of the web, I'm currently living and working out of Hong Kong and travelling the world. You can find me online on Twitter where I post random thoughts, or you can send me an email from the form at the bottom of this page.  Thanks for stopping by!
		  

        

    
```
So you can see I’ve wrapped the text in a
and then added a
at the bottom. This extra
will be used to clear the floats, otherwise the floating layers would wind up going over the top of the content further down the page. So here is the additional CSS code to make this work:
```
.about_text {
	float:left; width:380px;

}
.clear { clear:both;}
```
We have to give our about_text block a width so it floats alongside the photo. Now that fixes our problem nicely. However if you look at the image shown below, it seems like there is a weird gap that’s appearing between the top of our text block and the image.

Weird gaps are the worst to come across, because it can be really hard to figure out what’s causing them. In our case here though I happen to remember that the
tag has a default top margin which if we get rid of will probably solve our issue. Here’s the code to fix this:
```
	p { margin:0px; margin-bottom:20px; }
```
So now every paragraph will have no margin except 20px below it (spacing out the next paragraph element).

Step 8 – Replace our Heading

As I mentioned earlier we’re going to use a bit of CSS to replace our
tag at the top with the much nicer looking image so we get SEO benefits and nice looking title. If I was conscientious I would do this technique with all those subheadings too … but I’m not!

So all we’re going to do is use the tag that we so cleverly placed earlier to set the text’s display to none – making it hidden. Then we’ll give the
a height so the background image doesn’t get cut off, and finally we’ll set the image to appear. Here’s the CSS code we need to make this happen:
```
h1 {
	background-image:url(images/title_main.jpg);
	background-repeat:no-repeat;
	height:60px;
	margin-bottom:50px;
}
h1 span {
	display:none;
}
```
Step 9 – Style the Twitter Area

Next we’ll style our twitter box. But before we do, I realised I’d totally forgotten to place my "Follow Me on Twitter" image on the page (silly Collis!) No matter, I’ll add it in now, here’s the resulting HTML code for the area we are working on:
```
	
    

    	
            
            
        

    
```
Notice that the image appears inside the twitter_div. We’re going to use one of the great benefits of CSS styling to position it so it sits outside of the box. Now if this were the old days and I was making this layout with a

, I would wind up using SOO much more code here, setting borders and lots of background images and stuff. Thank goodness for CSS. Here’s our CSS code:

#twitter_div {
	border:1px solid #222830;
	background-color:#101318;
	position:relative;
	min-height:40px;
	padding:40px;
}
#twitter_div img {
	position:absolute;
	bottom:-22px;
	right:-14px;
}

This code turns our twitter_div box into a nice dark box and then positions the inside. Notice that I’ve given the outer twitter_div a relative position. Then on the inside I’ve set the image to an absolute position. Absolute positioning always positions according to the last container with a relative position. If isn’t contained inside any other HTML elements, or none of those elements have a relative position, then it defaults back to the whole browser window.

Because our twitter_div is relatively positioned though, the absolute position will be in relation to that

. So in other words top:0px, left:0px, would be the top-left of the twitter_div container. Similarly, bottom:-22px and right:-14px, is measured from the bottom-right of the twitter_div. In this case because we’ve added minus numbers, we’re actually positioning it outside the div.

This is the easiest way to place images that are meant to overlap a box, border, line, whatever.

Positioning can be a bit fiddly to find the exact right number of pixels but you can work it out quickly with a sophisticated technique I call "trial and error"

Step 10 – Style the Twitter FEED

So that’s looking pretty good now, but really not quite what we had in mind. In fact what I originally wanted was the date/time to be on the left hand side, where the bullet points are. And of course the whole thing needs better spacing.

Now because the content is coming from some Javascript which we don’t have any control over, what we need to do is figure out a way to work with what we have. Here’s what we know:

Each tweet is in an
The date/time bit is a link, so it must be wrapped in an element.
And we know that the link is the last thing in each tweet.
And we know that links inside of tweets aren’t linked. (I know this because I tried pushing through an actual link and it didn’t appear linked). SO in other words we know that the date/time bit is the ONLY element wrapped in an .

So using this information we can apply a style to the

and elements to format it how we want. Here’s how we do it:

#twitter_div ul {
	margin:0px;
	padding:0px;
}
#twitter_div ul li {
	list-style:none;
	margin-bottom:5px;
	margin-left:90px;
	font-size:12px;
}
#twitter_div ul li a {
	width:70px;
	display:block;
	position:relative;
	top:-43px;
	left:-90px;
	line-height:19px;
	text-transform:capitalize;
}

Some things to notice about the first two definitions:

The first definition just gets rid of default margins and padding on the
- Next we get rid of the bullet points (list-style:none). Then we separate the
- elements with a bottom margin
- Then we also tell the
- elements to have a huge left margin of 90px. This will make enough space for us to move our date/time links into the gap.

The last definition applies to any elements in the list, which is why it was important to check that these date/time links were the only links. First we tell the link to display:block. By setting the link to be a block level element, we stop it from sitting inline with the rest of the text and move it by default to sit below the text as a block.

Now because by default a block element like our link now is, will align to the left, we can say with confidence where the link will be positioned. I.e. that it will be just below our text and aligned to the left. If you want to see what I mean, just delete everything after display:block and look at the result.

With this knowledge, we can use relative positioning to move it relative to where it is now. So we say the link should be 43px higher than where it currently is, and 90px to the left. And this then places the link right where we wanted it! Try it and see!

Complete HTML & CSS

OK! We’re done with our HTML and CSS! You can download the files – images, CSS, HTML – using the link below:

Download Images/HTML/CSS

Step 11 – Testing for Screensize

Now we’re done with our HTML it’s time to do some testing. The first thing to test is how it’s going to look on a 1024×768 screen. I use a Firefox plugin to do this called Firesizer which is just so handy. It appears in the status bar, as shown and you select the screensize and Bam!

Anyhow everything turned out OK so no changes here!

Step 12 – Testing for IE6

Next we test IE6. Because I’m on a Mac, I use a really crappy IE6 solution using something called Darwine. On a PC you can get a standalone install of IE6 that doesn’t tamper with your IE7 install.

If you’re a web developer and you use IE6 by default, you need to stop immediately! hehe. Well I guess there would be cases where it’d be a good idea – e.g. if you were developing for a huge IE6 audience. Still, that’d be pretty weird. I highly recommend Firefox myself, but Opera, Safari, IE8 Beta, even IE7 would be good. Not to mention all the more obscure browsers…

(Note there is an IE7 solution via Darwine too, but as far as I can tell it’s demented … like really crazy and unusable)

Step 13 – Testing for IE7

Now we test for IE7 because although it’s much better than IE6, it can still do the crazies now and again. For this I have to run my newly installed copy of Parallels.

Boy browser testing is laborious!

Still it’s not nearly as labourious as if I’d run into problems! Fortunately it all checked out OK.

Step 14 – Validate Our Markup

And finally because some commenters here are NETTUTS suggested that I really should be validating my markup, we’ll go push it through the W3C validator

Now I know it looks like I have lots of problems there, but in fact they are all coming from the Twitter Javascript – tsk, tsk, tsk, for shame! hehe. So it’s OK, I’m off the hook!

Step 15 – The HTML is Finished! Now to Upload …

And now it’s time to upload. I get out my trusty FileZilla and hook up to collistaeed.com and up goes the site!

With that done … we can turn to CushyCMS!

Step 16 – CushyCMS – Introduction

Now the purpose of this tutorial was really to show you how to use CushyCMS. At least it was until I realised that this is kinda stupidly easy to use and not really worth a tutorial (I learnt to use it from that video they have on their site!)

So anyhow the service is completely free and works by FTPing into your server and modifying the files you tell it to modify. It’s really simple to use as you’ll see, not hugely featured, but it does what it does well. From their homepage it looks like there will be more stuff coming in the future which they’ll be charging for.

I recommend giving it a try as it could be a nice solution for a lot of small client websites, or of course for a site like mine! So anyway, we go to CushyCMS and sign up.

Step 17 – Setup CushyCMS For The New Site

Once you’re logged in, it’s a two step process to get setup:

The first thing to do is Add a Site. This basically just involves giving them the FTP details
Then we Assign Page(s), for us there’s only one, so that’s an easy choice

Step 18 – Adding the CushyCMS Class

Now in order for CushyCMS to know what elements should be editable, we need to specify them in the HTML of the page using a special class definition. So we have to go back to our HTML and add in some class="cushycms" bits.

Now the bits we want to be editable are those

areas. But they already have a class= definition. But that’s OK! You can assign multiple classes to a single element by separating them with a space like this:

. So the resulting HTML code is:

Collis Ta'eed - A Little About Me

Hi I'm Collis, entrepreneur, blogger and designer.

After working as a web designer - both employed and freelance - I cofounded a startup with a few friends in 2006. Our company, Eden, has since grown and I've had the good fortune to work on lots of very exciting and interesting projects, everything from FlashDen to Blog Action Day.

Thanks to the brilliant nature of the web, I'm currently living and working out of Hong Kong and travelling the world. You can find me online on Twitter where I post random thoughts, or you can send me an email from the form at the bottom of this page. Thanks for stopping by!

NETTUTS
In April Eden launched a sister site to PSDTUTS which I've been working on. The site hosts web development and design tutorials.

Some links to sites that I have a hand in:

FlashDen - Our main Eden project
How to Be a Rockstar Freelancer - A book I cowrote with my lovely wife
FreelanceSwitch - The highly successful blog on freelancing
PSDTUTS - The best photoshop blog around!
Blog Action Day - A nonprofit, annual event

I'm the first to admit that I'm not very good at answering all my emails, but I do my best and if you have need, then you can email me.

Now we go back to CushyCMS and our page is fully editable!

One thing, I should point out is that when I tried to make my Twitter area editable, the CushyCMS system just deleted my empty

Source

As a good alternative to this sort of super easy, no coding required, sort of CMS, you could also check out Light CMS which I’ve tried and quite liked too – though it works a little differently.

Conclusion!

So hope you enjoyed the tutorial. Be sure to visit my site, and twitter feed and give the CMS a whirl.

If you know of any other similar CMS products (like Cushy or Light), please leave a comment as it’d be good to do a wrap up of them here sometime.

Build a Sleek Portfolio Site from Scratch

Collis Ta'eed — Sat, 26 Apr 2008 05:11:46 +0000

There’s nothing like building an entire site to show you a good overview of how a CSS layout should work. Over at PSDTUTS we’ve got a tutorial where you design up a sleek, high end web design. In this tutorial we’re going to take that PSD file and build it with some nice clean HTML and CSS.

Demo and Source Code

Step 1

So here’s the design we’re going to be building. As mentioned you can follow the tutorial over at PSDTUTS to build this design from scratch. In this tutorial we’re only going to build this homepage, however using that as a base you would be able to build interior pages following the same layout.

Step 2

The first thing to do is decide how we are going to structure our build. This process gets easier over time as you learn how CSS layouts can work. For this design I think we can get away with a very simple build which uses quite a bit of absolute positioning and a large background image.

What is Absolute Positioning?
When you place an HTML element on a page (e.g. a

and so on) it has a natural position which is determined by what came before it. So for example if you put a

down with some text in it, and then you place another

it will naturally appear just below the first

. It will just flow on relative to the last element.

Absolute positioning is different in that you are specifying an exact placement for an object and taking it out of the regular flow of elements. So if you had your first

just as before, but for your next

you gave it an absolute position of left:500px; top:500px; Then it would appear precisely in that location regardless of the previous

You set the absolute position of something like this:


.className {

	position:absolute;
    top:0px;
    left:0px;

}

Drawbacks to Absolute Positioning

The main problem with using absolute positioning is that your elements don’t really relate to one another. So for example if you have one block of text near the top of your page, and another block of text a bit further down, it might look great when each block of text is short. But if the top block were to have a big essay in it, then instead of pushing the next block of text down, it will just go over the top. This is because you are taking the elements out of the natural flow of the page.

So Absolute Positioning is only really useful for objects that you know will always be a certain size, and which don’t really need to interact with other elements.

Why it’s useful to us today
The good thing about Absolute Positioning, is that it’s really, really easy! You tell the browser where to put something and that’s where it appears! To top it off, there are far fewer browser compatibility issues when you position things absolutely. After all 100px is 100px whether you’re in Firefox, Internet Explorer, or Safari.

SOOO our layout
So the way we are going to make our website is:

Have a large background image
Absolutely position the logo, menus, and heading panel precisely where they are meant to appear
Have all our content appear in a regular
tag, but give it so much padding-top that the content is pushed all the way down to where it’s meant to be
Have our footer sitting underneath

If that doesn’t make a whole lot of sense yet, don’t worry it will as you see the site take shape!

Step 3

Now in terms of background images, we need two. One is going to be gigantic, and in fact after I saved it as a JPG it is about 56kb in size. There used to be a time where that would have been a bit too big, but these days it’s not a big deal.

So that’s the main area, then we need a second background image which will be a thin slice. This slice will repeat over and over off to the right so that when the browser window is dragged open it tiles out.

(Note the logo shouldn’t be showing below in the background image, that was just some bad screenshotting, sorry!)

You can see the two images I’ve created here and here.

Step 4

OK so now let’s start our HTML. First we lay out some basics:





	PSD vs NET
	




	

		

	



	

    
        Made for a PSDTUTS and NETTUTS tutorial by Collis!
        See the Photoshop Tutorial,
        see the Web Tutorial

As always it’s best to work from the outside in with our layout. So what I’ve done here is place three major

’s. The first two are the outside_container / container and the other is the footer. This requires a little explaining:

I’ve created the outside_container and container because I need a double background image. That is I need a tiling background image, and then on top of that I need that large background image. So in the outside_container I’ll place the tiling background, then on the container
which will appear on top of the outside container, I’ll have that big main background.
The footer needs to be outside the containers because if the browser window were stretched lengthwise, the footer should go on and on. Since it has its own background, it can’t be in the containers – if it were and you stretched at some point you’d see the container background and not the footer!

Also you’ll see I’ve added some content inside the footer, that’s just the mini logo, and the text. I’ve wrapped the text in a tag so that I can manipulate it. There’s no reason to give the tag an id or a class, because we can just say #footer img and since it’s the only image in there, we can call it that way. This keeps our HTML a little simpler.

Step 5

Now the CSS for our code so far:


body {
	margin:0px; padding:0px;
	background-color:#11090a;
	font-family:Arial, Helvetica, sans-serif;
}
#outside_container {
	background:url(images/background_slice.jpg) repeat-x #000000;
}
#container {
	background:url(images/background_main.jpg) no-repeat;
	min-height:800px;
}
#footer {
	border-top:1px solid #3f2324;
	padding:30px 50px 80px 50px;
}

So going through one at a time:

First we are redefining the body tag. This is almost always the first thing I do. We get rid of any default margin and padding, set a background color and a font-family for the page. Notice that the background colour is in fact the footer background colour. As I mentioned previously this is so that if you stretch the browser window vertically you’ll keep seeing footer.
Next we have the outside_container tag. I’ve given it that slice background, it’s going to repeat only along the x axis (i.e. from left to right) and wherever there’s no background image we’ll see straight black (#000000). So basically as the page gets longer the tiles won’t keep going because we said to only repeat left-right, instead we’ll get the black background. This is perfect because our tiling image fades to black!
Next we have the container. Here we have the gigantic background image set to not repeat – so it only appears once. Notice we didn’t specify a background colour, if we had it would have covered our outside_container over. That’s because this
tag is inside the previous one, and will automatically be stretching out to fill it up completely. So our background image appears on top and then outside that area you can see the outside_container background showing through.
I’ve also given the container a minimum height, this is just so that when we look at the HTML page at this point you can see roughly how it’s going to look when there is content. Later on our content will produce the minimum height anyway.
The footer is basically just a single line border and some padding. There’s no need to give it a background colour, because we set that in the earlier. Remember with the padding definitions it goes like this: padding: top right bottom left (clockwise!)

Here’s where we are up to now…

View The Site So Far

Step 6

Next we’ll finish off that footer by adding a few extra styles like this:


/*
	Footer
*/
#footer {
	border-top:1px solid #3f2324;
	padding:30px 50px 80px 50px;
	color:#674f5d;
	font-size:9px;
	line-height:14px;
}
#footer img {
	float:left;
	margin-right:10px;
}
#footer span {
	display:block;
	float:left;
	width:250px;
}
#footer a {
	color:#9e8292;
	text-decoration:none;
}
#footer a:hover { color:#ffffff; }

So here I’ve added a few bits to our #footer class and created a few more classes. Let’s go through it one piece at a time:

First of all the bits between /* and */ are CSS comments. It’s nice to have comments in your CSS file as it really breaks it up and helps keep things intelligible. Actually on larger projects I find CSS files can get pretty out of control if you’re not careful. So it’s really good to try to get into good habits early: name your selectors well, add comments, keep like things together, break into multiple CSS files for larger projects and so on.
In #footer I’ve added a font color, font size and line-height to our previous definition. Line-height is a really useful text attribute as it helps you space out your text. Without good line-height text can look bunched up and harder to read. Too much line-height and the text will be so spaced out it looks weird. So you might want to experiment to find the right heights for different fonts and sizes. Here 14px seemed like a good fit.
Next I’ve set the #footer img and #footer span to both float:left. Because they are both set to float left, they end up in columns next to each other. I’ll talk more about floating and columns later in this tutorial.
Finally we tell the browser what to do with tags (i.e. links) that appear in the footer. Namely that they shouldn’t be underlined, and should change color when you hover over with a mouse.

So with the addition of the footer here’s where up to:

View The Site So Far

Step 7

Now with the footer out of the way, let’s add some more content to the page inside the main container areas. First we need two new images that we make out of our PSD file:

Notice that I’ve used an image for the big text block. In general it’s best to use text for these things as it makes the page much more searchable and is good practice. But it would have been much harder to do as we’d need to use a bit of Flash and SIFr to achieve that effect. So since this is a fairly straightforward tutorial I’ve opted to just use a big image

Here’s a snippet of our HTML code – just the containers bit:



	

		

        
        	Retouching
        	Digital Effects
        	Web Work
		

        
        	About
        	Contact

So inside the container area we’ve added five things:

Our logo: It’s linked, so clicking it should take you to the homepage, and has id="logo"
Main menu: This is simply an unordered list with id="menu"
The right hand side menu: This is the same as the other menu, just different id="right_menu"
Big text panel image: This is our main heading text saved as an image, id="panel"
Content Div: And this is where we are going to place all our page content later on. I’ve left it empty right now except for an HTML comment.

So before we start styling it up, it’s worth having a look to see how the page looks with just everything dumped on like this:

As you can see we’re going to have to do some serious shifting around to get everything into place. As you’ll recall we’re going to use Absolute Positioning to do this quickly and easily.

Step 8

Here’s the CSS we add to make our elements start to fit into place:


#container {
	background:url(images/background_main.jpg) no-repeat;
	min-height:800px;
	width:1000px;
	position:relative;
}

/*
	Logo / Menu / Panel Positioning
*/

#logo { position:absolute; top:58px; left:51px; }

#panel { position:absolute; top:165px; left:51px; }

ul#menu {
	margin:0px;	padding:0px;
	position:absolute; top:145px; left:75px;
}
ul#right_menu {
	margin:0px;	padding:0px;
	position:absolute; top:145px; right:75px;
}

So again let’s go through each bit piece by piece:

First of all, you’ll see an old bit of our code – the container. I’ve shown this as I’ve added two more lines to it now. It now has a width:1000px and position:relative. This is important because when you set position to be relative, anything absolutely positioned inside, is done so relative to that container tag. So this means I can position things inside this box, using the fact that I know it’s 1000px wide. Namely I’ll be using that for the right_menu.
Next because this is a new set of CSS, I’ve sectioned it off with a comment
With the logo and panel I’ve given both an absolute position on the page. How do I know what numbers to use? Simple go back to the original Photoshop document and measure out where they are meant to be! You can see it’s a really simple class definition, which is why absolute positioning is so easy.
Next with the two menus, these are also absolutely positioned, but here I’ve also given them margin:0px; padding:0px; definitions to make sure we clear away any default margins and padding which unordered lists have.
Next notice that on the right_menu when I have specified the absolute position to be right:75px. This means that it will appear 75px away from the right hand side of its container. Ordinarily that would be the browser window, but because remember earlier I set the container to have position:relative that means it will be 75px away form the right hand side of
.
Now you might be thinking, well what’s the point, can’t I just position things using left only? Well you can, but with our menu, if you were to add extra menu items you would need to reposition it again and again so that it was still 75px away from the right hand side. Whereas by using right the extra menu items flow left when you add them. Try it and see!

So here’s where we are at:

Step 9

As you can see in the previous image, the logo and heading element are now looking like they are in the right position. But the menus are looking kinda weird. Before we style those, a quick word on the logo / image panel. You might be wondering, if they are both images, why not make them part of the background image?

The answer is that the logo we want to make linkable, so that clicking it will take you back to the homepage (makes the site more usable), and the main text panel, well that would probably change from page to page. So by having it a single image, we can have lots of HTML pages using the same CSS stylesheet but simply positioning a different image there with different text.

Now let’s style the two menus and make our page really start to take shape. To do that we need the following CSS:


ul#menu {
	margin:0px;	padding:0px;
	position:absolute; top:138px; left:75px;
}
ul#right_menu {
	margin:0px;	padding:0px;
	position:absolute; top:138px; right:110px;
}
ul#menu li, ul#right_menu li {
	margin:0px;	padding:0px;
	list-style:none;
	margin-right:10px;
	font-size:9px;
	text-transform:uppercase;
	display:inline;
}
ul#menu li a, ul#right_menu li a {
	text-decoration:none;
	color:#bd92b2;
}
ul#menu li a:hover, ul#right_menu li a:hover {
	text-decoration:none;
	color:#ffffff;
}

The first two bits of this code are the same as before (although I adjusted the positions a little to make them look right after styling). Notice that these two definitions are separate as they have different positions, but after that we’ve combined the two into the same class definitions as the menu items themselves should look the same. The format for defining two classes together is:

.myClass, .myClass2 { … }

This is very different from this definition:

.myClass .myClass2 { … }

Because the second definition says, all elements with class="myClass2" inside an element with class="myClass".

Anyhow so back to our styles, let’s go through some important points:

We’ve set the
- Then we’ve said for all
- elements inside those
  - The next definition says that for link tags that appear inside an
  - tag that are inside

And with that, our page is now looking pretty good!

View The Site So Far

Step 10

Next it’s time to add some content! First let’s add some dummy text, set up so that we can make columns. Here’s the HTML:

Retouching
Digital Effects
Web Work

About
Contact

a sleek design

Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.

tutorials

recent work

OK so in this snippet, you can see I’ve added 3 new

’s inside the content area. Each one has a

title element and them some text. They have class names column1, column2 and column3. The reason I’ve added all the extra text is to show you something about making columns.

First let’s add some CSS to make them appear like columns:


/*
	Content
*/

#content {
	padding-top:435px;
	padding-left:85px;
	width:815px;
	color:#674f5d;
	font-size:13px;
	line-height:20px;
}
.column1 { float:left; width:230px; margin-right:30px; }
.column2 { float:left; width:230px; margin-right:30px; }
.column3 { float:left; width:270px; }

As usual I’ve sectioned off our new bit of CSS with a comment. Then I’ve set some styles for #content. Notice how much padding-top there is … 435px! This is to make space for all those absolutely positioned elements earlier. Unlike those elements this content area is in the normal flow of the page.

It needs to be in the regular flow because as you add more content to it, it should push the footer down. If this was absolutely positioned it would just go over the top of the footer.

Now the three column classes, notice they are each set with a width and with float:left. This tells them that they should drift to the left of the page aligned next to any other left floating elements. I’ve given the first two a right margin so they aren’t stuck to each other.

Floating an element makes it drift to the left or right, and tells everything else to wrap around it. When the other elements are also floated, they form into columns. Generally any time you see a column layout, it’s using floats.

Unfortunately there is one weird problem with floats. Namely that they have a problem with their containers. Instead of pushing the next elements down, they just drift over the top. The way to solve this problem is to have an element that comes after them which has the property clear:both.

The Clear property says to stop wrapping stuff around the floating

’s. It’s a bit hard to explain, so let’s look at what happens with and without the clearing.

Without Clearing
Here is how the layout looks as is:

See how the columns have drifted over the top of the footer, and the footer itself has started wrapping around them. That’s not right!!

With Clearing
The solution is reasonably simple, we need to add a

after the three columns like this:

a sleek design

This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.

tutorials

recent work

See the

down the bottom? It’s just an empty

that says to clear out the three columns. And it fixes our problem,

View the Site Here.

A Few Last Words on Floats & Clearing Them
You might be wondering why I didn’t place the "clear:both" into the

definition, but unfortunately that doesn’t work out because of the background we’re using … here’s a screenshot:

Apparently there is a solution that doesn’t involve inserting a useless

tag, and you can read about it at QuirksMode. Personally I’ve been using this method for a while, and it works well and consistently so I keep doing it.

Step 11

OK, almost there now!! The main layout is all sorted, all we have to do is add and style our content. Here’s the HTML for it:


	

        	

            	a sleek design

                This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
				The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.

            
            

                tutorials

                Psdtuts and nettuts provide tutorials on the following topics (sorta):

                

            
            

            	recent work

            	
                	
                    	
                        	
                            Working Within Limitations to Achieve Great Designs
							Sean Hodge
                        
                    
                    
                    	
                        	
                            Create a Slick Tabbed Content Area using jQuery
							Collis Ta’eed
                        
                    
                    
                    	
                        	
                            Creating a PayPal Payment Form
							Collis Ta’eed

It’s basically the same structure as previously except in the third column I’ve created an

tag wrapping up the image, the heading and the text. So the whole thing will become a block link. That means if you roll over the image, the text associated with it will still change colour.

So here’s the CSS for our content:


#content h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#dbaa70;
	margin:0px 0px 20px 0px;
	font-weight:normal;
}

ul.work {
	margin:0px; padding:0px;
}
ul.work li {
	list-style:none;
	margin:0px; padding:0px;
	clear:both;
}
ul.work li a {
	color:#e0b882;
	display:block;
	padding:5px 10px 5px 10px;
	text-decoration:none;
	font-size:10px;
}
ul.work li a img {
	float:left;
	margin-right:20px;
	margin-bottom:20px;
}
ul.work li a h4 {
	color:#674f5d;
	margin:0px;
	font-weight:normal;
	font-size:13px;
}
ul.work li a:hover, ul.work li a:hover h4 { color:#ffffff; }

Lets go through the classes one by one:

First we are redefining what

’s that appear inside
look like. We could have just redefined all
’s, but you never know when we might have a
that appears somewhere else, so it’s good practice to be reasonably specific. All I’ve done here is change the colour, font, weight and margins to make it look the way I need.

Then we have the

And that’s it! We’re done!

Finished!

And with that the site’s homepage is complete. You can download a ZIP of the site files to look through – it contains the HTML for different stages of this tutorial. And of course you can see the final HTML document:

View the Final Page Here

Internet Explorer

Now you should always be doing cross-browser testing. Alas I have just switched from Windows to a nice new Mac and haven’t got a Parallels/Win install yet, so I can’t! I did a quick check via BrowserShots.org and can see it’s mostly working fine in IE6/7, however there is a problem with the three columns forcing the footer much further down than they should. Anyhow should be an easy fix, but until next week when I’ve installed Windows, IE users you’re on your own

I will update here once I’ve had a chance to iron out the crinkle but I didn’t want to hold off publishing until then!

Nettuts+ » Site Builds

Building a Custom Lifestream Website with Sweetcron

Step 1: Download Sweetcron & Preparation

Step 2: Install Sweetcron

Step 3: Configuration

Step 4: Administration

Step 5: Customization

Step 6: Designing a Custom Theme

Step 7: Single Page & Static Pages

Wrapping Up

How to Create a Mobile Site with MoFuse

Getting Started

Customizing the Mobile Site

Tweaking and Monetizing

Setting Up Your Own Domain

From PSD to HTML, Building a Set of Website Designs Step by Step

Demos

Download the Files

What We’re Building

Part 1 – Building the Framework and First Page

Step 1 – Getting Ready

Step 2 – Quick Early Layout

Step 3 – Add Some Background Images

Step 4 – Testing in Browsers

Step 5 – Making a Transparent Logo

Creatif

with the title. Then using CSS we’ve made the text vanish and swapped it for the logo image. This has some SEO benefits.

Step 6 – Fixing Transparency in IE6

Step 7 – Fixing up the Menu

Step 8 – Adding the Featured Portfolio Item Content

Eden Website Design

Step 9 – Adding some Basic Styles

Step 10 – Adding Text Styles

style which fixes the margins and sets the font to Helvetica

Step 11 – Adding the Ribbon

Eden Website Design

Step 12 – Creating the Second Block

PSDTUTS Theme Design

PSDTUTS Theme Design

PSDTUTS Theme Design

Creatif is a WordPress portfolio theme for designers and creatives

heading.

with a background image.

tag where we use a massive text-indent to make the text disappear and then instead use a background image.

Step 13 – Adding a Ribbon.

AudioJungle Site Design

Step 14 – Finishing off the Portfolio Items

Step 15 – Adding Footer Content

Designed by Collis Ta’eed, do with this as you please

More Links

RSS

tags for the headings. It’s always good to use nice semantic markup, both because it makes it more readable, and because search engines like to see those headings and lists all laid out properly.

Step 16 – Styling the Footer

and tags get some simple styles

Step 17 – Adding a Favicon!

Step 18 – Validating!

Finished Part 1!

Part 2 – Building the Variations

Step 19 – Building the Blog Homepage

New Blog Design Launched

Step 20 – Adjusting some CSS

Step 21 – Making the Main Content Area

Step 22 – Adding Content

Working on a New Project

Design Awards!

This Site is Almost Complete Finally...

Subscribe

Categories

Archives

Step 23 – Making the Generic Page

Services

Branding

Services

Related Portfolio Items

tag. So we can style that with a couple of lines of CSS as follows: h4 { color:#007de2; margin:0px 0px 0px 0px; } And that is that! See the final generic page here.

Step 24 – It don’t matter if it’s Black or White!

Step 25 – Borders and Fixing the Text

Step 26 – Alternate Colour!

Finito!

How to Build a Maintainable Site using CushyCMS and Twitter

and
tags get some simple styles

tag. So we can style that with a couple of lines of CSS as follows:

h4 { color:#007de2; margin:0px 0px 0px 0px; }

And that is that! See the final generic page here.

a height so the background image doesn’t get cut off, and finally we’ll set the image to appear. Here’s the CSS code we need to make this happen:

h1 { background-image:url(images/title_main.jpg); background-repeat:no-repeat; height:60px; margin-bottom:50px; } h1 span { display:none; }

’s that appear inside
look like. We could have just redefined all
’s, but you never know when we might have a
that appears somewhere else, so it’s good practice to be reasonably specific. All I’ve done here is change the colour, font, weight and margins to make it look the way I need.