DC Feedback Boxes

30th October 2008 dennis Web [6] Comments Add your own

Most website today are interactive – transfer of information is not only one-way but two-way. User are interacting with content: adding, editing and deleting stuff. A common concept these websites (should) have is user feedback for interactive actions. This sort of user feedback is most of the times realized with different colored boxes somewhere near the content that is manipulated. We created some standard XHTML feedback boxes with some custom icons – if you like them, use them.

Download DC Feedback Boxes 1.0

In the following image you can see the included icons:

Usage

What? You need a How To? Okay. It's simple: Just include the CSS file in your HTML document and write the following:

<div class="feedback info">Some feedback information</div>

This would then display a blue information box. For a validation error box use:

<div class="feedback validation-error">
    <ul>
        <li>Some error in the form</li>
        <li>And another one</li>
    </ul>
</div>

You get the idea. The following classes are available for you to use:

• info
• success
• error
• warning
• validation-error

Included in the download is an example XHTML page with all feedback boxes, a CSS file, the icons in PNG format in three different sizes plus the Adobe Fireworks source files of the icons. If you have any questions or wishes or recommendation leave a comment. You can distribute, remix, tweak, and build upon the files.

DC Feedback Boxes are licensed under a Creative Commons Attribution 3.0 Unported License.

Comments

1 October 31, 2008 Buge

Excellent! These are very cool!
Thank you very much!

2 October 31, 2008 pesche

Especially you, are welcome!

3 June 10, 2009 Michael C.

You mentioned that the Fireworks source is included in the download, but I can’t find it… could you possibly double-check that? I’m wanting to add another box type, a “query” box, with a question mark icon.

Thanks for these!

4 June 24, 2009 dennis

Hi Michael

Yes, the file is in the zip and it is named: dc-feedback-boxes-1.0-icons-source.png
fireworks uses .png file endings, just open it in with fireworks and it should work

5 June 25, 2009 Michael C.

...you assume I have Fireworks. I’ve searched high and low, and the only way I’ve found to convert a layered Fireworks “PNG” (why do they have to use a common web graphics file format extension?) to something more widely supported (.PSD) is to save it as a Photoshop PSD from within Fireworks.

Could you possibly save it as a Photoshop PSD and include that in the archive? Pwease??

6 October 09, 2009 dennis

Sorry for taking so long to respond.
I did try to convert the fireworks file to .psd, but it didn’t work because of the firework specific effects I used to create the butttons. The same in Illustrator (Even in CS4, which I thought would be better in converting all of the adobe file formats).
I think the only way would be to recreate them in either Photoshop or preferably Illustrator. When I get around to do that I will tell you for sure.

Add Your Comment