In this Issue...
 INTRO
| Growing Opportunities...
With change comes opportunities. We continue to see a growing
number of changes in the environment, but we're also seeing a number of
new opportunities. Over the course of the next few months we
expect to deliver a number of new products, which will help
provide you the ability to capitalize on new opportunities.
Plus, we will be expanding our search for new industry
opportunities that we feel will benefit your business.
This month's newsletter delivers the first of many
upcoming opportunities. Both ProStores and eBay Stores have
created new Certified Designer programs. We have worked with
both ProStores and eBay Stores in the early stages of these
programs, and feel that both programs will be ideal
additions to your portfolio. I encourage you to read more about
these opportunities, below.
Also, Corrie continues her series on CSS with a focus on
CSS Layout. "More than just changing some colors and fonts, CSS layout involves setting dimensions and learning the "box model,"..."
Box model? What's that? Take a look at Corrie's article, and
she
will set you on the right track.
Thank you again for your continued interest in our
newsletter and for being a valued customer. Expect more from PixelMill
and yourself!
by Jason Reckers, President & CEO -
PixelMill Inc.
 DESIGNER
OPPORTUNITY
|
ProStores Design Certification Program
PixelMill started working with
ProStores, an eBay
Company, almost
two years ago. Over the course of those two years we
have built a catalog of
ProStores templates built specifically to work
on the ProStores platform. When we started with
ProStores we were confident
that their ecommerce platform was one of the best long-term
solutions for PixelMill customers, and
they have proven us right all along the way.
Not only does ProStores provide the unique combination of an affordable solution with virtually unlimited flexibility in store design,
but now they have taken the unprecedented step of
building a training and certification program designed just
for you.
The
ProStores Design Certification Program
provides Web site designers and builders:
Training:
- Free Training Videos
- Designer Starter Kit
- Live Interactive Webinars ($)
Exposure: (Upon program completion)
The program is focused on teaching you to build custom designed stores
around the ProStores solution. Most ecommerce platforms have
'Developer' programs, but
ProStores now provides one of the first Designer-specific
programs we have seen.
Steps to Certification:
- Study and Review Training Materials
- Purchase, Complete, and Submit Exam ($99)
- Approval - Exam results will be sent back to you
with feedback and either a Pass or Retake result.
- Submit company profile
- Receive Logo and Designer Directory Listing (upon
approval)
Jump on this
opportunity today - join the elite group of ProStores
Certified Designers and grow your business with ProStores. I'm confident you will be happy with
the results and the additional opportunities it drives.
Start
Training to become a ProStores Certified Designer Today!
by Jason Reckers, President & CEO -
PixelMill Inc.
 FEATURE
