Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script
  src="https://code.jquery.com/jquery-2.1.3.min.js"
  integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM="
  crossorigin="anonymous"></script>
<script src="//res.cloudinary.com/demo-robert/raw/upload/magnifier.js"></script>
<script src="//res.cloudinary.com/demo-robert/raw/upload/colorPicker.js"></script>
<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
<script>
//generic image vars
var URLPrefix = 'https://res.cloudinary.com/demo-robert/q_auto,f_auto/',
textString = '%20',
textVariable1 = '$text_!',
textVariable2 = '!/o_0/',
logoID = 'sample,o_0',
textFont = 'arial',
newHexColor = 'white',
URLSuffix = 'shirt_only.jpg',
textureOpacity = '0',
logoResult = '';

//model image vars
var modelOverlayString1 = 'l_',
modelOverlayString2 = ',w_300,ar_30:25,c_fit,y_-200,x_-5,e_overlay/',
modelTextTransform1 = 'l_text:',
modelTextTransform2 = '_100_bold:$(text),y_-40,co_rgb:333,o_70,w_300/',
modelDisplace = 'l_shirt_displace,e_displace,x_10,y_10/',
modelShirtUnderlay1 = 'u_shirt_only,e_replace_color:'
modelShirtUnderlay2 = ':60:white/',
modelTexture = 'l_heather_texture,o_',
modelUnderlay = '/u_model2/';

//hanging image vars
var hangingOverlayString1 = 'l_',
hangingOverlayString2 = ',w_220,ar_30:25,c_fit,y_-40,x_-5,e_overlay/',
hangingTextTransform1 = 'l_text:',
hangingTextTransform2 = '_100_bold:$(text),y_90,co_rgb:333,o_70,w_250/',
hangingDisplace = 'l_hanging_displace,e_displace,x_10,y_10/',
hangingShirtUnderlay1 = 'u_Hanging_T-Shirt_v83je9,e_replace_color:',
hangingShirtUnderlay2 = ':60:white/',
hangingTexture1 = 'l_hanging-shirt-texture,o_',
hangingTexture2 = '/l_Hanger_qa2diz,fl_relative,w_1.0/';

//laying image vars
var layingOverlayString1 = 'l_',
layingOverlayString2 = ',w_330,ar_30:25,c_fit,y_-30,x_-5,e_overlay/',
layingTextTransform1 = 'l_text:',
layingTextTransform2 = '_100_bold:$(text),y_150,co_rgb:333,o_70,w_350/',
layingDisplace = 'l_laying_displace,e_displace,x_10,y_10/',
layingShirtUnderlay1 = 'u_laying-shirt_xqstgr,e_replace_color:',
layingShirtUnderlay2 = ':60:white/',
layingTexture = 'l_laying-shirt-texture,o_';


//end image vars

//Invoke Color Swatch and set settings
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
$(document).ready(function(){
  $(".basic").spectrum({
      color: "#f00",
      change: function(color) {
          $("#basic-log").text("change called: " + color.toHexString());
      }
  });

$("#full").spectrum({
    color: "#ECC",
    showInput: true,
    className: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    maxSelectionSize: 10,
    preferredFormat: "rgb",
    localStorageKey: "spectrum.demo",
    move: function (color) {

    },
    show: function () {

    },
    beforeShow: function () {

    },
    hide: function () {

    },
    change: function(color) {
        var firstSwatch = $('#colorList')[0].children[0].children[0].src;
        newHexColor = color.toHexString().split('#')[1];
        var hexColor = color.toHexString().split('#')[1],
        newSrc = '//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:'+hexColor+':60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg';
        $("#colorList").append('<li id="'+hexColor+'"><img src="'+newSrc+'" /></li>');
        colorSwatchClick();
    },
    palette: [
        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
        "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
        ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
        "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
        "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
        "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
        "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
        "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
        "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
        "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
    ]
})});
</script>

