Tag Archives: css

Create a stitched effect using CSS

Leave a reply

This is a short, neat CSS trick to get a stitched effect around texts or buttons.

stitched_effect

HTML:

<div class=”stitched”>
CSS Stitched Effect
</div>

CSS:

.stitched {
     padding: 7px 20px;
      margin: 10px;
      background: #F8F8FF;
      color: #000000;
      font-size: 21px;
      font-weight: bold;
      border: 2px dashed #D3D3D3;
      border-top-left-radius: 3px;
      -moz-border-radius-topleft: 3px;
      -webkit-border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      -moz-border-radius-bottomleft: 3px;
      -webkit-border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      -moz-border-radius-bottomright: 3px;
      -webkit-border-bottom-right-radius: 3px;
      border-top-right-radius: 3px;
      -moz-border-radius-topright: 3px;
      -webkit-border-top-right-radius: 3px;
      -moz-box-shadow: 0 0 0 4px #F8F8FF, 2px 1px 4px 4px rgba(10,10,0,.5);
      -webkit-box-shadow: 0 0 0 4px #F8F8FF, 2px 1px 4px 4px rgba(10,10,0,.5);
      box-shadow: 0 0 0 4px #F8F8FF, 2px 1px 6px 4px rgba(10,10,0,.5);
      text-shadow: 1px 1px 2px #F8F8FF;
      font-weight: normal;
      float:left;
}

 

Remove the Disabled decoration processes from the Add Text and Add Design popup

1 Reply

In DecoNetwork it is possible to disable certain decoration processes to a location on a product. For example, the left chest area might support embroidery and screen printing, but you may have to disable embroidery on the larger full body area.

When a decoration process is disabled it appears with a red “Disabled” icon when Add Text or Add Design is selected:

deco_disabled1Some people prefer not to have the decoration process listed at all when it is not available for that area. For example:

deco_disabled2To achieve this simply add the following CSS in Websites > Select website > Appearance > Customize Template CSS.

.no_items .disabled {
display: none;
}

This will hide the display of disabled decoration processes when adding text or design items.

A simple but neat trick!

 

 

Use FireBug to preview and test your CSS change

2 Replies

If you’ve never tried FireBug I strongly recommend you do. It’s a great plug-in for FireFox and Chrome to help you preview and test your CSS changes your website without affecting how your site looks like to other browsers.

Essentially it lets you edit the HTML and CSS on your site while it is live but only you on your local PC will see these changes. When you are happy with the changes you can copy the CSS code out and paste it into your real site and the changes will then be live for everyone to see.

You can download FireBug at http://getfirebug.com/. The intro video is a little dry and covers lots of stuff that may not be relevant for you, so check out this great intro video on editing CSS in FireBug:

Skinning your DecoNetwork website

1 Reply

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

Customizing your launch designer links

Leave a reply

When a customer on your DecoNetwork website views a blank product they can select one of the decoration process links to launch the designer and decorate your product.

By default these are standard links:

But with a little CSS styling you can make these links more attractive and increase the chance a customer will select them to decorate a blank product.

Below is some CSS you can copy and add to your DecoNetwork website to style your launch designer buttons.

Adding the CSS to your DecoNetwork website

First let’s sort out the important part – how to add the custom CSS to your DecoNetwork website.

  1. Log into your DecoNetwork website.
  2. Browse to Manage Store > Appearance > Customize Template CSS.
  3. Select the Create Custom CSS tab and paste your CSS changes into the window.
  4. Click Save CSS to save your changes.

Example button styles and colors

Here are some sample CSS you can copy to style your product’s launch designer links:

Blue with “Customize with” text:

Copy the following CSS into DecoNetwork:

/* Blue "Customize with" start*/
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background-color: #1682E2;
 background-image: url("/uploads/10343058/File/customize_1.png");
 background-position: 4px 2px;
 background-repeat: no-repeat;
 border-radius: 3px 3px 3px 3px;
 color: #FFFFFF;
 padding: 5px 5px 5px 100px;
 text-decoration: none;
}
.personalize .meta.categories h5 a:hover {
 background-color: #005DC1;
}
/* Blue "Customize with" end */

You may want to modify the “Customize with” text which is actually an image referenced in “background-image: url(“/uploads/10343058/File/customize_1.png”);”. Create your own small image no more than 20 pixels high as a PNG with transparent background and upload it to your DecoNetwork website.

  1. Log into your DecoNetwork website.
  2. Browse to Manage Store > Appearance > Customize Template CSS.
  3. Select the Create Custom CSS tab and upload your file using the Select File/Image button.
  4. Copy the image URL which will look similar to /uploads/10343058/File/customize_1.png and replace the value of the “background-image” property.

Blue button

Copy the following CSS into DecoNetwork:

