Archive for the 'HTML/CSS' Category
Add social bookmarking icons to your sidebar without using widgets
As social bookmarking sites such as Twitter, Facebook and Linked in become more and more popular, these days, I find myself being asked to make adjustments to several WordPress websites by adding social bookmarking links and icons to the sidebar. After 2 such web updates this week, I was asked by a friend to send me the code so that they could add it to their site. So instead of doing the work and sending it to him, I thought I would share it with you all.
The following examples are just code snippets that you can add to your sidebar.php template file. These snippets will not work if your website use sidebar widgets. (That’s not exactly true, but it’s a bit more complicated.)
The first example is very simple and can be seen live on the kitsilano.ca website.
First you’ll need to edit your sidebar.php template and add the following lines of code:
<h2>Follow Us</h2>
<ul>
<li class="rss"><a href="[insert your rss link here]">Get our Feed</a></li>
<li class="twitter"><a href="[insert your twitter link here]">On Twitter</a></li>
</ul>
Next you can adjust the styling by adding this piece of code to your style.css
#sidebar li.rss {background:url(images/rss.gif) 0 50% no-repeat;}
#sidebar li.twitter {background:url(images/twitter.gif) 0 50% no-repeat;}
#sidebar li.rss a, #sidebar li.twitter a {padding-left:20px;}
The icons will also have to be uploaded in your templates’ images folder. You can use your own icons or grab the ones that I’ve used by downloading the zip file.
The second example may look a bit more complex, but is just as easy and can be seen on the mudcreative.com sidebar.
First insert these lines of code in your sidebar.php:
<div id="social_media">
<h2>Follow Us</h2>
<ul>
<li><a href="[insert your link to linked in here]"><img src="<?php bloginfo('template_directory'); ?>/images/linkedin.png" alt="View our linked in profile" width="32" height="32" border="0" /></a></li>
<li><a href="[insert your link to twitter here]"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="On Twitter" width="32" height="32" border="0"></a></li>
<li><a href="[insert your link to rss feed here]"><img src="<?php bloginfo('template_directory'); ?>/images/rss.png" alt="Via our RSS feed" width="32" height="32" border="0" /></a></li>
<li><a href="[insert your link to facebook here]"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="On Facebook" width="32" height="32" border="0"></a></li>
</ul>
</div>
Next, add the following to your style.css
#social_media {
width:200px;
background:#F2F7F7;
border:1px solid #ACD0D1;
padding: 0 0 5px 0; margin-bottom:10px;
}
#social_media ul {list-style-type:none; margin:0 0 0 6px; padding:0;}
#social_media ul li {display:inline; padding: 0 6px 0 0;}
Depending on what your stylesheet already contains, you may need to make a few tweaks, but it should be pretty straightforward. Here is zip file with the code snippets and icons. Have fun.
Better Coda Slider with image rollover
In my last post I talked about using the “Better Coda Slider” created by Remy to create the testimonial slide show on the Enhance Dental Centre. While working on this, I ran into a problem. Instead of using a single image when moving from image to image, I wanted to use a rollover image. I looked at the thread of comments on Remy’s blog post and noticed that I was not alone in wanting this and that no one had offered a solution.
Possibly because of my stubbornness I tried all sorts of CSS tricks and hacks and couldn’t get the damn rollovers to work. In the end, the solution was pretty obvious, in fact a bit embarrassing.
I asked Ben to look at my code and in my coda-slider.js file, he simply changed
.before('<img class="scrollButtons left" src="/images/left.gif" alt="" />')
.after('<img class="scrollButtons right" src="/images/right.gif" alt="" />');
to this:
.before('<img class="scrollButtons left" onmouseover="this.src=\'images/left_hover.gif\'" onmouseout="this.src=\'images/left.gif\'" src="images/left.gif" alt="" />')
.after('<img class="scrollButtons right" onmouseover="this.src=\'images/right_hover.gif\'" onmouseout="this.src=\'images/right.gif\'" src="images/right.gif" alt="" />');
Doh! I was trying so hard to do my rollovers with css, that I forgot the “old school” way of doing this.
In case anybody is interested in re-creating this example, here are the files are zipped up for you to play with.
Highlights from An Event Apart Seattle
One of the things I love about being a web designer is that there is always more to learn, be it from other web specialists or your clients. Last week at An Event Apart Seattle Christine and I had the chance to learn from some true experts. The speakers were not only masters in their fields, but engaging and generous with their knowledge.
Here are some highlights:
- Watching Eric Meyer write CSS (you know you’re a geek when…)
- Jeffrey Zeldman’s talk on “Writing the User Interface” confirmed my experience: the words in a web design matter much more than you might think and can really make a difference in how visitors use your site. So long as it invites clicking, it matters more what a button says than what it looks like.
- Peaking into other designer’s processes, from beautiful sketchbooks to user research.
- I enjoyed Jeff Veen’s succinct message which shows the benefits of doing your design research up front vs. the cost of changing your mind partway through the build. He also discussed why web design is so much more complex now than it was in the early days of the web, when everyone using the web were of the same type (geeks).
- Shawn Henry shared insights for ensuring your site is accessible to varying abilities; from folks who read the web with braille or speech readers to limited vision users — who magnify screens to an amazing degree, but want the same site that was designed for regularly sighted users. Bottom line: there is no substitute for engaging disabled users in the design process if you want to build truly accessible sites. Her book on accessibility is free online.
- Andy Budd shared how a delightful user experience is worth more than the sum of it’s parts in the loyalty that can create.
Why should you care if your website is built with tables or CSS?
Yesterday, I was invited to have lunch at Twin Fish Creative’s monthly staff get together. Since, I’ve been doing a lot of work with them, I thought I would take the opportunity to explain what I do to their Photoshop files and more specifically how CSS is used.
What’s this CSS?
HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
Creating customized error messages
There is nothing more frustrating then getting to a page which no longer exists and getting the dreadful plain looking 404 error page with no explanation of what just happened. These pages can be made much more informative with simple HTML. If you take a look at the following links to pages that are broken you will notice that we’ve made them a bit friendlier:
The folks at the BBC display the 404 error message, but at least they have added some additional information giving you options as what to do next which is not the case over at crap.com.
Of course you can also use humour to display your error messages. Kate discovered this great message when she broke her Twitter.
I think that your website users would appreciate your effort.
HTML guide to blogging using Wordpress
Worpdress makes it pretty easy for someone to post messages, create categories and manage comments and blogroll without knowing any HTML. Having said that, a basic knowledge of HTML can be quite useful.
April 5th is CSS Naked Day!
If you happen to stumble upon our blog on Arpil 5th, you may notice that the site doesn’t look quite right. That’s because we’ve turned off our CSS for the day.
Css refers to the “Cascading Style Sheet“. This CSS file contains all the information about the presentation of our blog. Colours, font size, font types, width of columns, etc… It’s all in there. By turning off the css we’re showing you our “body”. Yes its a bit goofy, but the idea behind this is to promote Web Standards. This includes proper use of (x)html, semantic markup, a good hierarchy structure. In other words, withouth the css, you should still be able to figure out the site and navigate through it.
Don’t worry, the site will be pretty on the 6th.