| Weighing Tables and CSS
Last month, we moved past the CSS knowledge
Level 2 mile marker by weighing a tables site against a
CSS site (with the same look and layout). CSS was lighter,
cleaner, and less complex overall.
Next, Level 3: "I've heard it's good, but I can't
use it because of..."
People in this level know some CSS but something (a Level 2
boss, perhaps) keeps them from using CSS positioning.
Since the "something" can be different for everyone, this
month I'll focus on entering the realm of CSS layout. More
than just changing some colors and fonts, CSS layout
involves setting dimensions and learning the "box model,"
which is where many newbies get lost. I think one of the
best ways to approach this topic is by giving you a
real-life and extremely practical example: Styling
navigation links using CSS.
Let's start with what a navigation bar usually is:
A navigation bar is, at its root, a list of links -- and
usually the order of the links don't really matter. In HTML,
we can represent a list by using the bulleted list element
(<ul>). Here is my bulleted list of links in HTML, and I'm
also applying a CSS class (as yet undefined) to the <ul> tag
so that I can start manipulating it:
<ul class="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
Let's transform this boring list of links into a
semi-interesting basic rectangular button that changes cover
when you hover over it. First, let's make some basic edits
to the list itself to get rid of the bullets and line all
the text up against the left, with no margins or padding:
.menu {
margin: 0px;
padding: 0px;
list-style: none;
}
(This above code applies to the <ul class="menu"> itself.
If you applied these same settings to just "ul," they would
change every bulleted list in your site. That's why we
target this specific list with the .menu class.)
Now, we want to target the links (<a>) with some styles.
By targeting the links instead of the <li>, we have more
control over the "hover" state. While current browsers allow
for "hover" states on non-links (such as <li>), there are
some older browsers that don't, namely IE6 and below. If you
don't need to support IE6 and below, you can apply the rules
that I'll discuss below to any other element, not just the
<a> tag. For the purposes of this article, I'll stick with
the old-school way of attaching styles to the links
themselves.
First, I want my links to be a specific width and height.
Links by default are inline elements as opposed to
block elements. Block elements are things like
paragraphs and headings that take up their own "box" area of
content (usually with some default space before and after).
Inline elements are things like links, bold text, and images
that appear within paragraphs, headings, and other block
elements. Block elements can have widths and heights; inline
elements can't.
So my first bit of code is to turn the links into a
block element, then apply dimensions. So that I don't
affect every link in my site, I'm going to limit my style
rule to only "link tags that show up inside the .menu class"
(in CSS-speak, the selector would be .menu a).
My next bit of code is to align the text, define the
color of the text, add some
padding above and below the text, then set a background
color and border.
.menu a {
display: block;
width: 120px;
height: 15px;
text-align: center;
color: #3366ff;
padding-top: 3px;
padding-bottom: 3px;
background: #eeeeee;
border: solid 1px #666666;
}
When dealing with dimensions, padding, and borders, it's
important to talk about the CSS box model. CSS has a very
specific way of how dimensions, padding, margins, and border
amounts relate to each other. The "width" is for the actual
area where the content fits into, and the padding, border,
and margin amounts are added on outside of it. Why you might
care about this (apart from understanding what specific
numbers you should use) is that the code above will
interpret differently in IE5 because of IE5's
misinterpretation of dimensions. If you need to fix it for
IE5, take a look at
this support article which discusses a workaround. This
can be an important issue when you get into layout, as well.
Now, let's make a hover effect where the
background changes color when the user hovers over
the button:
a:active, a:hover {
background: #99ccff;
}
Here's what our buttons look like:
This article provides you with the bare-bones basics of
understanding CSS dimensions and how they and other
properties can be applied to turning a bulleted list of
links into a simple navigation bar. However, there isn't
space here to show you how much more can be done with CSS
and navigation buttons. Here are some links to further
resources:
- Use a "blank" button graphic as a background image
behind the links so it looks like you have a graphic
button. You can even handle rollovers using this method
as well! This gives you a button background while still
having easy-to-edit text within the HTML. Read
Fast Rollovers Without Preload.
- See how you can turn a bulleted list of links into a
CSS-formatted horizontal navigation bar. Read
Turning a list into a navigation bar.
- See a few different examples of using only CSS to
style links. Read
Taming Lists.
- For advanced designs where you want custom graphics
for each one of your button links, you can make a grid
or matrix of all your navigation buttons in one graphic,
and position it as a background image behind your links.
On link hover, you simply move the background image to
the "hover" image part of the matrix. Read
Navigation Matrix Reloaded.
- I have a webinar that goes through some of these
techniques that you can purchase for $20 to view. Sample
files are included in the download. Go to
Using CSS to Format Navigation Links webinar.
In next month's newsletter, I'll talk about why layers
aren't necessarily good and different approaches to
CSS-based page layouts.
by Corrie Haffly, PixelMill Staff Writer
 DESIGNER
OPPORTUNITY
|
eBay Stores Certified Designer Program
At eBay Live! 2007, eBay Stores announced the
eBay Stores
Certified Designer program. This program is designed
to provide eBay Stores merchants a qualified list of
designers who have proven knowledge of:
To qualify, designers must pass a 30 question exam
(online) and agree to the terms
and conditions of the eBay Stores Certified Designer Membership Agreement in order to be eligible to become an eBay Stores Certified Designer.
Upon completion and acceptance into the program,
designers will be listed in the
eBay Stores Designer Directory and receive a Certified
Designer logo for use on their site.
We have found that many eBay Sellers are making the move
to do more with their business by creating eBay Stores and
ProStores Storefronts. eBay has built features that help both
solutions work together, and many customers want to work with
a designer who can build for both platforms.
Join both the ProStores and eBay Stores Certified Designer programs and start building coordinated storefronts for this growing market of qualified online merchants.
Become an eBay Stores Certified Designer Today!
by Jason Reckers, President & CEO -
PixelMill Inc.
 SOLUTIONS
| A Little Extra Help Goes a Long Way..
One-on-One Training
Need a little extra help making the transition to
CSS-based Web sites and changes in web standards? We
have designed our new one-on-one training service to
connect you with an experienced professional to help
guide you through your questions.
Register for one of our No Risk training options to
schedule a personalized online training. You will be amazed
how much you can learn in an hour and how quickly you can
grasp CSS and Web standards.
Click the option below to buy your
training today!
A PixelMill team member will contact you after placing the
order to discuss your specific needs and coordinate with the
appropriate expert.
Service requires a PC and a broadband connection. For questions,
please call 866-749-3564 (Option 2) or
contact us using one of our many contact options.
 SOLUTIONS
| Solution Packs for TypePad
If you haven't already, we encourage you to add a
TypePad blog to your web presence. Use your blog to
deliver timely information in an easy-to-read
format.
Learn more about our
TypePad templates starting at $55!
- OR -
Get a jump start with one of our TypePad Solution Packs:
TypePad Template + 1 Hour Training
- $99.00
This package is designed to help you get a quick start with your new template, the TypePad interface plus guidance on how to get more from your new blog. One of our professionals will work directly with you to select the right template. Then, using our online meeting solution, we will visually
walk you through implementing your new template and teach
you how to work with a TypePad blog.
more >>
TypePad Template + 2 Hours Customization
- $169
This solution pack will connect you with a PixelMill expert and graphic designer who will help you select a new TypePad template and make design modifications to meet your exact needs. These modifications can include replacing images, changing colors, adding TypePad features, one-on-one training, and more.
more >>
|
