Close
Close

Your Name Here

  • Home
  • KarmaCMS
  • Wizard Manual
  • Tips
  • Be A Reseller
  • FAQ
  • Contact/Support
  • Questionnaire
  • Links
  • Free Training Courses

Free Training Courses

We have step my step intructions here explaining how to construct a design with the wizard where you can actually "do" as you read along as well.
Category:  
  • - Dynamic Web Design Basics
  • Advanced - Fixed Width Basic
  • Intermediate - Fixed Width
  • Intermediate - Fixed Width Rounded Corners
  • Intermediate - Liquid Basic

ADVANCED - FIXED WIDTH

This course take you through a completed design to a constructed fixed width website with the Karma Wizard. Here we introduce more "why" behind what we do. You will learn to do the following:

  • Creating Graphic Slices
  • Using Custom CSS
  • Uploading Graphic Fonts
  • Uploading Auxiliary Files
  • Inserting Hooks

I've named this design "Parlor" and you can work along with me by downloading the .zip file below that contains the font used, original .psd, and the sliced and prepared images and animations.

  • Parlor Pack
Your Design

I've designed a draft of a website and now it's time to turn it into a website. You'll see what we're shooting for pictured. It's a 2 column fixed width site with vertical links, header, clearing footer, and patterned or tiled background that stretches as far as the browser window allows.

Launch the Karma Wizard by clicking the "Launch The Karma Wizard" graphic on the side with the blue animated swirl. This will cause the control panel to open and the design to wipe clean.

Layout

First take a look at the layouts in the Wizard and figure out which is closest to the mock-up or draft you've done in your graphics program. I've chosen B-2 since it looks the closest to what I've done.

Wizard

To choose a layout in the Wizard:

  • Select "layout" from dropdown box.
  • Next to "Choose Layout" select B-2

The draft I've done doesn't have a photo so I should decide where a photo would go if the user chooses to upload one or if I want to disable the uploaded photo all together. In this case I think I'll disable the photo entirely since I don't want a photo in the header and that is the only place it can be if the main links are vertical.

To disable the photo place do the following:

  • Select Custom CSS from the drop-down box.
  • Copy/Paste the following in the general area:
    div#site_photo { display: none; }

Now click the "apply changes" button to see how the layout effects the content.

Body

Photoshop

When preparing images I always start with what is on the bottom layer. Here we'll begin with the image used for the repeating pattern that looks like wallpaper. Be sure this image is top centered in the design before you begin any other slicing. This means that if the pattern didn't repeat and you only saw one it would be in the very center and aligned to the top. Notice in the .psd file we have a horizontal guide placed in the very center of the canvas so images can be snapped if need be. Save the image to a place you'll remember.

Wizard

  • Select "Body" from the drop-down box.
  • Upload bg.jpg for the background image.
  • Position it to the top center.
  • Repeat in both directions.

Repeating in both direction is the default so unless you're overriding it you won't need to explicitly set it. You should set the background color to whatever you want the background color for your pop-up pages, splash page, and flash intro to be. For these pages the background image will be disabled unless you explicitly set a background image.

Because we have pages where the background color for the body is shown, we need to be sure that the text color over it contrasts enough to be readable. I'm going to set it to black. Because I want the site's text to appear black on all pages to the reader (not just the pop-up, splash, and flash intro) I won't have to set it again. All other parts of the site will have that colored text unless I set it to something else.

Wrappers

Photoshop

Crop the original .psd to the edge of the drop shadow. Do this by making the tiles background invisible and cropping any transparent pixels. This is found in image/trim... then "trim transparent pixels". Once the file is trimmed, make the pattern background visible again. Make any content except for the white layer entitled "page" visible. Disable the raster mask on the page layer.

Create a slice the width of your file and as high as your pattern background image. In this case it is 248px high. You can find the height and width and change it by double clicking on the slice. Name the slice something you'll be able to identify, and save for web. You do this by clicking file/save for web... I named it pagebg.jpg.

When saving your file experiment with file formats and notice the differences in quality and file size; The two don't necessarily corrolate. You want to get the best looking image at the lowest size and if possible keep background images under 40k.

Wizard

  • Select "Wrappers" from the drop-down box.
  • Upload pagebg.jpg in the Primary Wrapper section.
  • Position it top center
  • Repeat vertically

By default our content is liquid meaning it expands as far as we stretch our browser window, but the background image suggests that we need a fixed width site. Because our page background with the drop shadow extends farther out to either side than the comfort zone for 15" monitors not to trigger a scrollbar, we need to look for a better option than putting the width on the primary wrapper. Placing the width on that same layer (Primary Wrapper) would definitly be the easiest thing to do, but not the most accessible.

I choose to make the site more accessible and place the width on the secondary wrapper. Unfortunately doing so triggers some kind of crazy bug in IE6 when in conjunction with the layout method we've used. Thankfully there is a work around. By placing a pixel width on the content wrapper equal to the width of the secondary wrapper and a negative margin on the content wrapper one pixel less so the footer clears in IE6 will do the trick.

Since we want our width to be 790px wide, here's what we'll need to place in the Custom CSS area directly under our last entry:

div#header_content_footer_wrapper_2 {width: 790px; }
div#content_wrapper { width: 790px; margin-left: -789px; }
Header

Photoshop

Now enable the mask for the page layer and make the elements in the header visible except for the site title since that will change and doesn't need to be in the background images. Make your slice so it covers only the header up to the edges of the graphic. This makes this slice 790px wide and 125px high. Because this slice is the widest point of our content we've chosen to make the site that wide as well.

