Home :: Design and Layout :: Examples of design changes (1-6)


	Home \| Docs

Categories

Home - Design and Layout - Examples of design changes (1-6)
Examples of design changes (1-6)

You need to change the default style of links on the site. Links must have the orange color (#f27a00) instead of blue (#014ead)

You need to change the font size and color

Changing the buttons with rounded corners

Changing the rounded buttons

Changing the site background

Modifying the "Powered by SP-Cart - Shopping Cart Software" text at the bottom of the store pages

Here are some simple examples of changing design elements. These tips will help you to change some elements of the storefront. You may need to read the Smarty basics chapter before this one for better understanding of the example changes and for more detailed information about the Smarty template engine.

Example 1:

You need to change the default style of links on the site. Links must have the orange color (#f27a00) instead of blue (#014ead).

Create the template styles.post.tpl with the content

1.
<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

in the directory skins/SKIN_NAME/customer/addons/my_changes/hooks/index. Then create the file styles.css with the necessary style(s) in the directory skins/SKIN_NAME/customer/addons/my_changes.

In our case the file styles.css will contain the following:

1.
2.
3.
a, a:visited, a:hover, a:active {
color: #f27a00;
}

Example 2:

You need to change the font size and color.

Create the template styles.post.tpl with the content

1.
<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

in the directory skins/SKIN_NAME/customer/addons/my_changes/hooks/index. Then create the file styles.css with the necessary style(s) in the directory skins/SKIN_NAME/customer/addons/my_changes.

In the file styles.css insert the following parts of code (with the necessary changes) depending on the changes you want to make:

To change the main font color/size/family

1.
2.
3.
4.
body, div, p {
                 color: #353535;
                 font: normal 13px Verdana, Arial, sans-serif;
}

To change the main font in buttons

1.

2.
3.
4.

.button a, .button-action a, .button-submit-action input, .button-submit input, .button-submit-big input {
              color: #505050;
              font: bold 12px Arial, sans-serif;
}

To change the font of inactive tabs in the top menu

1.
2.
3.
4.
#top_menu ul li.first-level a, #top_menu ul li.first-level a:hover {
                  color: #000000;
                  font: bold 12px Verdana, Arial, sans-serif;
}

To change the font of active tabs in the top menu

1.
2.
3.
4.
#top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {
                    color: #000000;
                    font: bold 12px Verdana, Arial, sans-serif;
}

To change the font of the general sidebox title

1.
2.
3.
4.
.sidebox-title span {
               color: #ffffff;
               font: normal 16px Verdana, Arial, sans-serif;
}

To change the font of the important sidebox title

1.
2.
3.
4.
  .sidebox-categories-wrapper .sidebox-title span {
               color: #ffffff;
               font: normal 16px Verdana, Arial, sans-serif;
}

To change the font of second-level headers

1.
2.
3.
4.
.subheader, .subheader-first-item {
                color: #2d2e2e;
                font: bold 14px Arial, Helvetica, sans-serif;
}

To change the font of third-level headers

1.
2.
3.
4.
5.
.subheader2 {
                 font: bold 11px tahoma, arial, verdana, sans-serif;
                 padding-bottom: 3px;
                 margin: 10px 0 2px 0;
}

To change the label font

1.
2.
3.
.form-field label {
              font: normal 12px verdana, geneva, arial, helvetica, sans-serif;
}

To change the copyright font

1.
2.
3.
4.

.bottom-copyright {
                color: #ffffff;
                font: 11px Arial, Helvetica, sans-serif;
}

Example 3:

Changing the buttons with rounded corners

Create the template styles.post.tpl with the content

1.
href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

in the directory skins/SKIN_NAME/customer/addons/my_changes/hooks/index. Then create the file styles.css in the directory skins/SKIN_NAME/customer/addons/my_changes.

The button is created with opaque images (i.e. it has slightly rounded corners, for example, the button Add to cart in the Basic skin).

Let's assume that both types of buttons (button and action button) have rounded corners.