/* Blue start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #499bea; /* Old browsers */
 background: -moz-linear-gradient(top, #499bea 0%, #1a5fbf 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#1a5fbf)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* IE10+ */
 background: linear-gradient(top, #499bea 0%,#1a5fbf 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1a5fbf',GradientType=0 ); /* IE6-9 */
 border: 1px solid #1a5fbf;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Blue end */

Silver button

Copy the following CSS into DecoNetwork:

/* Silver button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 0%, #e1ebec 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1ebec)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* IE10+ */
 background: linear-gradient(top, #ffffff 0%,#e1ebec 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1ebec',GradientType=0 ); /* IE6-9 */
 border: 1px solid #DCE1E1;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #404040;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Silver button end */

Orange button

Copy the following CSS into DecoNetwork:

/* Orange button */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #fff45e; /* Old browsers */
 background: -moz-linear-gradient(top, #fff45e 0%, #febf04 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff45e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #fff45e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #fff45e 0%,#febf04 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #fff45e 0%,#febf04 100%); /* IE10+ */
 background: linear-gradient(top, #fff45e 0%,#febf04 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff45e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
 border: 1px solid #FFE605;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #404040;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(255, 0, 0, 0.2) inset, 0 1px 3px rgba(255, 0, 0, 0.2);
}
/* Orange button end */

Charcoal button

Copy the following CSS into DecoNetwork:

/* Charcoal button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #505459; /* Old browsers */
 background: -moz-linear-gradient(top, #505459 0%, #000000 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505459), color-stop(100%,#000000)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #505459 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #505459 0%,#000000 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #505459 0%,#000000 100%); /* IE10+ */
 background: linear-gradient(top, #505459 0%,#000000 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505459', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 border: 1px solid #444444;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #F0F0F0;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(255, 255, 255, 0.6) inset, 0 1px 3px rgba(255, 255, 255, 0.6);
}
/* Charcoal button end */

Steel blue button

Copy the following CSS into DecoNetwork:

/* Steel blue button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #a7cfdf; /* Old browsers */
 background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* IE10+ */
 background: linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
 border: 1px solid #444444;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #F0F0F0;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Steel blue button end */

Green button

Copy the following CSS into DecoNetwork:

/* Green button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #b6e026; /* Old browsers */
 background: -moz-linear-gradient(top, #b6e026 0%, #89bf24 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6e026), color-stop(100%,#89bf24)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #b6e026 0%,#89bf24 100%); /* IE10+ */
 background: linear-gradient(top, #b6e026 0%,#89bf24 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#89bf24',GradientType=0 ); /* IE6-9 */
 border: 1px solid #89bf24;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Green button end */

Purple button

Copy the following CSS into DecoNetwork:

/* Purple button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #e570e7; /* Old browsers */
 background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop 
(100%,#a849a3)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* IE10+ */
 background: linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */
 border: 1px solid #a849a3;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Purple button end */

Red button

Copy the following CSS into DecoNetwork:

/* Red button start */
.personalize .meta.categories h5 {
 margin-bottom: 20px;
 margin-left: 5px;
 margin-top: 10px;
}
.personalize .meta.categories h5 a {
 background: #ff3019; /* Old browsers */
 background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
 background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
 border: 1px solid #a849a3;
 border-radius: 1px 1px 1px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 height: 28px;
 line-height: 28px;
 padding: 7px 10px;
 text-align: center;
 color: #FFFFFF;
 font-size: 12px; 
 font-weight:bold;
 text-decoration:none;
}
.personalize .meta.categories h5 a:hover {
box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Red button end */

Creating a round button

Sometimes you want something not so square, and round button is perfect for that! To turn your square button into a round button simple add the following property and value to the “.personalize .meta.categories h5 a” selector:

border-radius:99px;

Ensure this goes after the { and before the } on a new line in .personalize .meta.categories h5 a.

Creating a simple floating promotional bar for your website

6 Replies

‘Tis the festive season to give and be given to, and no doubt you’re thinking its time for some kind of festive season special on your website. So how best to promote this to your visiting customers?

Well a banner on the front page is an obvious start but more and more visitors to websites don’t enter from the home page. As search engines get better at indexing and digging information from the depth of sites, its not uncommon for a visitor to enter at a secondary page such as http://www.mypage.com/tshirts instead http://www.mypage.com.

So how can we ensure our special promotion is not missed and available to any visitor on any page?

A quick and easy way to do this is to insert a floating bar on your site that always sits at the top of your site all the times.

Example:

However unlike a static bar this floating bar floats so as your users scroll down your site the floating bar will always appear:

Yes, yes, yes… you will need to give up some pixel spaces for this, but it doesn’t have to be much!

So how does it work:

First you need to create a custom DIV in your customer HTML. In your DecoNetwork website browse Manage Store > Appearance > Customize Template HTML.

Select the Custom Layout tab check Override default layout:

This will allow you to add some custom HTML to your site.

Scroll down the custom HTML and locate the <body> tag.

Insert a few carriage returns after <body> and past the following HTML:

<div id="floatbar">
This is your floating bar. <a href="#">Links can also go here.</a>
</div>

i.e.:

<body>
<div id="floatbar">
This is your floating bar. <a href="#">Links can also go here.</a>
</div>

Change the content between <div id=”floatbar”> and </div> to be the content you want in your floating bar. i.e.

<body>
<div id="floatbar">
10% off T-Shirts. <a href="/page/tshirts">Click here.</a>
</div>

Click Update to save your changes.

Next we need to style the floating DIV and ensure it always stays at the top of the page and can be easily seen.

Browse Manage Store > Appearance > Customize Template CSS.

Select the Create Custom CSS tab and paste in the following CSS:

#floatbar {
     width:100%;
     position: fixed;
     z-index: 99;
     background: #000000;
     height: 20px;
     color: #FFFFFF;
     font-size: 12px;
     padding:5px;
}

#floatbar a {
     color:#FFCC00;
}

You can style your own floating bar by modifying the background, color and font size. In my case I have a black floating bar (#000000) with white text (#FFFFFF) and yellow links (#FFCC00). You can also adjust its height and font size.

Finally you need to ensure your new floating bar does not overlap any other content on your site like your login links and currency selector. To do this we ‘push’ your website down the same height as your floating bar (30px).

Add this CSS to your Create Custom CSS tab:

#container {
margin-top: 30px;
}

Click Save CSS to save your changes.

IMPORTANT: If you have already created custom CSS ensure you do not already have the CSS selectors listed in this article. If you do ADD the changes to your current CSS selectors.

Have fun!