Yes, you can have a prettier or sleeker eBay Blog!
Did you know that eBay gives us very broad control over the appearance of our Blogs? We are allowed to change the color scheme of the page, changes borders, backgrounds and fonts, and add our logo or store banner to our Blog layout.
This is all accomplished through CSS stylesheets. Yes, there are six premade stylesheets to choose from when you create your Blog, but we can take it further than that. eBay provides a stylesheet customization window in the advanced settings, where we can insert our own stylesheet "rules".
The longhand process is described in a blog by rrragan. And for folks who would like to learn a little about CSS along the way, it is a basic tutorial that gives an inside understanding to what styles are doing to your page.
Take a look at my own blog to see what is possible using the Blog Styler tool described below.
Automatically Make a stylesheet the Easy Way
The eBay Blog Styler is a free online tool that automatically makes a stylesheet, and it is
available for beginners and pros alike. This tool is described in a discussion on the eBay Blog board, and can be found at:http://www.isdntek.com/tagbot/blog.htm
The online Styler tool has three options, from beginner to advanced:
- Beginners need only click a template or choose a template color from the palette. Then copy the code.
- Intermediate users can color individual elements and add logo images.
- Advanced users can view the source code that is in the bottom window to see what else they can customize on their own.
Add your Custom Stylesheet to your Blog
After you have logged into eBay and have gone to your own Blog, you will see a list of owner operations displayed on the left.- Within your blog account, choose Customize on the left sidebar.
- On the Customize screen, select the Advanced link.
- That will take you to the code screen where you can paste your style sheet.
- Click Save and you are done.
After saving your new stylesheet, you'll be taken back to your blog page. Be sure to refresh your page to view the updated results.
Hand Coding your Styleheet
eBay doesn't exactly lay out all the styles that are available and they don't provide a "starter" code to play with. So we will do that here (and also in the eBay Blog Styler).Before coding your own stylesheet, it is important to understand what underlying styles already exist, and which ones need changing. eBay has one default stylesheet and 6 overlay variations. The default stylesheet is always present, and if one of the other 6 is chosen, it is overlaid in addition to the default stylesheet. Your own version will be overlaid on those, and the last one takes precedence. Each variation may tweak different features, so it is important to note which stylesheet is underlying your new custom design.
For users who want to get into the detail of the stylesheet, some of the major styles are exposed below. These, and more, are laid out in the eBay Blog Styler tool above. The basic format below will create a look that is somewhat similar to an eBay store header and left navigation bar. While more rules can be applied to other elements, these are the basic rules for coloring most of the elements.
_________________________________________________
/* Main Blog title at top */
#titlebar,#titlebar2 {
background-color:#7698B2;
color:#ffffff;
font-family:Verdana,sans-serif;
background-image:url(tile.gif);
background-repeat:repeat;
border-left: 12px solid #495E6E;
border-bottom:none;
width:99%;
}
/* Banner */
#blogAT { /* container for background and tile */
display:block;
background-color:#eff4f9;
background-image:url(tile.gif);
height:90px;
margin-top:-6px;
margin-bottom:6px;
}
#blogAT-3 { /* add logo to banner bar */
/*
Add the image URL and image dimensions below.
Add the image height to the container above as well
(we use a store banner size for this example).
*/
display:block;
width:310px;
height:90px;
background-image:url(banner.gif);
background-repeat:no-repeat;
}
/* color logo bar at bottom */
#FooterDiv { border:none; }
#FooterBar {
width:100%;
height:30px;
background-color:#7698B2;
background-image:url(tile.gif);
background-repeat:repeat;
border:none;
border-left: 10px solid #495E6E;
}
/* left nav column */
h4.titlehead { border-left: 10px solid #495E6E;}
div.nav {
border:2px solid #495E6E;
background-color:#eff4f9;
margin-bottom:10px;
color:#334466;
}
div.navtitle,div.nav-title {
background-color:#7698B2;
background-image:url(tile.gif);
font-family:Verdana,sans-serif;
color:#ffffff;
}
.nav a { color:#334466; }
.nav a:link { color:#334466; }
.nav a:visited { color:#334466; }
.nav a:hover { color:#99aacc; }
.nav a:active { color:#99aacc; }
/* body area */
.custumhr { border-bottom:2px solid #7698B2; }
div#outsideFrame {
background-color:#eff4f9;
border:#7698b2 8px solid;
width:98%;
}
div#content-2col a { color:#334466; }
div#content-2col a:link { color:#334466; }
div#content-2col a:visited { color:#334466; }
div#content-2col a:hover { color:#99aacc; }
div#content-2col a:active { color:#99aacc; }
div.badgeline { color:#334466; background-color:#eff4f9;}
.pageTitle,h2.BlogEntryTitle { color:#334466;}
.BE_CommentTitle, .BE-CommentTitle,.BE_PostCommentTitle { color:#334466;}
.BE_PostCommentTitle { background-color:#eff4f9;}
div.insideFrame { background-color:#ffffff; }
div.insideFrameAlt { background-color:#eff4f9;}
_________________________________________________
/* Main Blog title at top */
#titlebar,#titlebar2 {
background-color:#7698B2;
color:#ffffff;
font-family:Verdana,sans-serif;
background-image:url(tile.gif);
background-repeat:repeat;
border-left: 12px solid #495E6E;
border-bottom:none;
width:99%;
}
/* Banner */
#blogAT { /* container for background and tile */
display:block;
background-color:#eff4f9;
background-image:url(tile.gif);
height:90px;
margin-top:-6px;
margin-bottom:6px;
}
#blogAT-3 { /* add logo to banner bar */
/*
Add the image URL and image dimensions below.
Add the image height to the container above as well
(we use a store banner size for this example).
*/
display:block;
width:310px;
height:90px;
background-image:url(banner.gif);
background-repeat:no-repeat;
}
/* color logo bar at bottom */
#FooterDiv { border:none; }
#FooterBar {
width:100%;
height:30px;
background-color:#7698B2;
background-image:url(tile.gif);
background-repeat:repeat;
border:none;
border-left: 10px solid #495E6E;
}
/* left nav column */
h4.titlehead { border-left: 10px solid #495E6E;}
div.nav {
border:2px solid #495E6E;
background-color:#eff4f9;
margin-bottom:10px;
color:#334466;
}
div.navtitle,div.nav-title {
background-color:#7698B2;
background-image:url(tile.gif);
font-family:Verdana,sans-serif;
color:#ffffff;
}
.nav a { color:#334466; }
.nav a:link { color:#334466; }
.nav a:visited { color:#334466; }
.nav a:hover { color:#99aacc; }
.nav a:active { color:#99aacc; }
/* body area */
.custumhr { border-bottom:2px solid #7698B2; }
div#outsideFrame {
background-color:#eff4f9;
border:#7698b2 8px solid;
width:98%;
}
div#content-2col a { color:#334466; }
div#content-2col a:link { color:#334466; }
div#content-2col a:visited { color:#334466; }
div#content-2col a:hover { color:#99aacc; }
div#content-2col a:active { color:#99aacc; }
div.badgeline { color:#334466; background-color:#eff4f9;}
.pageTitle,h2.BlogEntryTitle { color:#334466;}
.BE_CommentTitle, .BE-CommentTitle,.BE_PostCommentTitle { color:#334466;}
.BE_PostCommentTitle { background-color:#eff4f9;}
div.insideFrame { background-color:#ffffff; }
div.insideFrameAlt { background-color:#eff4f9;}
_________________________________________________
eBay's entire default stylesheet can be viewed here for picking out the rules to change:
http://include.ebaystatic.com/css/e463/us/blogs/blogs-default_e4631us.css
The optional stylesheets are subsets, with different spacing and border options. If you find that one of those is closer to the layout you desire, then it may be easier to start with one of them, where you will find a smaller subset of rules, making it easier to find those that should be changed. They are:
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-modern_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-slate_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-sunshine_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-classic_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-ocean_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-strawberry_e4651us.css
Before adding your code, choose your base stylesheet in the blog
customization screen and save the settings.
Then return to the customization screen and paste your code into the
advance customization window. The code above is based on the default
stylesheet.http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-slate_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-sunshine_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-classic_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-ocean_e4651us.css
http://include.ebaystatic.com/css/e465/us/blogs/themes/blogs-strawberry_e4651us.css
Please see my other guides for Auction Template help, Page Design Basics, and useful tidbits:
The About ME page design series:
Summary - The 10
Design Basics for a Better ME page
Design Basics 1 - Getting the most from Color
Design Basics 2 - Using Fonts
Design Basics 3 - Effective use of White space
Design Basics 4 - Using Photos
Design Basics 5 - Backgrounds and Borders
Design Basics 6 - Multimedia
Design Basics 7 - Top 10 Design Mistakes
Design Basics 1 - Getting the most from Color
Design Basics 2 - Using Fonts
Design Basics 3 - Effective use of White space
Design Basics 4 - Using Photos
Design Basics 5 - Backgrounds and Borders
Design Basics 6 - Multimedia
Design Basics 7 - Top 10 Design Mistakes
Auction Template Help:
Templettes
are Mini Auction Templates - Contest Winner
Selecting a Template & Designer
Adding Auction Backgrounds
Make a Seamless Background Tile
Adding Sound to your Auction
Selecting a Template & Designer
Adding Auction Backgrounds
Make a Seamless Background Tile
Adding Sound to your Auction
eBay Guide & Blog Help:
Cheat
Sheet for Writing your eBay Guide Offline
How to get Larger Guide Photos
How to format a Pleasing Guide
Add Photos to your eBay Blog
How to get Larger Guide Photos
How to format a Pleasing Guide
Add Photos to your eBay Blog
Copyright © 2006 shipscript Free Tools for Better Auctions
