ShopSite Elite Theme

Version Added: ShopSite Version 8.0

Color Options: Blue, Green, Orange, Salmon, Silver, Tan, USA

The Elite Theme is setup to give you as the merchant many options to customize your pages. The header section in this template is completely open so you would be able to add your own header to fill the whole header section with text, graphics or by using your own code (such as HTML).

How Colors and Backgrounds Are Used

Text Color - used as the text color on your pages.
Background Color - used as the whole page background color, including link background color.
Link Color - used as the link color.
Visited Link Color - used as the visited link color.
Active Link Color - used as the active/hover link color.
Table Shade Color - used as the table shade color in the shopping cart.
Background Image - if used the background image will override the background color for the page background, but will not override the background color in the main body or the background color of the left links.

Template Screen Shots and Color Options

Blue Elite Theme - click to view full page

Green Elite Theme - click to view full page

Orange Elite Theme - click to view full page

Salmon Elite Theme - click to view full page

Silver Elite Theme - click to view full page

Tan Elite Theme - click to view full page

USA Elite Theme - click to view full page

Shopping Cart Screen Shots: Blue, Green, Orange, Salmon, Silver, Tan, USA

Theme Files

elite_001_pa_template.sst - page template for the Elite theme.
core_001_pa_basic_page.sst - code for main body of the page template.
elite_001_pr_template.sst - product template for the Elite theme.
core_001_pr_basic_moreinfo.sst - code for main body of the product more information page.
elite_001_gc_template.sst - gift certificate template for the Elite theme. This template controls the look and feel of the gift certificate order screen as well as the format of the printable and digital gift certificates.
elite_001_tf_template.sst - tell a friend template for the Elite theme. This template controls the tell a friend pop up window as well as the tell a friend email.
elite_001_sc_template.sst - shopping cart template for the Elite theme. This template controls all of the checkout screens as well as the customer order email receipt.
elite_001_cr_template.sst - customer registration template for the Elite theme. This template controls all of the customer registration screens as well as any customer registration emails.
elite_001_se_template.sst - search results template for the Elite theme. This template controls the basic layout for the search results screen.
elite_001_se_page_template.sst - search link result template for the Elite theme. This page template controls how the search results which are page links are formatted on the search result screen.
elite_001_se_prod_template.sst - search product result template for the Elite theme. This product template controls how the search results which are products are formatted on the search result screen.
core_001_se_basic_page.sst - code for main body of the search results page.
elite_001_cr_styles.css - CSS for the customer registration screens using the Elite theme.
elite_001_cr_vars.sst - VARS for the customer registration screens using the Elite theme including colors used.
elite_001_gc_styles.css - CSS for the gift certificate screen using the Elite theme.
elite_001_gc_vars.sst - VARS for the gift certificate screen using the Elite theme including colors used.
elite_001_pa_styles.css - CSS for the pages using the Elite theme.
elite_001_pa_vars.sst - VARS for the pages using the Elite theme including colors used.
elite_001_pr_styles.css - CSS for the product more information pages using the Elite theme.
elite_001_pr_vars.sst - VARS for the product more information pages using the Elite theme including alignment and how colors are used.
elite_001_sc_styles.css - CSS for the shopping cart pages using the Elite theme.
elite_001_sc_vars.sst - VARS for the shopping cart pages using the Elite theme including how colors are used.
elite_001_se_styles.css - CSS for the search result screens using the Elite theme.
elite_001_se_vars.sst - VARS for the search result screens using the Elite theme including how colors are used.
elite_001_tf_styles.css - CSS for the tell a friend pop up using the Elite theme.
elite_001_tf_vars.sst - VARS for the tell a friend pop up using the Elite theme including how colors are used.

Enhance This Template

Get This Look

Add the following code into the header field. Replace "Store Name Here" with the name of your store.

<style type="text/css">
<!--
body {
  text-align: center;
}
table.content {
  margin: 0px auto;
  border: 1px solid #555;
  width: 800px;
}
-->
</style>
<div style="border-bottom: 1px solid #1B3D63; padding: 20px;"><h1 style="text-align: left; font-family: georgia; font-weight: normal;">Store Name Here</h1></div>

Change The CSS To Get A New Look

Go to Merchandising > Custom Templates > Includes > New Include, and name a new include file "elite_001_pa_styles.css" then paste the code below into that file.

body {
  margin: 0px;
  color: [-- VAR.pa_text_color --];
  background-image: url([-- VAR.pa_background_image --]);
  background-position: center;
  background-repeat: repeat;
  background-color: [-- VAR.pa_background_color --];
  font-family: [-- VAR.pa_font --];
  font-size: [-- VAR.pa_font_size --];
  text-align: center;
}

