Hacking Weebly: PowWeb's Drag & Drop Builder

Background

• What led to the Weebly hack-a-thon?
  
  I'm a big fan of PowWeb because of their unlimited bandwidth and storage plan which doesn't leave me guessing. Also the simplicity of additional software installation (powered by SimpleScripts) puts even the biggest Software-As-A-Service (SAAS) players in the market to shame.
  When I was charged with hosting a website on PowWeb, I decided to give their wheel-of-fortune a big'ol whirl. In the beginning these were my top choices to try and build a website:
  

  • Joomla
  • Drupal
  • ocPortal
  • Xoops

  With all four technologies at my disposal. I used each and every one of them with the goal of piecing together a simple & attractive website. This was a huge failure on so many levels with each and every one of them and a four hour time sink into each technology that left me quite sad. In the end I bit the bullet and succumbed using Weebly Drag & Drop Builder.
  
• What had kept me from using Weebly in the first place?
  
  • Popups that kept asking me to pay-up for any drag & drop component that was even remotely useful for building a meaningful website. For example: being able to embed a simple video.
  • I thought that any of the free and fully-featured Content Management Systems (CMS) available on PowWeb would easily beat anything Weebly had to offer. This was not true.
• What keeps my love & "ughhh" relationship with Weebly going?
  
  • Love: The have a lot of great looking templates to offer. Really really nice stuff in my opinion when one is stating from scratch and couldn't even color inside the lines in a picture book with crayons to save one's life.
  • Ughhh: Only very few of the templates follow the basic-design principles like:
    
    • Provide a way for the user to clearly & qucikly distinguish which page they are on.
      • Most of the templates had tab bars to navigate through the website but after clicking their was no indication of what was selected. There was no change in the text font, no change in the background color of the selected/clicked item of the navigation bar and there are no breadcrumbs anywhere.
    • Do not force the user to scroll vertically.
      • If there might not be any content that takes up the space, then what's the point of enforcing a fixed-height or min-height template?
    • Don't add banner images/placeholders that cause unnecessary scrolling.
      • I could not understand why the templates wouldn't allow the banner placeholders to be removed or resize them if a thinner banner image was provided.
  • Ughhh: A prototype website cannot be built with the palm-open and finger-twiching-for-cash like-a-bellboy approach that their pop-ups have going.
  • Love: Someone in the Weebly camp understood that it takes time for any developer to truly get behind a technology via trial & error PLUS convince all vested parties that it is worth forking over cash for ... so they threw in the "Custom HTML" widget in the free goodies bag. This allows hackers to put together a presentable website and then perhaps if their is value in everyone being able to edit the content easily, you take away the hacks, pay for the service, and use the simple drag & drop components that allow anyone to jump in and make edits without having the web-dev know how.

Lets Hack!

• How can images be replaced if the Weebly template does not allow it?
  
  • Publish the Weebly website as-is and use the "View Source" option in your browser.
  • Search for the image in the source and if it is directly embedded in the html, then you can jot down the "id" of the "img" element and change the "src" attribute via a javascript call placed in the "Custom HTML" element. You'll have to add it to your pages in the Weebly editor.
  • If instead of the image, their is a placeholder element like a "div" in the html then jot down the "id" of that "div" element as it is probably being styled via one of the Weebly template's CSS files. Once you locate the CSS responsible, you will know which parts you want to override yourself via javascript and a "Custom HTML" widget in the Weebly editor. Here's an example:
    

• How can expandable/collapsible (+/-) areas be added?
  
  • Add a "Custom HTML" widget to your page in the Weebly Editor. Add the following to load the jQuery javascript library without conflicting with other libraries like Prototype which the Weebly template may already be loading on its own:
    

  • Place a div around the toggle-able section, give it an id, and hide it by default. Then use jQuery to show/hide the content when the user clicks on a button or text that you provide as the control.
    

    Click me to control show/hide.
    The div wrapped content will be shown/hidden at your whim.