Customizing Tips #1 – Customizing Your DecoNetwork Store with CSS

One of the things I love about DecoNetwork is the ability to customize a store. While we have a selection of themes to choose from you have the capability through a little CSS to change the look and feel of your website and build the site you truly want.

Here are some favorite tips of mine to customize your DecoNetwork store.

To be Left or Right!

A DecoNetwork skin is essentially made up of a few areas or containers. They are:

HEADER at the top which contains the site logo, cart items, recent items and currency, login, search and the site menu.

CONTENT which has two inner areas called COLUMN_A which contains the main parts of the site such as product and design listings, site page content and more and COLUMN_B which contains the side menus and options.

FOOTER which contains the footer links, powered by logos, create store link, user agreement and privacy policy plus copyright statement.

While some of these are nested within other contains the point of this blog post is not to explain all the containers in a DecoNetwork site so I won’t go into details of those – at this stage anyway!

Some DecoNetwork site owners like their side menus on the left side however some prefer the menus on the left.

By default COLUMN_B (menu) floats left and COLUMN_A (site content) floats right.

By changing the ‘float’ property you can swap the COLUMN_A container with the COLUMN_B  container.

How to:

  1. Log into your DecoNetwork system
  2. Manage Store > Appearance > Customize Template CSS
  3. Select the ‘Create Custom CSS’ tab
  4. Paste the custom CSS below
  5. Click “Save” to save the changes
.column_a {
float:left;
}
.column_b {
float:right;
}

Custom product thumbnails

By default DecoNetwork uses the product views as a thumbnail which may not match the unique look and feel you’re aiming for with your site.

You can change the default thumbnail image by changing the Catalog image.

How to:

  1. Log into your DecoNetwork system
  1. Manage Fulfillment Center > Products > Manage Products
  2. Select ‘Edit’ next to the product you want to change.
  3. Select the ‘Images’ tab
  4. Change the “Catalog Image” by clicking ‘Browse’ and select a new image
  5. Click ‘Save’ to keep the change.

Catalog mode vs. regular mode for blank products thumbnails

As with my examples here the default blank product listings is a catalog mode which has the thumbnail, decoration processes, prices, sizes and color swatches.

While this information is useful for the consumer in some cases it may crowd your site and a simple product thumbnail may be more appropriate.

This can be easily changed by modifying the Blank Products ‘Blank Display Type’ for the Home or Create page.

How to:

  1. Log into your DecoNetwork system
  1. Manage Store > Website Pages
  2. Select the ‘Home’ page.
  3. Select ‘Configure’ next to “Blank Products”.
  4. Change “Blank Display Type” from “Catalog Mode” to “Regular Mode”

You can also make the same change to the blank products listing on the ‘Create’ page.

Custom designer icons

Button images like most images in DecoNetwork are controlled by CSS.

The ‘Add Designs’ button CSS is:

.no_items a.image span {
background: url(“/images/icons/itoolbar_ii/48/pictures.png”) no-repeat scroll 0 50% transparent;
}

The ‘Add Text’ button CSS is:

.no_items a.text span {
background: url(“/images/icons/itoolbar_ii/48/tutorial.png”) no-repeat scroll 0 50% transparent;
}

To change these images upload a new image and link to it via Custom CSS.

How to:

  1. Create a custom icon no more than 48 pixels high or wide.
  2. Log into your DecoNetwork system
  3. Select Manage Store > Appears > Customize Template CSS.
  4. Select the ‘Create Custom CSS’ tab
  5. Select “Select File/Image” button and upload your custom icons
  6. Select the file. This will display the link to the file:
  7. Paste in the CSS tag in for the ‘Add Design’ or ‘Add Text’ button as mentioned above however replace the default url value with the “Selected File Url” noted above:
  8. Click “Save CSS” to save the changes.

Custom designer icon labels

As with the designer icons there may be times you want to modify the labels “Printing”, “Embroidery” and “Sublimation” used to describe the decoration processes in DecoNetwork.

The button labels such as “Add Printing Design” and Add Printing Text” is controlled by the name of the decoration process. The “Add … Design” is hard-coded but you can change “Printing”, “Embroidery” or “Sublimation” to whatever you want.

How to:

  1. Log into your DecoNetwork system
  2. Select Manage Fulfillment Center > Decoration Processes > then select ‘Configure’ for the decoration process you want to edit. i.e. “Configure DTG Process”
  3. Scroll down to “Store Settings”.
  4. Un-check “Use system generated name” and enter your own custom name:
  5. Click “Update” to save your changes.
1 Comments
Avatar
Petrus Purnomo June 9, 2010

This is an excellent idea Brenden, can I ask? if I create a content page / several pages, that are specific to the product catalog, in my Wordpres site without changing or removing content or interfere with existing systems in wp me if I could? I've tried using a plugin, the result is a fatal error. is there a tipping his