<div id="demoContainer">
    <div id="header">
        <a href="https://cloudinary.com/">
        <img width="172" height="38" src="https://res-1.cloudinary.com/cloudinary/image/asset/dpr_2.0/logo-e0df892053afd966cc0bfe047ba93ca4.png" alt="Cloudinary Logo">
        </a>
        <h1>Product Personalization Demo</h1>
    </div>
    <div id="imageDemoContainer">
    <div id="preview">
    </div>
        <div id="mainImageLoading" class="hide"></div>
        <div id="mainImage"><img id="mainImageTag" src="https://res.cloudinary.com/demo-robert/image/upload/w_700/e_red:0/e_blue:0/e_green:0/l_hanging-shirt-texture,o_0,fl_relative,w_1.0/l_Hanger_qa2diz,fl_relative,w_1.0/Hanging_T-Shirt_v83je9.jpg" data-large-img-url="https://res.cloudinary.com/demo-robert/image/upload/e_red:0/e_blue:0/e_green:0/l_hanging-shirt-texture,o_0,fl_relative,w_1.0/l_Hanger_qa2diz,fl_relative,w_1.0/Hanging_T-Shirt_v83je9.jpg"/></div>
        <div id="imageThumbs">
            <ul id="thumbs">
                <li class="active" id="hangingThumb"><img src="https://res.cloudinary.com/demo-robert/image/upload/w_75/e_red:0/e_blue:0/e_green:0/l_hanging-shirt-texture,o_0,fl_relative,w_1.0/l_Hanger_qa2diz,fl_relative,w_1.0/Hanging_T-Shirt_v83je9.jpg" /></li>
                <li id="layingThumb"><img src="https://res.cloudinary.com/demo-robert/image/upload/w_75/e_red:0/e_blue:0/e_green:0/l_laying-shirt-texture,o_0,fl_relative,w_1.0/laying-shirt_xqstgr.jpg" /></li>
                <li id="modelThumb"><img src="https://res.cloudinary.com/demo-robert/image/upload/w_75/e_red:0/e_blue:0/e_green:0/u_model2,fl_relative,w_1.0/l_heather_texture,o_0,fl_relative,w_1.0/shirt_only.jpg" /></li>
            </ul>
        </div>
    </div>
    <div id="demoInputContainer">
        <div class="inputSelections">
            <h2>Select a color:</h2>
            <ul id="colorList" class="swatches">
                <li class="active" id="ffffff"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="47E8D2"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:47E8D2:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="DCA381"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:DCA381:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="702C3C"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:702C3C:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="E9C660"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:E9C660:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="A11D1F"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:A11D1F:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="897115"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:897115:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="598DE6"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:598DE6:60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
            </ul>
            <p><a href="#" onclick="addColor()">Add a custom color</a></p>
            <input type='text' id="full"/>
        </div>
        <div class="inputSelections">
            <h2>Select a texture:</h2>
            <ul id="texture" class="swatches">
                <li id="flat" class="active"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30,e_red:0/e_green:0/e_blue:0/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg" /></li>
                <li id="heatherTexture"><img src="//res.cloudinary.com/demo-robert/image/upload/w_30,h_30,e_red:0/e_green:0/e_blue:0/l_heather_texture,o_30,w_30,h_30,c_crop/white-bar.jpg" /></li>
            </ul>
        </div>
        <div class="inputSelections">
            <h2>Add a logo:</h2>
            <ul id="logo-list" class="swatches">
                <li id="cloudinary-logo"><img src="//res.cloudinary.com/demo-robert/image/upload/q_auto,f_auto,h_30/cloudinary-logo.jpg" /></li>
                <li id="fire"><img src="//res.cloudinary.com/demo-robert/image/upload/q_auto,f_auto,h_30/fire.png" /></li>
            </ul>
            <p><a href="#" id="add_a_logo">Add a Custom Logo</a></p>
        </div>
        <div class="inputSelections">
            <h2>Add text:</h2>
            <select id="fontList">
                <option value="Arial">Arial</option>
                <option value="Georgia">Georgia</option>
                <option value="Sacramento">Sacramento</option>
                <option value="Roboto">Roboto</option>
                <option value="Montserrat">Montserrat</option>
                <option value="Bitter">Bitter</option>
            </select>
            <div id="textInputContainer">
                <input type="text" id="shirtText" />
                <input type="button" id="addText" value="Add Text" />
            </div>
        </div>
    </div>
</div>


<script>
//Invoke magnifier
  $(document).ready(function(){
    var evt = new Event(),
    mag = new Magnifier(evt);
    mag.attach({
        thumb: '#mainImageTag',
        largeWrapper: 'preview',
        zoom: '4'
    });
    $("#mainImage").hover(
      function() {
        $('#preview').addClass('show');
      }, function() {
        $('#preview').removeClass('show');
      }
  	);
  });


