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
- 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.
- Provide a way for the user to clearly & qucikly distinguish which page they are on.
- 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.
- 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:
Two ways to do so:
ReplyDelete1) You can drag & drop a "custom html" element/widget on to your page and paste the script in there. This works out fine but if you have 6 pages then you have to repeat the same thing in all 6 pages!!!
2) Instead you can append the script in either the header or the footer textareas provided for SEO optimization in the "Settings", that works well and only needs to maintained in one place. Header textarea might work better than footer.
Really hoping you still check here :p. So I've tried to use this script, and used both methods of placing the first block of code into the header under settings, and I've tried it in widget form. I also copy/pasted the second block of code into another widget, changing the text of "Click me to control show/hide." and "The div wrapped content will be shown/hidden at your whim." to match my needs. The widget shows as being there, with the inputted text hidden, but clicking it does nothing. Is there something I'm missing? I'm an utter newbie at this, so there's a big chance I skipped something important. Please help!
ReplyDeleteI want to help but it's been so long and my lazy brain doesn't remember!
ReplyDelete