css

Iconize Your TextLinks Via CSS

I came across this nifty CSS trick today on Pooliestudios.com that adds an icon to the end of a link to let you know what sort of link it represents. For instance, if you link to a PDF file, a small adobe PDF icon will appear at the end of the link. Or, lets say you link to a .TXT file. A small TXT icon appears at the end of the link.

Icons At The End Of Links

According to the directions you’re supposed to:

Download the .zip file, upload the CSS and the icons to your webspace and integrate the CSS in your Website, Blog or whatever. Done. You can easily replace the icons or add more extensions and sites. Enjoy!

If adding icons to the end of links would help YOU out in terms of reading this blog, let me know and I’ll be glad to implement this into the site.

15 Free Pro Horizontal CSS Menus

CSSplay has put together a list of 15 professional looking horizontal based CSS menus. The menus use the sliding door technique so that each menu item will fit the associated text. The menus use professional grade graphics and since they use CSS, it wouldn’t be hard for you to customize these menus for your own needs. Here are a few samples.

Menu 1

Menu3

Menu 4

Check out the entire list of 15 which are free for download. When your finished, come back and let us know which one was your favorite.

This Site Undergoes Design Tweaks

This weekend, I decided to get a different perspective on my blog by sitting other people down in front of my website to observe how they browse around and which areas of the site they click. Upon initial feedback, I was told that the top part of my site seemed a bit busy. I was told that it would be nice if a reader had the ability to click on a button that would either maximize or minimize the three content blocks near the top of the site.

The three content blocks in question are the Recent Articles, Recent Comments and the Most Popular Posts. After browsing around the WordPress.org site looking for solutions, I came across a post that mentioned the following plugin, JS Toggle Boxes Js Toggle Boxes provided a means for me to add a plus symbol or a minus symbol to a div element that contained an unordered list. Using a combination of Javascript, CSS and cookies, readers of this site can now show or hide at least 6 different content blocks. Show Or Hide Content By Clicking On This Icon

I’ve also rearranged my sidebar menus so that site specific content is in the left sidebar while, 3rd party widgets and misc stuff is in the right sidebar. I’ve also replaced the default technorati favorite image and added a custom one within the same box which contains my subscription images. I’ve also changed the entire background site to represent one solid color, as the gradient background image combined with a background color just never seemed to work in Internet Explorer. Surrounding the entire site is now a white 3 pixel border. The black one was not viewable with the darker background color.

Although the div elements never bothered me, you now have a choice as to whether or not you want to view those specific content areas or not. They work whether you have Javascript enabled or disabled. Also, because of the use of cookies, your viewing settings will be remembered unless the cookie is deleted, in which case all of the content boxes will be open again.

Please let me know what you think of the design changes.

YAML – Web Based Visual Site Builder

Yaml.com Site Builder LogoI always envisioned a day where web site designs were considered puzzle pieces. Those days look like they have arrived.

YAML Builder stands for (Yet Another MultiColumn Layout) builder. This online design builder gives users the oppurtunity to create an awesome design without ever having to touch the code. The small control panel gives you the oppurtunity to choose between different Doctype standards, base elements for the site, number of columns the site should have, CSS management, the ability to add elements such as H1, H2 or Paragraph, different column sets and different content boxes.

Yaml Builder Control Panel

At the end of the day, you can click on the GET CODE button and YAML generates all of the code you would need in order to place the design onto your site. It also gives you the oppurtunity to fine tune the code, in case you wanted to do something a bit more extravagant.

I’ve been waiting for the day when designing websites would be this easy. I’m happy to say, those days are here. If you happen to create a design using YAML Builder, or another similar service, by all means leave a comment with a link so that we can take a look at the design to see what these builders are capable of.