/*** Basic White/Pink CSS template (as seen at www.lulu.com/LuluCSSstore Notes: This is a basic, streamlined style sheet. Other storefront style sheets may contain different and/or more controllable elements. All color defining instructions within CSS use standard HTML color values. For more info, go to "http://www.echoecho.com/csscolors.htm". ***/ /*** The "body" element allows you to control the properties of the main body of the storefront (the surrounding white background). With it you can set the base font, background color, etc. ***/ body { font: "normal Arial", Helvetica, sans-serif; background-color: #FFFFFF; color: #000000; } /*** The "a" (or "anchor") element defines the color of the page's links. ***/ a { color: #0000FF; } /*** The elements below define various properties for the fonts used in all the links and headers of this stylesheet. If you look over each item, what they do should be self explanatory. ***/ h1, h1 a, h2, h3 { font-weight: normal; font-variant: small-caps; letter-spacing: 2px; text-align: center; color: #000000; } /*** The "#tikileft", "#tikimain", and "#tikiright" sets the padding and margins for the inside of the left, middle, and right columns. Note: In your personal set up, you may not have three columns. Just keep in mind that "#tikimain" refers to the middle column, where your stores logo, introductory text, etc. will be located, regardless of the number of columns you have. See the "box" element further down for additional info. ***/ #tikileft, #tikimain, #tikiright{ padding: 4px; vertical-align: top; } /*** This sets extra padding for the right side of both the left and right columns, and positions any background image that may be used (none in this case), as being centered. ***/ #tikileft, #tikiright{ padding-right:5px; background-position: center; } /*** This sets extra padding for the middle column. Note: As these last three items show, in general you can define base properties for a larger group of items, and still make specific adjustments to each one individually. ***/ #tikimain { padding: 10px; } /*** This sets the properties for the dates of blog posts (applicable only when you have blog postings showing on your storefront). */ ***/ .blog .date { font-weight: bold; font-size: small; padding: 5px; } /*** This sets the properties for the backgrounds of body text behind most of the storefront modules (the area below the header/title of each module ("Most Popular Storefronts" and " Recent Forum Topics" modules excluded). ***/ .mother { background-color: transparent; padding: 5px; } /*** This defines properties for most of the possible content modules you may select to display on your storefront (excluding "Recent Forum Topics" and "Most Popular Storefronts" modules). Note: The code block directly beneath this one appears to do almost exactly the same, but each section seems to affect different aspects of the modules. This one seems to affect the header text (as in the titles "Author Info" or "Last Blog Updates") as well as background of the modules, while the below code block seems to affect the body text (as in the text description contained in the "Author Info" module. You may have to play with these a bit to get best results. ***/ .last_created_blogs, .top_active_blogs, .last_modified_blogs, .top_visited_blogs, .last_blog_posts, .author_info, .my_content, .best_sellers { font-family: arial, sans serif; font-weight: normal; color: #000000; text-align: left; background-color: #FFC0CB; padding: 5px; margin: 10px; } /*** See notes from code block directly above this one. ***/ .last_created_blogs .boxtitle, .top_active_blogs .boxtitle, .last_modified_blogs .boxtitle, .top_visited_blogs .boxtitle, .last_blog_posts .boxtitle, .author_info .boxtitle, .my_content .boxtitle, .best_sellers .boxtitle { font-family: arial, sans serif; font-weight: bold; color: #000000; text-align: left; border-top: 0px; background-color: transparent; padding: 5px; } /*** This code block controls properties for many of the dates that might appear in your storefront modules (i.e. dates that blogs were last modified, etc. ***/ .last_created_blogs .date, .top_active_blogs .date, .last_modified_blogs .date, .top_visited_blogs .date, .last_blog_posts .date, .author_info .date, .my_content .date, .best_sellers .date { font-weight: bold; font-size: smaller; color: #000000; } /*** Seems redundant, but this block controls padding inside the various storefront modules. If you want to put more (or less) space between the text and the outer edge of the modules (defined as Pink boxes in this example), this seems to be the most effective place to do it. ***/ .box { padding: 5px; } /*** This sets the properties for the header text for the "Recent Forum Topics" and "Most Popular Storefronts" modules */ ***/ .boxtitle { padding: 2px; font-weight: bold; color: #396; } /*** This sets the background color for the menu of links at the bottom of the page. Note: The area below the menu (where the copyright notice is located) is part of the main background for the page. Any changes made to the background color of the "body" element at the top of this stylesheet will affect the copyright footer also. ***/ .bgfooter { background-color: #FFFFFF; } /*** This sets the color for the links in the menu at the bottom of the page. ***/ .xsmall a:link; a:visited;a:hover { color: #0000FF; font-weight: bold; }