All Articles

Making maggieburton.com

Site 0.0 – ???

When I was first asked to edit the site I thought it was going to be a quick and easy job. Simply change some text here and there and we’re good to go. However when I got access to the cPanel and tried pasting some new words into the containers, they weren’t resizing with the new text like they should. I’ve never seen this happen before and it looked like each container had some sort of unique ID, I used Google Chrome to check out what was happening and I noticed there was a proprietary script that set sizes for each platform, when resizing the page it resizes each div to the correct value. This is because it was made with some sort of website builder I’ve never heard of. So instead of giving up on adding new content I used Google Chrome once again to figure out the colours, fonts, margins, padding, ect of each div and translated that into bootstrap.

Site 1.0 - We have the Technology

After moving all the old content to a folder, I started working on the new site by getting the names of the fonts, the sizes of margins and paddings, and colours of the sections through Google Chrome’s developer tool.

Also changing some things by request like moving the Social Media buttons, adding a platform link, and removing the bezel around the picture. As well as shrinking the top section while still keeping it prominent. Here is the before and after ( notice the cleaner organisation )

Get Involved Page
Before and After shot of the social media page

Another thing they wanted changed was the Get Involved section. It involved 3 types of media.

  1. Maggie’s Twitter Feed
  2. NationBuilder Links ( Where they order lawn signs, count votes, ect. )
  3. Maggie’s Social Media Links

That site was up for a bit on it’s own, until they needed a home for their platform.

Maggie’s Platform

Maggie’s platform consists of all her stances on many topics. Breaking it down there’s about 7 sections and 48 topics. Originally all of this information was in a WordPress. The platform was to be a part of their site and represent Maggie’s focal points. I made this page in Bootstrap 3 as well, with some JavaScript per page to enlarge the text div for the visually impaired.

$( "#enlarge" ).click(function() {
  size = $( "p" ).css( "font-size" );
  size = parseInt(size, 10);
  if(size == 30){
    $( "p" ).children().css( "font-size", "18px" );
    $( "p" ).css( "font-size", "18px" );
    $( "#enlarge-text" ).text("Enlarge Text");
  } else {
    $( "p" ).children().css( "font-size", "30px" );
    $( "p" ).css( "font-size", "30px" );
    $( "#enlarge-text" ).text("Normal Text");
  }
});

All this code is doing is select the enlarge button, then find the current font size, then check if it’s greater or less than 30, and finally set the paragraph tags fonts to that value and invert the button.

Before and After shot of the political platform
Before and After shot of the political platform

The platform all in all took about 4 hours to completely convert everything and maybe another 2 to develop the templates. You can find it here.

Visit the site final here

Maggie councilloring
Councillor-at-large

Maggie’s Wordpress

Later after the campaign was over Maggie requested a wordpress to host some of her ideas. I set up this simple site pretty quickly following a tutorial. I never used wordpress before that, but I’m pretty impressed with how simple and functional it is! You can find that here.