Bluelime Media Vancouver Web Development » HTML/CSS

Add social bookmarking icons to your sidebar without using widgets

Christine — Thu, 19 Mar 2009 01:46:15 +0000

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:


Follow Us


Get our Feed


On Twitter

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:



Follow Us

/images/linkedin.png" alt="View our linked in profile" width="32" height="32" border="0" />
/images/twitter.png" alt="On Twitter" width="32" height="32" border="0">
/images/rss.png" alt="Via our RSS feed" width="32" height="32" border="0" />
/images/facebook.png" alt="On Facebook" width="32" height="32" border="0">

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

Christine — Sat, 24 Jan 2009 00:32:29 +0000

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('')
.after('');

to this:

.before('')
.after('');

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

Tzaddi — Tue, 26 Jun 2007 16:10:13 +0000

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?

Christine — Fri, 01 Jun 2007 22:33:49 +0000

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

,
,
, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the major browsers continued to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification, it became more and more difficult to create Websites where the content of HTML documents was clearly separated from the document’s presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) created STYLES. Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute.
So what’s the advantage?
Styles are normally saved in an external file which allows us to change the appearance and layout of all the pages in a Website, simply by editing one single document! This saves us loads of time which means money for our clients.
Style sheets also allow us to reduce the amount of HTML code which means smaller file size which load faster and better search engine ranking.
How is code reduced?
Let’s take the following example. Below is a screenshot of a typical navigation.
The old way of coding this nav bar using tables would be as follows:

`alt="home" border="0" /> onmouseout="image2.src='images/about.gif';">`

`onmouseout="image3.src='images/services.gif';">`
onmouseout="image5.src='images/news.gif';"> src="images/contact.gif" alt="contact" border="0" />

Using css the same navigation is reduced to these few lines:

`home`

`about`

`services`

`portfolio`

`news`

`contact`

If you’re not convinced that the result is the same, take a look at the example in action or download the files.

How is search engine ranking improved?
Search engine spiders see the same thing we do, words. Open any browser window, click on View and Source (IE) or Page Source (Firefox) and take a look at the code. A Search engine friendly site should be easy to read. If your website is full of code which doesn’t mean much to you, chances are it won’t mean anything to search engine spiders either.

Creating customized error messages

Christine — Fri, 20 Apr 2007 02:34:27 +0000

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.