//open upload Widget and set response variable
  document.getElementById("add_a_logo").addEventListener("click", function() {
    cloudinary.openUploadWidget({ cloud_name: 'demo-robert', upload_preset: 'pagespeed'},
      function(error, result) {
        if(!result)return;
        window.logoResult=result[0];
        addLogo();
      });
  }, false);

  //loader gif while images are loading
  function loader(a){
  	$('#mainImageLoading').removeClass('hide');
    var newImage = new Image();
    newImage.src= a;
    $(newImage).one("load", function() {
      $('#mainImageLoading').addClass('hide');
    }).each(function() {
      if(this.complete) $(this).load();
    });
  }

  //Update Image URLS
  function updateImageURLs(){
    var mainImageURL = function(){
      if ($('#thumbs .active')[0].id == 'hangingThumb'){
        return URLPrefix+textVariable1+textString+textVariable2+hangingOverlayString1+logoID+hangingOverlayString2+hangingTextTransform1+textFont+hangingTextTransform2+hangingDisplace+hangingShirtUnderlay1+newHexColor+hangingShirtUnderlay2+hangingTexture1+textureOpacity+hangingTexture2+'w_700,ar_1:1,c_pad/'+URLSuffix
      }
      else if ($('#thumbs .active')[0].id == 'layingThumb'){
        return URLPrefix+textVariable1+textString+textVariable2+layingOverlayString1+logoID+layingOverlayString2+layingTextTransform1+textFont+layingTextTransform2+layingDisplace+layingShirtUnderlay1+newHexColor+layingShirtUnderlay2+layingTexture+textureOpacity+'/w_700,ar_1:1,c_pad/'+URLSuffix
      }
      else {
        return URLPrefix+textVariable1+textString+textVariable2+modelOverlayString1+logoID+modelOverlayString2+modelTextTransform1+textFont+modelTextTransform2+modelDisplace+modelShirtUnderlay1+newHexColor+modelShirtUnderlay2+modelTexture+textureOpacity+modelUnderlay+'w_700,ar_1:1,c_pad/'+URLSuffix
      }
    }()
    //run loader gif until image is loaded
    loader(mainImageURL);
    //set new main image URL
    document.getElementById('mainImageTag').src = mainImageURL;
    document.getElementById('mainImageTag').setAttribute('data-large-img-url', document.getElementById('mainImageTag').src.replace('w_700,',''));
    document.getElementById('mainImageTag-large').src = document.getElementById('mainImageTag').src.replace('w_700,','');
    //set new Thumbnail URLs
    document.getElementById('hangingThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+hangingOverlayString1+logoID+hangingOverlayString2+hangingTextTransform1+textFont+hangingTextTransform2+hangingDisplace+hangingShirtUnderlay1+newHexColor+hangingShirtUnderlay2+hangingTexture1+textureOpacity+hangingTexture2+'w_75,ar_1:1,c_pad/'+URLSuffix
    document.getElementById('layingThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+layingOverlayString1+logoID+layingOverlayString2+layingTextTransform1+textFont+layingTextTransform2+layingDisplace+layingShirtUnderlay1+newHexColor+layingShirtUnderlay2+layingTexture+textureOpacity+'/w_75,ar_1:1,c_pad/'+URLSuffix
    document.getElementById('modelThumb').children[0].src = URLPrefix+textVariable1+textString+textVariable2+modelOverlayString1+logoID+modelOverlayString2+modelTextTransform1+textFont+modelTextTransform2+modelDisplace+modelShirtUnderlay1+newHexColor+modelShirtUnderlay2+modelTexture+textureOpacity+modelUnderlay+'w_75,ar_1:1,c_pad/'+URLSuffix
  }


  //Color-changing when somebody clicks on a color swatch
  function colorSwatchClick(){
      $("#colorList li").on("click", function() {
          $('#colorList .active').removeClass('active');
          $(this).addClass('active');
          //set window color variable
          newHexColor = $('#colorList .active')[0].id;
          //update image URLS
          updateImageURLs();
          //Set flat color swatch color
          document.getElementById('flat').children[0].src = "https://res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:"+newHexColor+":60:white/l_heather_texture,o_0,w_30,h_30,c_crop/white-bar.jpg"
          //Set heather texture swatch color
          document.getElementById('heatherTexture').children[0].src = "https://res.cloudinary.com/demo-robert/image/upload/w_30,h_30/e_replace_color:"+newHexColor+":60:white/l_heather_texture,o_30,w_30,h_30,c_crop/white-bar.jpg";
      })
  };

  //Thumnail to main image
    function thumbToMain(){
      $("#thumbs li").on("click", function() {
        $('#thumbs .active').removeClass('active');
        $(this).addClass('active');
        updateImageURLs();
      })
    };

  //Texture add/remove
    function textureSwap(){
      $("#texture li").on("click", function() {
          $('#texture .active').removeClass('active');
          $(this).addClass('active');
          //set texture opacity window variable
          if ($('#texture .active')[0].id == 'flat'){
            textureOpacity = '0';
          }
          else {
            textureOpacity = '30';
          }
          //rebuild URLS
          updateImageURLs();
          var newTexture = 'texture,o_'+textureOpacity;
          var numColors = document.getElementById('colorList').children.length;
          for (var i=0; i<numColors;i++){
              document.getElementById('colorList').children[i].children[0].src = document.getElementById('colorList').children[i].children[0].src.replace(/texture,o_([^,]+)/,newTexture);
          }
      })
    };

    //add logo to images
    function addLogo(){
        logoID = logoResult.public_id;
        var newLogoSrc = "//res.cloudinary.com/demo-robert/q_auto,f_auto,h_30/"+logoID;
        $("#logo-list").prepend('<li id="'+logoID+'"><img src="'+newLogoSrc+'"/></li>');
        updateImageURLs();
    }
    function applyLogo(){
      $("#logo-list li").on("click", function() {
        $('#logo-list .active').removeClass('active');
        $(this).addClass('active');
        logoID = $('#logo-list .active')[0].id;
        updateImageURLs();
        applyLogo();
      })
    }

    //add text to images
    function addText(){
      $("#addText").on("click", function() {
        textString = $('#shirtText').val();
        textFont = $('#fontList').val();
        updateImageURLs();
      })
    }

//initialize click watchers
  $(document).ready(function(){
      colorSwatchClick();
      thumbToMain();
      textureSwap();
      addText();
      applyLogo();
  });
</script>

              
            
!

CSS

              
                html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  font-family:arial;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


a  {
    color:#2074b5;
    text-decoration:none;
    font-size:12px;
}
input  {
    border: 1px solid #888;
    border-radius: 5px;
    height: 24px;
    line-height: 20px;
    padding: 5px;
    width: 200px;
    float:left;
    margin:0 5px 0 0;
}
#preview  {
  width:300px;
  height:300px;
  position:absolute;
  left:0px;
  top:0px;
  overflow:hidden;
}
.show  {
  border:1px solid #888;
  left:750px !important;
}

#addText  {
    background-color: #db631e;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    height: 36px;
    line-height: 24px;
    width: 150px;
}
#demoContainer  {
    width:1200px;
    height:auto;
    margin:0 auto;
    font-family:Roboto;
    position:relative;
}
    #header  {
        width:100%;
        height:auto;
        float:left;
        margin:0 0 10px;
    }
        #header a  {
            float:left;
        }
        #header h1  {
            font-size:30px;
            color:#0E2F5A;
            clear:none;
            float:left;
            margin:10px 0 0 20px;
        }
    #imageDemoContainer  {
        width:700px;
        height:auto;
        float:left;
        position:relative;
    }
      #mainImageLoading {
        width:700px;
        height:700px;
        position:absolute;
        z-index:1000;
        background:#fff url('//res.cloudinary.com/demo-robert/image/upload/v1452886398/loader.gif') no-repeat center;
        opacity:.7;
      }
      .hide  {
        display:none !important;
      }
        #imageThumbs  {
            float:left;
            width:100%;
            height:75px;
        }
            ul#thumbs  {
                float:left;
                list-style:none;
                display:inline;
                padding:0;
                margin:10px 0 50px 50px;
            }
                ul#thumbs li  {
                    float:left;
                    display:inline;
                    margin:0 10px 0 0;
                    border:1px solid #E8E8E8;
                    padding:0;
                    height:75px;
                    width:75px;
                }
    #demoInputContainer  {
        width:450px;
        height:auto;
        float:right;
        padding:100px 0 0;
    }
        .inputSelections  {
            width:100%;
            margin:0 0 20px;
            height:auto;
            float:left;
        }
            .inputSelections h2  {
                font-weight:bold;
                font-size:18px;
                margin:5px 0 10px;
            }
            .inputSelections ul  {
                width:100%;
                height:auto;
                display:block;
                clear:both;
                float:left;
                margin:0 0 15px;
            }
                .inputSelections ul li  {
                    float:left;
                    padding:0;
                    width:auto;
                    border:1px solid #E8E8E8;
                }
                .swatches  {
                  margin:-10px 0 15px !important;
                }
                .swatches li  {
                    width:30px;
                    height:30px;
                    padding:0;
                    margin:10px 10px 0 0;
                }
                  .inputSelections ul li:hover  {
                    cursor:pointer;
                  }
                 ul#swatches li  {
                    border:1px solid #E8E8E8;
                    height:50px;
                    padding:0;
                    width:auto;
                }
                #fontSelector li  {
                    margin:0 10px 0 0;
                    height:30px;
                    width:auto;
                }