Wizard

  • Select the "header" area.
  • Upload the background image you just saved.
  • Position it to center.
  • Set it to not repeat.
  • For dimension put 125px, the height of the graphic.
  • Set the padding-top to 20px (The default here is 50px).
Auxiliary File

Photoshop

We have one image to go: the divider between the main links and the content. I'd like to put a little "bling" in the design, so I'm going to animate this small part. It doesn't have to pull content via XML, so we can simply upload it as an auxiliary file and insert it as a hook.

Wizard

  • Go to the "auxiliary files" area.
  • Click "browse" to find your newly saved file.
  • Press [Apply Changes].

Your new file will be listed below the input fields. Copy the "hook path".

Hook

Wizard

  • Go to the Hooks area
  • Select "div#header_content_footer_wrapper,enter" in the first drop down box.
  • Place the following HTML in the box:
    <div id="divider"></div>
    <script type="text/javascript">
        var fo = new FlashObject(         "{SKINPATH}/aux/divider.swf","","57","183","7","" );     fo.addParam("wmode","transparent");     fo.write("divider"); </script>

Go to the Custom CSS area, and below your previous entries place the positioning for your image:

div#divider { position: absolute; top: 109px; left: 212px; }

Apply Changes.

Graphic Fonts

Wizard

Now we'll need to set the graphic fonts for the header, main links, page titles, and teaser titles.

For graphic font header, do the following:

  • Select "header" from the drop-down box.
  • Upload classic.ttf.
  • Set font size to 48.
  • Set color to #FFE7C6
  • Set background color to #783620

For graphic font main links, do the following:

  • Select "all links" from the drop-down box and scroll all the way down.
  • Upload classic.ttf.
  • Set font size to 27.
  • Set color to #401413
  • Set background color to white
  • Set mouseover color to #783620
  • Set selected color to #783620

For graphic page titles, do the following:

  • Select "Page Headings" from the drop-down box.
  • Upload classic.ttf.
  • Set font size to 36.
  • Set color to #401413.
  • Set background color to white.

For the teaser titles I've decided to leave them as plain text. To acheive the same look, do the following:

  • Select "All Teasers" from the drop-down box.
  • Set color to #783620.
  • Set font-size to 120%.

Apply Changes.

Adjustments

As you will quickly be able to tell, some adjustments needs to be made. We need to move the left column divs over to the right, and content over to the right while moving the right side of the content in a bit.

The default width for the columns is 200px wide. I want to keep that width, just move them over so I'll need to put a left margin on the two containing divs: main links wrapper, and teaser group 1 wrapper, as well as a left and right margin on the footer, content, and teaser group 2. While I'm at it I'll put a graphic below the menu with some padding so it appears as a divider.

  • Select "All Links" from the drop-down box.
  • Upload embellishment.gif.
  • Position it bottom center.
  • Set it to not repeat.
  • Set padding-bottom to 40px.
  • Enter 16px for margin-left.

  • Select "Teaser Group 1" from the drop-down box.
  • Enter 16px for margin-left.

  • Select "Teaser Group 2" from the drop-down box.
  • Enter 16px for margin-left.
  • Enter 16px for margin-right.

  • Select "Footer" from the drop-down box.
  • Enter 16px for margin-left.
  • Enter 16px for margin-right.
  • Set the color to white.
  • Set the links to white.
  • Set the background-color to #783620.

  • Select "Content" from the drop-down box.
  • Enter 264px for margin-left (default 200px + 16px margin + width of flash object).
  • Enter 16px for margin-right.

Apply Changes.

Finishing Touches

Now we'll need to make some content beautifications so everything has a nice finished touch to it.

Sublinks

These are the general style that is applied to the buttons that take you to "archive" or "latest" or something similar.

  • Background-color, enter #F9DBB4.
  • Border: outset, 2px, #F9DBB4.

Pressed Sublinks

These are the activated buttons.

  • Background-color: #FEEACF
  • Border: Outset, 2px, #FEEACF

Headings

These appear as the news entry titles, amoung other things.

  • Color: #783620

Table Headings

This is the style applied to the very top row of the tables.

  • Text: white
  • Background: #783620

Table Cell Borders

This is applied to all the table cells where a border is in action. By default Firefox and Safari will render it as the body text color while Internet Explorer will render it white.

  • Border: color: #783620
Saving Your File

Congratulations! We now have a finished and working website. All you need to do now is to save the file. Here's how:

  • Click "Save Design"
  • Click "Save to Disk" or "Save to File"
  • Click "OK"
  • Choose a unique name while keeping .karma at the end.
  • Click "Save"

That's it! Have fun :-)

Launch The Karma Wizard
Module Testing List
Blog
Contact
Events
FAQ
Files
Flash Intro
Forms
Forum
Guestbook
Links
Misc
Music
Pedigree
Photos
Polls
Press/Quotes
Profiles
Song List
Splash Page
Store
Users
Video
read descriptions
Polls Teaser
Are The Training Courses Helpful?
Yes, absolutely!
Sort of...
Not really.
I don't know - I haven't tried them.
What training courses?
View Results
New Layouts - Cracking the Code
Aug 29, 2007
Hi All. I've put up a plethora of new layouts. There are so many to sift through it will become overwhelming. We plan to create a search, but until then ... read on
Show All
Press Teaser
More Quotes
HostKarma
more
Join the List
If you'd like to be notified of events, enter your email address below.
The Karma Wizard is currently in beta testing, meaning that it is pretty stable, but there still may be a few bugs or other issues to shake out. If you encounter any problems, please send an email to bugs@karmawizard.com and we'll try to address them as quickly as possible.
Powered by KarmaCMS