/* Tables to make IE happy */
table {
  margin: 0px;
  color: [-- VAR.pa_text_color --];
  background-color: [-- VAR.pa_background_color --];
  font-family: [-- VAR.pa_font --];
  font-size: [-- VAR.pa_font_size --];
  border-collapse: collapse;
  border-spacing: 0px;
  vertical-align: middle;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

td, th {
  background-color: transparent;
}

/* Anchor Tags */
a {
  font-family: [-- VAR.pa_font --];
  font-size: [-- VAR.pa_font_size --];
  text-decoration: underline;
}

a:link {
  color: [-- VAR.pa_link_color --];
}

a:active {
  color: [-- VAR.pa_active_link_color --];
}

a:hover {
  color: [-- VAR.pa_hover_link_color --];
}

a:visited {
  color: [-- VAR.pa_visited_link_color --];
}

/* Forms Stuff */
input {
  color: [-- VAR.pa_text_color --];
  font-family: [-- VAR.pa_font --];
  font-size: [-- VAR.pa_small_font --];
  vertical-align: middle;
}

input[type=text], input[type=password], input[type=button], input[type=select], input[type=reset], textbox, select {
  background-color: [-- VAR.pa_form_background_color --];
}

input[type=image], input[type=radio], input[type=checkbox] {
  background-color: transparent;
}

select {
  color: [-- VAR.pa_text_color --];
  background-color: [-- VAR.pa_form_background_color --];
  font-family: [-- VAR.pa_font --];
  font-size: [-- VAR.pa_small_font --];
}

textarea {
  color: [-- VAR.pa_text_color --];
  background-color: [-- VAR.pa_form_background_color --];
  font-family: [-- VAR.pa_font --];
  font-size: [-- VAR.pa_small_font --];
}

table.content {
  width: 850px;
  background: transparent;
  margin: 0px auto;
}

#/* Link Stuff */#
table.pa_links {
  background-color: #166065;
  border: 1px solid #07565B;
}
table.link {
  width: 100%;
  vertical-align: top;
  text-align: left;
}

td.link_image {
  vertical-align: top;
  text-align: left;
}

a.link_image {
}

img.link_image {
  border: none;
}

td.link_name {
  vertical-align: top;
  text-align: left;
}
td.link_text {
  vertical-align: top;
  text-align: left;
  padding-left: 10px;
}

span.link_text {
  padding-left: 10px;
}

a.link_text {
}

#/* Page Stuff */#
td.pa_header {
  height: 80px;
  background-color: #07565B;
}
td.pa_header {
  color: #FFF;
  font-weight: normal;
  font-family: georgia;
  text-align: left;
  padding: 10px 10px 10px 40px;
}

td.pa_links {
  vertical-align: top;
  text-align: left;
  width: 200px;
  min-width: 200px;
}

td.pa_top_links {
  vertical-align: top;
  text-align: left;
  width: 100%;
}

table.pa_links {
  width: 100%;
  height: 100%;
  vertical-align: top;
  text-align: left;
  border-collapse: separate;
  border-spacing: 5px;
}

td.pa_link_content, td.pa_giftcert, td.pa_tellfriend, td.pa_regsignin, td.pa_minicart, td.pa_minicart {
  vertical-align: top;
  text-align: left;
  background-color: #457C82;
  padding: 3px 10px;
  margin: 5px 0px;
  border-collapse: separate;
  border-spacing: 5px;
  width: [-- VAR.link_width --];
}
a.giftcertlink, a.tf_page_link, a.tf_popup, a.reglink, a.link_name, a.MiniCart {
  font-weight: bold;
  text-decoration: none;
  color: #EEE497;
}
span.reglink {
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}
td.pa_minicart_spacer {
  min-height: 20px;
  height: 20px;
}
td.pa_empty {
  width: [-- VAR.link_width --];
}

td.pa_content {
  vertical-align: top;
  text-align: left;
}

table.pa_content {
  width: 100%;
  vertical-align: top;
  text-align: left;
  background: transparent;
}

td.pa_image {
  text-align: left;
  vertical-align: top;
  width: 10px;
}

img.pa_image {
}

td.pa_name {
  text-align: left;
  vertical-align: top;
  font-weight: bold;
  font-size: [-- VAR.pa_large_font --];
  width: 90%;
}

td.pa_text1 {
  text-align: left;
  vertical-align: top;
}

td.pa_search_form {
  vertical-align: middle;
  padding-top: 0px;
  padding-bottom: 0px;
}

td.pa_products {
  vertical-align: top;
  text-align: left;
}

table.pa_products {
  width: 100%;
  height: 100%;
  vertical-align: top;
  text-align: left;
}

td.pa_product {
  border: [-- VAR.pa_col_border--] [-- VAR.pa_table_border_color --];
  vertical-align: top;
  text-align: left;
}

td.pa_prevnext {
  text-align: center;
}

td.pa_text2 {
  vertical-align: top;
  text-align: left;
}

td.pa_footer {
  text-align: center;
  font-size: 8pt;
}

td.pa_text3 {
  vertical-align: top;
  text-align: left;
}

Customize the Elite Theme Further

Cookbook Home Page>>ShopSite Built-In Templates>>Elite Built-In ShopSite Theme