Carter

by Carter
Thursday, September 11th, 2008
12:00 am


This is often what our life is: I continue to go about the very important work of creating and exposing propaganda, and Elrond tries to get me to look at CG porn. I'm not against it per se, but there's a time and a place.

I think Nicholas is going to need some counseling.

Carter

by Carter
Thursday, September 11th, 2008
4:50 pm


There are two really fantastic and, more importantly, free solutions for custom blog creation: Joomla and Wordpress.

Being open-sourced, Cascading Style Sheet (CSS) based systems, there's a huge community of designers and programmers providing free layout templates for both options. However, templates can't work for every website, and what if you don't want a design that anybody else can have?

Luckily, the process for building a customized template for either Content Management System (CMS) begins the same way: building your design as simple HTML and CSS.

This tutorial is NOT for learning:

  • How to install these CMSes on a variety of server types.
  • How to design a good looking site.
  • How to create PHP from scratch.
  • How to optimize a site for search engines.
    • All this tutorial is meant to do is take your design from Photoshop to either Joomla or Wordpress, using CSS and customized PHP.
    Programs I'll be using:
    • Adobe Photoshop
    • TextEdit
    • Firefox

    Getting Started

    Like I previously mentioned, this tutorial isn't about what looks good. I assume that you've got your "dream" layout made in Photoshop, but you don't know how to make your actual website look like it.

    The example we're going to use is the redesign of Out To Lunch Productions' website. We love those guys (that guy, really. It's just one dude.)

    Identify what's what

    You'll need to do a fair amount of planning to get your CSS code right. Take your design and identify which elements will need their own DIV CLASS and which ones will need their own DIV ID.
    Class vs. ID

    For multiple elements that will use the same div attributes, you need to use div class instead of div id. You shouldn't have more than 1 of each div id. IDs use a preceding "#" and classes use a "."

    HTML <div id="header">Element used once</div> CSS #header {}

    HTML <div class="sidebox">Element used more than once</div> CSS .sidebox {}

    Universal elements, like body, h1, h2, etc., do not require a preceding . or #.

    Creating a DIV plan

    Here's what the page will look like:
    Target layout - no DIVs.

    Target layout - no DIVs.

    And here's what the DIVs will be:

    Target layout - DIV-ided

    Target layout - DIV-ided

    You can't create a good design without a good plan. You should know, before you even open Photoshop, the answers to these questions:

    1. How many columns will it have?
    2. How many navigation menus will it use?
    3. Will the menus be horizontal or vertical?
    4. Does it have a footer?
    Necessary Graphics vs. Solid Colors

    Your design elements (that aren't type) should fall into two categories; graphics vs. solid colors. This is pretty intuitive. If it's a logo or a picture or anything that is not a solid color, then it's a necessary graphic. If it's a rectangular block of color, then it's a solid color.

    Using the slice tool, cordon off your necessary graphics and your solid colors.

    The layout, sliced up

    Click to enlarge

    Building the HTML

    You're not going to spend too much time here. Most of the HTML that you're going to be formatting will be generated by whichever CMS you choose, so don't worry too much about setting anything other than the general layout at this point. Also, I'm going to stick to the example design pretty closely. Since you're not building the exact same site, you'll need to adjust your work accordingly.

    Use a text editor that has your HTML and CSS files open at the same time, while your favorite web-browser (Firefox) has your HTML page loaded in it. Every time you make/save a change on both documents, hit reload in Firefox.

    Create two blank documents in a basic text editor. Make sure that they're both plain text. Save them in a new folder as index.html and style.css.

    If you're having a problem formatting a particular DIV, you can get its properties by using a plugin like Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60).

    Copy and paste the following code into your HTML document:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / <title>YOUR PAGE TITLE GOES HERE</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>

    </body> </html>

    This code lets the browser know what kind of page it's dealing with, which helps your design look correct in more browsers. Also, the <link> tag attaches the stylesheet that you'll be working on to your HTML document.

    Next, add the wrapper, header, menu, quote button, joke, main content, sidebar and footer divs. Now your code should look like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / <title>YOUR PAGE TITLE GOES HERE</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>

    <div id="wrapper"> <div id="header"> </div> <div id="menu"> </div> <div id="quoteButton"> </div> <div id="joke"> </div> <div id="mainContent"> </div> <div id="sidebar"> </div> </div> <div id="footer"> </div>

    </body> </html>

    Notice how the header, menu, quoteButton, joke, mainContent and sidebar divs are nested within the wrapper div. This setup will "wrap" your main divs together so that they can be treated as a singular unit on the page.

    Building the CSS

    Now, switch over to your stylesheet. Start with this:
    * { margin: 0; padding: 0; }
    This code will make sure that all of your divs start with a margin and padding of 0. It reduces reduntant code and makes for easier design. Now, add in the code for your other divs.
    body { } #wrapper { } #header { } #menu { } #quoteButton { } #joke { } #mainContent { } #sidebar { } #footer { }
    Alright! We've got our basic site structure in place, and it's time to start editing! Here are some very helpful CSS attributes:
    • background - Sets the background image, image placement/repetitions, and color of the element.
    • margin - Sets the spacing outside of the element.
    • padding - Sets the spacing inside of the element.
    • width - Sets the width, in px, of the element.
    • float - Very important. Allows for divs to sit next to each other horizontally.
    • clear - Forces the element to sit below any elements floated the left, right, or both.

    Type Setting

    One of the most crucial elements of web site design is how your type is going to look. What font face do you use? What color? What size? What margins and padding do I need?
    Typography CSS attributes: font - Chooses the font family. List of web-safe fonts. font-weight - Normal or bold your element's words. font-size - Sets the size of your type. line-height - The space between your lines. color - The color of your element's words.

    Using images in your CSS

    To get the background to look like it does in the original design, we're going to use the background CSS attribute with an image slice and a solid color.

    Here is the background image:

    And here is the code:

    body { background: url(../images/Background.png) top repeat-x #FAF8EB; }

    By specifying the vertical positioning (top) and which direction the image should repeat (repeat-x) I was able to restrict the image to repeating across the top of the page, and by using a solid color that matches the bottom of the image, I was able to extend the background all the way to the bottom of the page.

    The Next Step

    Now comes the tricky part: Creating the template for the appropriate CMS. Since the paths diverge here, you'll need to click on the appropriate link for the tutorial.

    Joomla!

    Wordpress COMING SOON

    Thanks for reading my tutorial, and please don't forget to read our comic. It constitutes a full day's worth of awesome.

    Also, people who want to know how to make a graphic appear to be overlapping another one without using transparencies, read the tutorial on Image Overlapping with CSS.

    Carter

    by Carter
    Saturday, September 13th, 2008
    11:51 am


    So the new design has been up and running for a little over a week now, and everyone seems to enjoy it.

    I just wanted to let you all know that I'm writing a tutorial for how to build your own Wordpress OR Joomla! template, starting with nothing but a layout in Photoshop and a text editor. Expect that later this week.

    Also, people have been sharing their love of this site with others, and we want to encourage that. Frank and I have been working on some advertisements that will make the site a bit easier to find. We'll try and get some feedback from you guys before we start plastering them everywhere.

    That is all. Resume your enjoyment of the site.

    Carter

    by Carter
    Saturday, September 13th, 2008
    5:21 pm


    UPDATE:

    This is a deprecated technique. IE 7 (and up) supports PNG transparencies, so there's absolutely no reason to not use them in your site. IE 6 is going to be a problem, but when isn't it? Also, it's usage rate is something like 6% and dropping, so it's time to move on.

    To achieve this kind of effect now, just use a PNG-24 with Transparency turned on and use absolute positioning to place it on the page. Víola.

    #image-div

    { left: 150px; position: absolute; top: 15px; }

    This tutorial will show you how to create the illusion of an overlapping image that doesn't use transparencies with a few CSS rules.

    I'm also going to show you how to get Internet Explorer to properly render the page.

    Once again, I'm going to be using the Out To Lunch Productions' website as my example. I just can't stop loving that place. Here is a screenshot of the header:

    A screenshot of OTL's header

    A screenshot of OTL's header

    This layout does not make use of transparent images or browser-rendered drop-shadows, simply because not every browser supports them.

    The images

    The logo image

    Logo.png

    The menu overlap

    MenuOverlap.png

    The HTML

    <div id="logo"> <img src="images/Logo.png" /> </div> <div id="tagline"><img src="images/Tagline.png" alt="Creativity. With a sense of humor." />        </div> </div> <div id="middle"> <div id="topMenu"> <ul> <li><a href="index.html">Welcome</a></li> <li><a href="services.html">Services</a></li> <li><a href="philosophy.html">Philosophy</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div>

    The CSS

    #middle { margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-image: url(../images/MenuOverlap.png); background-repeat: no-repeat; background-position: left top; width: auto; }

    Fixing it in IE

    As with most site code, this will require some IE tweaking. To get your page to format differently in IE, use this code somewhere in your head tag:

    <!--[if lte IE 6]><style type="text/css">@import "css/ie_fixes.css";</style><![endif]--> <!--[if IE 7]><style type="text/css">@import "css/ie_fixes.css";</style><![endif]-->

    Now, you're going to need an additional CSS file named ie_fixes.css in the same directory as your other CSS file.

    For this particular problem, the entire "middle" DIV class needed to come up 3 pixels. The code for this is:

    #middle { margin-top: -3px; margin-right: auto; margin-bottom: 0; margin-left: auto; background-image: url(../images/MenuOverlap.png); background-repeat: no-repeat; background-position: left top; clear: both; }