ul.logo li  {
  height:50px;
}
.active  {
    border:1px solid #959595 !important;
}
#textInputContainer  {
    float:left;
    width:100%;
    height:auto;
}
#imageThumbs li:hover  {
    cursor:pointer;
}
#fontlist  {
    width:200px;
    height:30px;
    margin:0 0 15px;
}
#preview  {
}

.magnifier-thumb-wrapper {
    position: relative;
    display: block;
    top: 0;
    left: 0
}

.magnifier-lens {
    position: absolute;
    border: solid 1px #ccc;
    z-index: 1000;
    top: 0;
    left: 0;
    overflow: hidden;
    background-image: none !important;
}

.magnifier-loader {
    position: absolute;
    top: 0;
    left: 0;
    border: solid 1px #ccc;
    color: #fff;
    text-align: center;
    background: transparent;
    background: rgba(50, 50, 50, 0.5);
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
}

.magnifier-loader-text {
    font: 13px Arial;
    margin-top: 10px
}

.magnifier-large {
    position: absolute;
    z-index: 100
}

.magnifier-preview {
    padding: 0;
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden
}

.magnifier-preview img {
    position: absolute;
    top: 0;
    left: 0
}

.opaque {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
}

.hidden {
    display: none
}
/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
  position:relative;
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -14px;
    right: 0;
    left: 0;
    height: 8px;
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    display: none !important;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color { right: 40%; }
    .sp-hue { left: 63%; }
    .sp-fill { padding-top: 60%; }
}
.sp-dragger {
   border-radius: 5px;
   height: 5px;
   width: 5px;
   border: 1px solid #fff;
   background: #000;
   cursor: pointer;
   position:absolute;
   top:0;
   left: 0;
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: 0;
    background-color: #ECECEC;
    border: solid 1px #f0c49B;
    padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: solid 1px #666;
}

