Looking to add a little something extra to your WordPress site? This might be just the thing!

You can use my CSS styles to add fancy boxes to your blog posts or pages for alerts, comments and even downloads.

Like this:

This is the alert box.

This is the comment box.

This is the download box.

Install

Step One: Download the images below and upload them to your current theme folder.
wp-content/themes/YOUR-THEME/{here}

Step Two: Download the Fancy CSS Boxes code below. Login to your WordPess admin and goto presentation/theme editor/your current theme/stylesheet

Step Three: Add the new CSS rules at the bottom of the style.css file and save.

You are now ready to use your new Fancy CSS boxes where you would like.

STCFX Fancy CSS Boxes (ICONS)

STCFX Fancy CSS Boxes (CODE)

Usage

To use your new styles simple put your text between the following:
NOTE: To add the style tags you must switch over to code view.

<p class=”stcfx-alert”>Alert text right here.</p>
<p class=”stcfx-comment”>Comment text right here.</p>
<p class=”stcfx-download”>Download text right here.</p>

FAQ

Q: My icons are not showing up, whats wrong?
A: Be sure you have uploaded the icons to your current wp theme folder. wp-content/themes/YOUR-THEME/icons right here.

Q: My icons are in the right place but they are still not showing up, whats wrong?
A: Icons must be chmod to 755.

Compatibility

Firefox 2.0
IE 7.0

Web 2.0 Heart : FREE Layered PSD Download

Web 2.0 Heart Free PSD Download

Web 2.0 designing is very much about color. I have did a bit of leg work for you and rounded up a great collection of all the hottest web 2.0 colors.

If you need a specific color or know of one that would make a great addition to our list, simply post below.

WordPress Dark Blue - #14568A

WordPress Light Blue - #83b4da

Flickr Blue - #0063dc

Flickr Pink - #FF0084

Yahoo Red - #FF0032

MSN Red - #E95B30

MSN Blue - #0A8FD0

MSN Green - #00A554

MSN Yellow - #FCCA25

MySpace Dark Blue - #003399

MySpace Light Blue - #6698CB

Technorati Green - #4EBE00

YouTube Red - #FF3333

Design Name: BlogOn
ID: 079

Sleek web 2.0 design, fully coded and ready for your content. Layered and sliced PSD is included to allow for customizing the design and making it more your own.

Included:

• Layered & Sliced PSD
• Coded HTML
• Custom CSS Style Sheet
• Images

License: Footer link MUST stay.

STCFX Web 2.0 - BlogOn - 079 - Download

* Please do not link directly to the download. 

FREE Web 2.0 Badge PSD Download

Web 2.0 Badge Free PSD Download

FREE PSD Download Glass Bars

Web 2.0 Glass Bars Free PSD Download

FREE PSD Download Web 2.0 Comment Bubble

Download Includes:

Layered PSD
PNG
GIF

Web 2.0 Comment Bubble Download

Scripting with Balance in Design and Performance by Dejan Bosanac — Java SE 6 introduces a new framework for integrating with scripting languages. But what’s the right way to mix these languages with Java? Dejan Bosanac, author of Scripting in Java, looks at how an interface-driven approach allows you to maintain good design as you combine languages.

Scalable Vector Graphics, or SVG, is an open source computer language that
can be used to create and describe two dimensional images for presentation
on a website. SVG was developed by the W3C (World Wide Web Consortium) and
is based upon XML. An SVG is a basic text file which can be easily edited
using a simple text editor such as Notepad. Scalable Vector Graphics can be
used to create both animated and static images. The standard file extension
of an SVG is .svg while the MIME-typen would be image-name/svg+xml.

There are several advantages to be gained by using SVG to render your
website images:

Visitors are able to zoom in on the image without it becoming distorted,
blurred or pixilated, which is a common problem with other graphics formats.

Hyperlinks can be inserted into the image with the use of XLinks (Extended
links).

In addition, since the file can be edited so easily it is a simple process
to make any desired changes either in the appearance of the graphic or the
hyperlinks attached to it.

Most browsers are able to display images created with SVG, however, Internet
Explorer does require a plug in.

Here is an example of a Scalable Vector Graphic file:

<?xml version=”1.0″?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

<svg xmlns=”http://www.w3.org/2000/svg”
width=”467″ height=”462″>
<rect x=”80″ y=”60″ width=”250″ height=”250″ rx=”20″
style=”fill:#ff0000; stroke:#000000;stroke-width
:2px;” />

<rect x=”140″ y=”120″ width=”250″ height=”250″ rx=”40″
style=”fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;” />
</svg>

Here is an example of an XLink:

<?xml version=”1.0″?>
<document xmlns=”http://example.com/xmlns/document”

xmlns:xlink=”http://www.w3.org/1999/xlink”>
<heading id=”examplestyle”>Your Document Name</heading>
<para>The <anchor xlink:type=”simple” xlink:href=”#someHeading”>Anchor
Link</anchor>

description.</para>
</document>

I’m sure you may have heard webmasters and designers talk time and again about SVG, this has likely left you wondering just exactly what is SVG anyways?

What is SVG? Scalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control.

With this powerful new technology, SVG developers can create a new generation of Web applications based on data-driven, interactive, and personalized graphics.

Ref: http://www.adobe.com/svg/overview/svg.html

Why use SVG? The SVG format is emerging through the cooperative efforts of the World Wide Web Consortium (W3C) and its members. Adobe has taken a leadership role in the SVG specification and is working to ensure that its world-class authoring tools, beginning with Adobe® Illustrator® and Adobe GoLive®, are SVG compatible.

Use existing skills

To Web developers, SVG will look and feel very familiar, thanks to its roots in XML. SVG is text based; therefore, coding techniques can be learned by leveraging the work (or code) of others. This drastically reduces the overall learning curve.

The JavaScript language and Document Object Model (DOM) will be very familiar to people who use DHTML. Developers who use JSP, PHP, and ASP for HTML or text content today will now be able to create graphics in much the same way.

Adobe tools support

Adobe is committed to supporting SVG in its products ? so why not use the tools that you know and love to generate SVG? Adobe Illustrator generates SVG graphics. Even rollovers and interactive menus are easily created through Illustrator’s Interactivity palette.

Adobe GoLive supports the placement of SVG files, creation of alternate pages, and editing of SVG source code.

Compatibility

SVG is text based and works seamlessly with current Web technologies like HTML, GIF, JPEG, PNG, SMIL, ASP, JSP, and JavaScript.

Quality

Graphics created in SVG can be scaled without loss of quality across various platforms and devices. SVG can be used on the Web, in print and even on portable devices while retaining full quality.

Ref: http://www.adobe.com/svg/overview/whyuse.html