Customizing your launch designer links

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.

Share:
0 Comments

No Comment.

Scroll to Top