blog, Uncategorized, Website Design

VinSolutions Websites Custom Coupons Using W3.CSS

My last post mentioned how I stumbled upon a solution for creating nice looking coupons for VinSolutions dealer websites.  Following is a DIY tutorial on how to accomplish this for yourself.

First Steps

The first step is to get the css linked to the page.  This is where I encountered the only problem with using the w3schools w3.css.  I figured the easiest solution was to simply link to the w3.css cdn.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Although this does work, there is an issue. Because this new css code is below all other css (and the browser reads the code line by line as the page loads) this css will take precedence over all VinSolutions css code. So I downloaded the css file and commented out lines 38 to 42.

/* Basic page stuff don’t want to overwrite VinSolutions
html,body{font-family:comic,sans-serif;font-size:14px;line-height:1.5}
h1,h2,h3,h4,h5,h6{font-family:”Segoe UI”,comic,sans-serif;font-weight:400;margin:10px 0}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
*/

I left the top 45 lines of code (note says it’s extracted from normalize.css) plus a few lines after (links, images and tables) that I figured wouldn’t interfere but enhance the overall pages. I then uploaded this file to one of my sub-domains and linked the file.

Everything worked nicely with the exception of the images. They were not responsive. Since I was linking to my own version of the file this wasn’t a problem. Change (around line 45):

img{margin-bottom:-5px}

To:

img{margin-bottom:-5px;max-width:100%;}

Now the images are responsive. NICE!

Creating Custom VinSolutions Dealer Websites Coupon

I wanted the coupon to be half of the page on the desktop but it would fill the entire screen on the mobile version. So the first step was to create a column using VinSolutions css.

<div class="col-1-2">

Inside of this 1/2 page column the card gets inserted:

<div class="w3-card-2">

The header of the card displays the offer:

<header class="w3-container">

After the header is the container that contains the details of the offer:

<div class="w3-container">

At the bottom of the details container the area for the fine print/disclaimer is needed:

<div class="w3-row">

Then inside that area is the actual fine print/disclaimer (which I chose to give some separation with a line):

<p class="w3-tiny w3-border-top">

So when we put this all together with the Title, Image, Details and Disclaimer it looks like this:

<!– Coupon 1 –>
<div class="col-1-2">
  <div class="w3-card-2">
   <header class="w3-container">
    <h3>Toyota Mudguards – $10.00 OFF</h3>
   </header>
   <div class="w3-container">
    <div class="w3-row">
     <img src="http://images.whatever.com/CDN/parts/toyota-mudguards-92795-labadie.jpg" alt="toyota mudguard picture"/><!– Offer Image/Picture –>
     <p>Equip your vehicle with durable mudguards, designed specifically to integrate with your vehicle’s styling, body panels, structure and clearances—while helping to provide protection for your factory paint from mud and dirt, as well as stone chipping.</p>
    </div>
    <div class="w3-row">
     <p class="w3-tiny w3-border-top">Expires 11/30/2015 Must present coupon at time of purchase. Only one coupon per customer per visit. Coupon does not apply to prior purchases.</p>
    </div>
   </div>
  </div>
</div>

Now this gave me a basic structure that worked. But it didn’t look nice. So code was added to turn the header gray, round the bottom edges, and separate the sections a little. So I ended up with:

&#lt;div class="col-1-2 w3-padding-top"&#gt;
 &#lt;div class="w3-card-2 w3-round-large"&#gt;
  &#lt;header class="w3-container w3-dark-grey w3-center"&#gt;
   &#lt;h3&#gt;Toyota Mudguards – $10.00 OFF&#lt;/h3&#gt;
  &#lt;/header&#gt;
  &#lt;div class="w3-container"&#gt;
   &#lt;div class="w3-row w3-padding-top"&#gt;
    &#lt;img src="http://images.labadietoyota.com/CDN/parts/toyota-mudguards-92795-labadie.jpg" alt="toyota mudguard picture"/&#gt;&#lt;!– Offer Image/Picture –&#gt;
    &#lt;p&#gt;Equip your vehicle with durable mudguards, designed specifically to integrate with your vehicle’s styling, body panels, structure and clearances—while helping to provide protection for your factory paint from mud and dirt, as well as stone chipping.&#lt;/p&#gt;
   &#lt;/div&#gt;
   &#lt;div class="w3-row"&#gt;
    &#lt;p class="w3-tiny w3-border-top"&#gt;Expires 11/30/2015 Must present coupon at time of purchase. Only one coupon per customer per visit. Coupon does not apply to prior purchases.&#lt;/p&#gt;
   &#lt;/div&#gt;
  &#lt;/div&#gt;
 &#lt;/div&#gt;
&#lt;/div&#gt;

So what does this look like?
toyota mudguard coupon

So after a few of these were created the alignment was off a little bit on the desktop version. That is easily fixed by wrapping every two coupons in a row. At first I tried this with the VinSolutions column code col-1-1 but that has some padding built in. W3.css had a solution with:

<div class="w3-row">