The button is drawn in a graphics editor, and then drafts of the left and right parts of the button are created (e.g. \skins\base\customer\images\but_left_action.gif and \skins\base\customer\images\but_right_action.gif). It is advisable that they are not less than 200px in length.

Let's assume that the images but_left_action.gif and but_right_action.gif are created for the action button, while the images but_left.gif and but_right.gif for the button.

The styles.css file should contain the following:

Click here

It is also necessary to create the file styles_ie.css in the directory skins/SKIN_NAME/customer/addons/my_changes and add correcting styles for browsers MS IE there.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
.button-action a {
               padding-top: 3px;
}
.button-submit-action {
               padding-right: 17px;
}
.button-submit-action input {
               padding: 0px 0px 0px 9px;
               margin: 0px;
               width: 1%;
}

Example 4:

Changing the rounded buttons

Create the template styles.post.tpl with the content

1.
<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

in the directory skins/SKIN_NAME/customer/addons/my_changes/hooks/index. Then create the file styles.css in the directory skins/SKIN_NAME/customer/addons/my_changes.

The button is created with transparent images (i.e. the button is rounded, for example, the button Add to cart in the Electro skin).

Let's assume that an action button is rounded and a button has square shape.

The button is drawn in a graphics editor, and then drafts of the left and right parts of the button are created (e.g. \skins\electro\customer\images\but_left_action.gif and \skins\electro\customer\images\but_right_action.gif for the Electro skin). They should be not less than 200 px in length.

The styles.css file should contain the following:

Click here

Also, it is necessary to create the file styles_ie.css in the directory skins/SKIN_NAME/customer/addons/my_changes and add correcting styles for browsers MS IE there.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
/* For IE6 only */
* html .button-action {
             padding-right: 10px;
             margin-left: 12px;
}
* html .button-action a {
             padding-top: 3px;
             position: relative;
             left: -10px;
}
* html .button-submit-action input {
             padding: 0px 0px 0px 9px;
             width: 1%;
             position: relative;
             left: -6px;
}
* html .button-submit input, * html .button a {
             position: relative;
             left: -10px;
}
/* /For IE6 only */

.button-submit-action {
             overflow: visible;
}

Example 5:

Changing the site background

Create the template styles.post.tpl with the content

1.
<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

in the directory skins/SKIN_NAME/customer/addons/my_changes/hooks/index. Then create the file styles.css in the directory skins/skin/customer/addons/my_changes.

If you want to define the background color, the file styles.css will contain:

1.
2.
3.
body {
                   background: #f5f5f5 none;
}

If you want to define an image as a background, the file styles.css should contain:

for the image that is duplicated horizontally, like in the Sport skin

1.
2.
3.
body {
                  background: #b4b4b4 url('images/body_bg.png') repeat-x left top;
}

for the image that is duplicated vertically, like in the Basic skin

1.
2.
3.
body {
                  background: #f1f6f9 url('images/body_bg.gif') repeat-y center top;
}

for the image that is not duplicated

1.
2.

3.
body {
                  background: transparent url(images/body_bg.png) no-repeat center top; /* the parameters "center" and "top" specify the position of the background image, the parameters "left, center, right" and "top, center, bottom" can be used */
}

Example 6:

Modifying the "Powered by SP-Cart - Shopping Cart Software" text at the bottom of the store pages.

Create the file bottom.override.tpl in the directory skins/SKIN_NAME/customer/addons/my_changes/hooks/index.

If you want to delete the text, the file should contain the following:

1.

2.

<p class="bottom-copyright class">{$lang.copyright} © {if $smarty.const.TIME|date_format:"%Y" != $settings.Company.company_start_year}{$settings.Company.company_start_year}-{/if}{$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}.
</p>

Or if you want to replace SP-Cart with your own brand, bottom.override.tpl should contain:

1.

2.

<p class="bottom-copyright class">{$lang.copyright} © {if $smarty.const.TIME|date_format:"%Y" != $settings.Company.company_start_year}{$settings.Company.company_start_year}-{/if}{$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}.  {$lang.powered_by} <a href="http://www.your_company_name.com" target="_blank" class="underlined">Your company name</a>
</p>

<< Read Previous Next 5 examples >>