Howdy! I have a spiffy new author website, and you can see it at www.cStuartHardwick.com.
Yeah, I know, that’s the same place the old site was. I just pointed my domain to the new goods–but that’s not what this blog is about.
I’ve worked in IT long enough that the luster is long since off the wires and lights, the gadgets and whirly-gigs; I just want to get my work done. And I should no more need to understand C# or HTML to do it than a carpenter should have to understand the two-phase, double-insulated motor in his table saw. I’ve developed many a website and many another application in more technologies and tools than I’m going to be bothered to enumerate here before your quickly glazing eyes–and folks, let me tell you, I’m over it.
The modern trend toward cloud-based, wizard-based tools is good. Custom code? Not so much. Putting aside special-focus sites like Facebook and Youtube, creating websites to suit our needs is now as accessible as typing a letter (okay, formatting an elaborate presentation). Blogging sites like WordPress and Blogger allow you to create pages that you can use to create simple static display sites, and for most of us, give us everything we need in a personal website for free. If you need or want a little more, tools like Weebly, Joomla, Wix, and Squarespace make web design almost as simple as grooming the dog, with less fur.
Skip ahead a bit brother….
I chose Weebly. For me, it strikes the right balance between wizardly ease and customizeability, and by giving me a great deal of control over a relatively small set of slick and attractive templates, it lets me get on with it in a manageable, economical platform. I had my new site built in an hour, and spent an afternoon working on tweaks. Each of those was simple and satisfactory, and I’m delihted with the final product. So if you are considering Weebly, here are a few observations and tricks:
The Domain Game
With Weebly, you must pay if you want to use your own domain. Otherwise, your site will be accessed at aSubdomainOfYourChoosing.Weebly.com. This is not true of Blogger with supports domain forwarding for free, but it is true of many sites including most aimed at web site construction. Decide now whether it’s a deal killer. There’s really no way around it.
Control
With Weebly (and any tool remotely like it) you are giving up some control. For example, I’ve yet to figure a way to set alternate text strings for some photos uploaded to customize the templates and that’s something that can adversely affect search engine rankings if that’s something you worry about.
Making changes
Weebly gives you access to its HTML page templates, its uploaded file resources, and its relatively simply, self-documenting, and well-oranized CCS stylesheet data. Playing with these is far less daunting the updating a WordPress or Blogger template, and might even be a good place to learn basic HTML and CSS.
Before making any of these changes, be sure you understand how Weebly’s preview and publish features work. You’ll want to take care not to push broken changes to your site. If in doubt, keep back up copies.
How to turn off the header: Many of the Weebly templates have a big bold title line at the top of the screen. For my purposes, I found this redundant and a waste of vertical screen real estate, so here’s how I turned it off:
- Go to the “Design” page, and click “Edit HTML / CSS”
- Under “Page layouts”, select any layout. It doesn’t matter which, because you’re going to make the same change to them all.
- Search for “logo-wrap” and wrap this whole block in xml comments ( <!– –>) making sure to delete any other comments that might get in the way–so it looks something like this:<!–div id=”logo-wrap”>
<div class=”container”>
<table id=”header”>
<tr>
<td id=”logo”>{logo}</td>
<td id=”header-right”>
<table>
<tr>
<td class=”search”>{search}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div–><!– end logo-wrap → - That’s it. Make sure it works as expected, then repeat for all page layouts. If you DO know a little html, you could also just remove the “{logo}” line and insert your own markup here.
How to turn off or replace the footer: If you pay for your Weebly site, you can add a simple footer. If you don’t, you are stuck with a big, garish ad for Weebly itself, but it’s easy to replace this with something more tasteful:
- Go to the “Design” page, and click “Edit HTML / CSS”
- Under “Page layouts”, select any layout. It doesn’t matter which, because once you have it the way you want it, you are going to make the same change to them all.
- Search for “Footer”. By default, the footer looks something like this:<div id=”footer-wrap”>
<div class=”container”><div>{footer}</div><!– end container –>
</div><!– end footer-wrap –> - Weebly substitutes it’s generated footer for the keyword in curly brackets. To suppress and replace this, replace the footer markup with something like this:
<div id=”footer-wrap”>
<div class=”container”>Powered by <a href=”http://www.weebly.com”>Weebly</a> | © 2014 C Stuart Hardwick |
<a href=”http://cStuartHardwick.wordpress.com/contact”>Contact</a></div>
<div style=”visibility:hidden”>{footer}</div><!– end container –>
</div><!– end footer-wrap –> - Setting the style to “hidden” suppresses Weebly’s default footer. I inserted in its stead, a simple text footer, a link to my contact page, and a sensible acknowledgment with a link to Weebly’s home page. Note that my site no longer has the Weebly link because I’m a paying customer. That’s how Weebly pays it’s bills. Suppressing the footer on a free site without replacing it is, in my opinion, stealing.
- That’s it. Make sure it works as expected, then repeat for all page layouts.
How to make the favicon work properly: The favicon is the little 16 x 16 pixel graphic on the each website tab in your browser. If you pay for your Weebly site, you can easily upload a favicon on the “Settings” page, “General” tab, however it may not work right. You can exploit a little trick to set the favicon on a free Weebly site, and it turns out it’s the better option even on a paid-for site.
The favicon should normally have a transparent background, and must be in .png or .ico format. I already have one that I have used on earlier incarnations of my site, but no matter which format I used, Weebly displayed it on a white background. My solution, use this hack:
- Go to the “Design” page, and click “Edit TML / CSS”
- Under “Files” click “Add to File(s)”
- Upload your icon file. I used “favicon.ico”
- Now, you’ll need to know the URL to this icon file. Normally, you would just click on it in the file list, then right click where the image is displayed to the right and copy the image URL to the clipboard. It seems this doesn’t work for .ico files (I didn’t try the .png version) but there is a simple workaround: Simply click on any other image file, right-click and copy it’s URL to he clipboard, paste it somewere, and change the filename (to favicon.ico in my case).\
- Now, click Settings, SEO, and enter the following code in the header field:
<link rel=”shortcut icon” href=”files/theme/favicon.ico”/> - Anything you paste into this field becomes part of the page header for every page on your site. Click the “Save” button, publish the site, and it will now display in browsers with the favicon–with its transparent background.
How to repurpose the social icons: Weebly offers an elegant, well-designed icon strip for linking to your favorite social media sites, and setting it up is simple–as long as you use the right sites. But what if, say, you never plan to link to Vimeo, but you’d like to use Reddit instead? This is really just a matter of modifying the icon graphic used by the template, and it’s not as hard as you might think.
- First you’ll have to figure out which image file is used. You can do this by looking through your page templates or using “view source” among other things. For my site, it’s “social-blue.png”.
- Go to the “Design” page, and click “Edit TML / CSS”
- Under “Files,” right-click to download the icon .png file.
- Using any graphic editor that supports transparent backgrounds and saving in .png format. I use the free online tool Pixlr.
- Carefully blot out the images from the colume of icons you plan to modify and replace it with your own. This can be the hard part depending on your artistic skill, but you can usually find a favicon for any social site in .png format with a transparent background, and that makes it a lot easier.
- Try not to tamper with the background or icon edges, as these will be highly visibl in the
finished site. - In your Weebly editor “Design” page, under “Edit TML / CSS”– “File(s)”, choose “Add new file(s) and upload the modified icon graphic. MAKE SURE TO BACK UP THE ORIGINAL!
- That’s it. Assuming you did the editing well, you’re done!