/* Input */
.sp-input-container {
    float:right;
    width: 100px;
    margin-bottom: 4px;
}
.sp-initial-disabled  .sp-input-container {
    width: 100%;
}
.sp-input {
   font-size: 12px !important;
   border: 1px inset;
   padding: 4px 5px;
   margin: 0;
   width: 100%;
   background:transparent;
   border-radius: 3px;
   color: #222;
}
.sp-input:focus  {
    border: 1px solid orange;
}
.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    float:left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}
.sp-picker-container {
    width: 172px;
    border-left: solid 1px #fff;
}

/* Palettes */
.sp-palette-container {
    border-right: solid 1px #ccc;
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 25px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
.sp-palette-button-container,
.sp-button-container {
    float: right;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    border: solid 1px #91765d;
    background: #eee;
    color: #333;
    vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
}
.sp-preview {
    position:relative;
    width:25px;
    height: 20px;
    border: solid 1px #222;
    margin-right: 5px;
    float:left;
    z-index: 0;
}

.sp-palette {
    *width: 220px;
    max-width: 220px;
}
.sp-palette .sp-thumb-el {
    width:16px;
    height: 16px;
    margin:2px 1px;
    border: solid 1px #d0d0d0;
}

.sp-container {
    padding-bottom:0;
}


/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
  background-color: #eeeeee;
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 5px 4px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  vertical-align: middle;
}
.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}


.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}

.sp-preview, .sp-alpha, .sp-thumb-el {
    position:relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    top:0;left:0;bottom:0;right:0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}


.full-spectrum .sp-palette {
max-width: 200px;
}
.sp-palette-container {
    border-right: 1px solid #ccc;
    display: none;
}
              
            
!

JS

              
                
              
            
!
999px

Console