title: Creating Header/Banner that users can customise
body: <p>Does anyone know if it's possible to create a feature header generator that gives users the ability to customise it with colours, images and text? Then save it and add it to their website?</p>
  
  <p><a href="http://jsfiddle.net/94jf2/1/" rel="nofollow">I have created a feature banner demo here to give you an idea of what I'm trying to achieve</a>. (Source code is at the bottom of this post)</p>
  
  <p>I want users to be able to:</p>
  
  <ul>
  <li>Change the colour of the gradient from a predefined dropdown list</li>
  <li>Insert their own text (shown on top of the gradient</li>
  <li>Add their own image to the right div</li>
  </ul>
  
  <p>Does anyone know how this can be achieved?</p>
  
  <p>Many thanks,</p>
  
  <p>Ross</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;style&gt;
           body {
           font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
           font-weight: 300;
           }
           img {
           display: block;
           }
           h3 {
           font-size:200%
           }
            #container {
           width: 100%;
           height: 150px;
           border-style:solid;
           border-width:1px;
           border-color:#a9a9a9;
           }
           #container &gt; div {
           display: table-cell;
           }
           #left {
           width: 250px;
           vertical-align: middle;
           }
           #middle {
           width: 80%;
           min-width: 400px;
           max-width: 960px;
           color:white;
           text-align:center;
           vertical-align:middle;
           /* fallback */
           background-color: #9b4596;
           /* Safari 4-5, Chrome 1-9 */
           background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9b4596), to(#6c2787));
           /* Safari 5.1, Chrome 10+ */
           background: -webkit-linear-gradient(top, #9b4596, #6c2787);
           /* Firefox 3.6+ */
           background: -moz-linear-gradient(top, #9b4596, #6c2787);
           /* IE 10 */
           background: -ms-linear-gradient(top, #9b4596, #6c2787);
           /* Opera 11.10+ */
           background: -o-linear-gradient(top, #9b4596, #6c2787);
           }
           #right {
           width: 250px;
           vertical-align: middle;
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div id="container"&gt;
           &lt;div id="left"&gt;
              &lt;img src="http://placehold.it/250x150"&gt;
           &lt;/div&gt;
           &lt;div id="middle"&gt;
              &lt;h3&gt;School of Computing&lt;/h3&gt;
           &lt;/div&gt;
           &lt;div id="right"&gt;
              &lt;img src="http://lorempixel.com/output/technics-q-c-250-150-1.jpg"&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>