By

FitPro 2.3 Released, Here are the New Features

We have just released the latest version of our fitness WordPress theme, FitPro. The new version (2.3) includes many improvements and bug fixes under the hood, but also some significant updates to existing features.

Thanks to our members who gave us feedback, many of the things you requested are in this release!
Read More

By

Editing a WordPress theme’s CSS using Firebug (Video)

Learn how to make changes to your WordPress theme CSS using Firebug, a free Firefox browser add-on.

This video is an intro to Firebug, it is to help beginners make changes to WordPress themes.

Read More

By

Make a CSS3 button with an arrow using Pseudo-elements

Today I was working on a client site, and I wanted to make a button that looked like this:

CSS3 button with arrow

It’s a pretty typical iTunes style button except for the little triangle.

Since the site was in WordPress, I needed a flexible solution that would work with different button sizes, widths, text, etc.

There are several possible solutions for this, but I thought the best/easiest one was to use the :after Pseudo-element combined with the content property. This allows you to magically insert content (such as an image) and style it without adding anything to your HTML.

Here’s the good stuff.

HTML Markup

1
<a class="button" href="#">Learn More</a>

Clean and simple. Here’s the default CSS for the button without the triangle (not so simple, oh well):

Button CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.button {
	display: block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 14px/100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	overflow: hidden;
	padding: .4em 1em .5em 1em;
	margin: 10px 0;
	background: #3b88d8;
	background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
	border-top: 1px solid #4081af;
	border-right: 1px solid #2e69a3;
	border-bottom: 1px solid #20559a;
	border-left: 1px solid #2e69a3;
	-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	color: #fff;
	text-shadow: 0 -1px 1px #3275bc;
	-webkit-background-clip: padding-box;
}

That gives you the blue button without the triangle. Here’s how we add the triangle with the :after Pseudo-element:

CSS for the triangle

1
2
3
4
5
6
7
.button:after {
        content: url(images/white-rt-triangle.png);
        width: 8px;
        height: 10px;
        float: right;
        margin: 1px 0 0 10px;
}

Pretty simple, you add the image with the content property, then you style it just like any other element. Boom! Triangle button domination.

The Whole Enchilada

Here’s the full CSS with :hover and :active states on the button:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 14px/100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	overflow: hidden;
	padding: .4em 1em .5em 1em;
	margin: 10px 0;
	background: #3b88d8;
	background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
	border-top: 1px solid #4081af;
	border-right: 1px solid #2e69a3;
	border-bottom: 1px solid #20559a;
	border-left: 1px solid #2e69a3;
	-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	color: #fff;
	text-shadow: 0 -1px 1px #3275bc;
	-webkit-background-clip: padding-box;
}
 
.button:hover {
	background: #2a81d7;
	background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
	border-top: 1px solid #2a73a6;
	border-right: 1px solid #165899;
	border-bottom: 1px solid #07428f;
	border-left: 1px solid #165899;
	-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
	-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
	cursor: pointer;
	text-shadow: 0 -1px 1px #1d62ab;
	-webkit-background-clip: padding-box;
}
 
.button:active {
	background: #3282d3;
	border: 1px solid #154c8c;
	border-bottom: 1px solid #0e408e;
	-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
	-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
	text-shadow: 0 -1px 1px #2361a4;
	-webkit-background-clip: padding-box;
}
 
.button:after {
        content: url(images/white-rt-triangle.png);
        width: 8px;
        height: 10px;
        float: right;
        margin: 1px 0 0 10px;
}

By

Create CSS Icons Using Pseudo-Classes and the Content Property

Displaying icons consistently across your website can be a mind-numbing task.

Using <img> tags is a terrible way to do it, and creating complex CSS with background images is a pain.

Enter the :before pseudo-class. The :before pseudo-class combined with the content property is great for displaying icons like this:

PDF Download
MP3 Download

Or like this:

Title With Icon

A Smaller Title With Icon

Pseudo-classes have been around since CSS1 way back in 1996. The great part about the :before class is that it is supported in all major browsers, IE included! (Just make sure you declare a !DOCTYPE or it won’t work in IE8.)

Getting Started

Step One

Get some icons and upload a few to your images folder. Between 22px and 32px square should work best, depending on your application.

Step Two

Create your html:

<a class="icon pdficon">PDF Download</a>

Using two different classes allows you to write less CSS if you are reusing this across your site.

Step Three

Add your CSS. We’ll apply the global styles using the .icon class, and display the image using the a.pdficon:before class.

You’ll notice the blue box included in the .icon code, you can ignore this if you want. The important part is in the a.pdficon:before styles.

.icon {
display: block;
padding: 5px 8px;
background: #e6effa;
border: 1px solid #bdd0e8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.icon:hover {
background: #f4f8fd;
}

a.pdficon:before {
content: url(images/pdf-22.png);
display: block;
float: left;
margin-right: 5px;
position: relative;
bottom: 2px;
}

That’s it! Just change the a.pdficon:before class to something else to display a different image. For example, the code for the MP3 download above is:

a.mp3icon:before {
content: url(images/itunes.png);
display: block;
float: left;
margin-right: 5px;
position: relative;
bottom: 2px;
}

Notice the relative positioning – this is not always necessary, it just depends on how your icon is lining up.

Titles with Icons

The titles are the same concept, just slightly different code. Here’s the HTML from the larger title above:

<h2 class="widgeticon">Title With Icon</h2>

Here’s the CSS:

h2.widgeticon:before {
content: url(images/help-32.png);
display: block;
float: left;
margin-right: 5px;
}

Now go get cracking!

By

Still No jQuery Accordion in WordPress 3.1?

Update: Just posted a ticket to core trac. Response was that new JavaScript libraries tend to only get included if they are used in WordPress core, which explains why it isn’t added (yet). I think that it should be considered though because of its usefulness, and tiny file size!

There seems to be a bit of a shake up in the jQuery UI files included with WordPress 3.1. Firstly there is a new UI version (1.8.7), rather than 1.7.3 which was included in WordPress 3.0.4.

Also, the jQuery core files have been broken out of the single ui.core.js file into four separate files: ui.core.js, ui.mouse.js, ui.position.js, ui.widget.js. This makes it a little clearer what core UI components are included with WordPress. You can see this more clearly in the screen shot below. The core files are outlined in red.

There are two new UI widgets available in jQuery, and one of these, the button widget, has made it into WordPress 3.1. The autocomplete didn’t make it in. This is not a surprise as this might not be required that much at the moment, but users may need this as more autocomplete examples pop-up around the web.

I am a little disappointed though at the lack of inclusion of the accordion widget which has been around for a while now, and is a very useful addition to your web pages. There may be a good reason for this, that I am not aware of, but at just 9 KB it is very small and could be included without anyone hardly even noticing!

I use a lot of jQuery accordions for theme/Plugin options pages and find it a hassle to have to add in the accordion widget manually. It is not really a big issue, but it’s conspicuous by its absence. Anyone else know why it is not shipped along with the other WordPress jQuery files? Let me know in the comments if you do.

Oh, and the datepicker widget would be nice too. However this is around 35 KB so might be seriously considered for now. Anyway, just imagine being able to pick the date from the nice jQuery datepicker rather than have to manually enter the date/time as you do now. 😉