Skinning your DecoNetwork website

One of the great benefits of DecoNetwork is the ability to modify your sites look and feel. Otherwise known as skinning your site.

Before we jump into the details I’d like to explain a little about a web server, the HTML and CSS.

To best describe each of these and how they relate in DecoNetwork I’d like you to imagine your DecoNetwork website as a house. A house consists of the land (the webserver), the building frame (the HTML), and the bricks, tiles and paint that decorates the building (the CSS, or Casecade Styling Sheet).

In the case of DecoNetwork your subscriptions provides you with your block of land plus an initial house complete with frame and decorations that you can customize as your own.

Start with a template

When skinning your DecoNetwork website it’s usually best and easier to start with one of the predefined 28 store templates in DecoNetwork.

  • Browse to Manage Store > Appearance > Select Store Template
  • Select the template and color variation of the template you want and select Select Theme.

Paint first, build later

If you’re fairly new to the world of customizing a website we recommend you focus more on the colors (CSS) than layout (HTML) of your site. In other words, paint your house as a first project before building a complete new house from scratch.

There are two ways to modify some colors of your site.

  1. Use the Edit store appearance icon in the front-page of your website
  2. Modify your sites CSS

Edit Store Appearance

Edit Store Appearance is a simple tool to modify the colors of your website. Browse to the front-page of your website and select the paintbrush edit store appearance icon in the top-right corner:

Mouse over the item you want to modify and select it. A popup will appear allowing you to change some of the item’s colors.

When you are finished select the paintbrush icon again to close the Edit store appearance mode.

Modify your sites CSS

If you like to get into the nitty gritty of CSS then you’d want to customise the template CSS.

  • Browse to Manage Store > Appearance > Customize Template CSS
  • Select the Create Custom CSS tab
  • Paste in your custom CSS
  • Press Save CSS to save your changes

When pasting your custom CSS ensure you only include what you’ve changed. For example, the following CSS specifies the size, color and font of a H1 heading:

H1 {
 size: 18px;
 color: #000000;
 font-family: Arial;
 }

If you want to change your heading color from blank (#000000) to a red (#CC0000) then you would include the following in your Create custom CSS tab:

H1 {
 color: #CC0000;
 }

As the size and font will not change these are excluded.

My personal tip is to use FireFox and a browser plug-in called FireBug (http://getfirebug.com). This awesome little tool allows you to inspect your websites CSS and make live changes to preview the result right in the browser. With the changes made and preview looking correct, you can paste your changes directly into you DecoNetwork custom CSS tab. Check out the “Introduction to Firebug” video on their site.

Modify your sites HTML

While you can always return to the default DecoNetwork HTML, modifying the HTML of your DecoNetwork website should be avoided unless you have HTML knowledge.

To modify the HTML:

  • Browse to Manage Store > Appearance > Customer Template HTML
  • Select the Custom Layout tab
  • Check the Override default layout check box
  • Modify your HTML
  • Press Update to save your changes
Changes may include referencing external fonts, or creating your own unique DIV containers.
Your entire DecoNetwork website will use the layout you create in your HTML so any changes made must consider its impact across all pages of your site.

Need a helping hand?

DecoNetwork provides an additional service called DecoCoach which can design, setup and skin your DecoNetwork website for you. To find out more contact our DecoNetwork team: www.deconetwork.com/contact

Up-coming webinar

We have an up-coming webinar that walks you through the process of modifying your DecoNetwork’s CSS and HTML plus our DecoCoach service. To register for this free event visit:

Introduction to skinning your DecoNetwork website
Thursday, June 14 – 2pm US East / 11am US Pacific Register
DecoCoach – DecoNetwork’s custom skinning and setup service
Thursday, June 28 – 2pm US East / 11am US Pacific Register
Share:
0 Comments

No Comment.

Scroll to Top