CSS Summit Goodie Bag

I’m attending the CSS Summit today and have been introduced to some interesting and useful information about web design, typography and nifty tricks and tips using CSS, particularly the enhancements in CSS3.

While I can’t share the Powerpoints with everyone (they charged for the summit, and I don’t have permission to redistribute the materials), I would like to share some links to resources and information that should help with your web design work. If you’re tweaking your WordPress theme CSS or building a brand new theme/child theme, you might want to play around with these tools.

First, the CSS Summit itself: http://environmentsforhumans.com/2010/css-summit/
This site includes links to each presenter’s website/blog. Some may put their presentations on their blogs (for example, Zoe Gillenwater has already).

CSS 3 Tools

http://CSS3generator.com
all kinds of CSS3 generators including RGBA

http://borderradius.com
play with borderradius settings and get CSS code

http://westciv.com/tools/box-properties/index.html
More powerful tool allowing you to generate CSS3 text and box styling; also see site for  gradients, transforms, multiple columns

http://http://gradients.glrzad.com/
CSS3 gradients and buttons

http://css3please.com/
another (odd) CSS3 generator

http://fontsquirrel.com
free web font kits to use with @font-face

http://www.w3viewer.com/
click on letters to read W3C documents/tutorials/reference material

iPhone

http://protofluid.com
website to test CSS on mobile devices

To target iphone in CSS:

@media screen and (max-device-width: 480px){
/* iPhone CSS here */
}

CSS Animations

(Transforms and Transitions… warning, not all supported in all browsers, including Firefox!)

http://developer.apple.com/safari/library/navigation/

http://developer.apple.com/safaridemos/
http://dev.opera.com/articles/view/css3-transitionsand-2d-transforms/
https://developer.mozilla.org/en/CSS/CSS_transitions

Some articles/CSS 3 tutorials:

http://www.devarticles.com/c/a/Web-Style-Sheets/Controlling-Overall-Transparency-of-an-HTML-Element-with-the-RGBA-CSS3-Property/

http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/

http://www.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/

http://www.smashingmagazine.com/2010/05/06/modern-css-layouts-part-2-the-essential-techniques/

I hope these links are helpful. If you know of others, this would be a great place to share what you’ve come across!

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

WPEngine launched – WordPress hosting

Cullen Wilson, Jason Cohen and Aaron Brazell have launched WPEngine this week. Hosting WordPress sites to the point where you just worry about themes, plugins & content – they take care of the rest of it.

WPEngine’s sponsored the WordPress Austin meetups & we’re proud to see them open for business.

Cheers!

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Child Themes

I get asked more and more, “What is a child theme?” Even though child themes have been in existence for a few years, they’re still not something the average WordPress user understands, but that’s changing and the topic is at the forefront of people’s minds when they’re thinking about their site’s design. WordPress users want to know if they should use a child theme instead of their existing theme, be it custom or prebuilt.

First, what is a child theme. A WordPress child theme is a theme that relies on another theme being installed. A child theme can’t stand on its own. At the simplest, the child theme is just a style.css file with an extra commented line. That’s it.

Using the Twenty Ten theme, let’s look at the comment block at the top of that theme’s style.css:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/

For a child theme, we’ll create a css file called style.css. We have to place a comment block at the top of the file in order for WordPress to recognize it as a theme – with one extra line that begins with “Template”:


/*
Theme Name: My Awesomest Theme
Theme URI: http://123.com/
Description: Uber-awesomeness incarnate.
Author: Me
Version: 1.0a
Tags: optional
Template: twentyten
*/

That extra line “Template:” is what makes this a child theme. It has the directory name of the theme you want as a parent. In this case, Twenty Ten is going to be our parent theme. Its directory is named twentyten, so that’s the name we use in the Template line. If we activated My Awesomest Theme in the Appearance panel, (Remember, we only have the CSS file as our child theme – nothing else.) WordPress will use Twenty Ten’s templates for the site’s framework, but it will look to My Awesomest Theme for the CSS.

Inheriting the parent theme’s CSS

Say you want to use the parent’s CSS. Maybe you like 99% of it & you’re just going to override a few parts of it. Using the @import statement, you can import the parent theme’s styles and then add your own declarations below it. Browsers read CSS in a specific order (this is the Cascade part of Cascading Style Sheets) so it makes it easy to override specific styles while keeping the rest.

Below your comment block, add this line:
@import url(../twentyten/style.css);

Your child theme will now look just like Twenty Ten. All of Twenty Ten’s styles in style.css get imported to your theme. In Twenty Ten, this is the basic declaration for H1 through H6:

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
clear: both;
}

In our child theme style.css, under the @import line, add this line:

h2 { font-weight:800;color:red;}

Save your changes and we’ve now made heading 2′s bold and red. Everything else stays according to Twenty Ten’s styles.

What about customizing template files?

What if you wanted to make structural changes to say, the header.php file? How would you do this in a child theme? It’s really simple. Copy the header.php file from the parent theme to your child theme’s directory and make your edits. WordPress will use your child theme’s header.php in place of the one in the parent theme.

That’s all there is to it.

Why use a child theme?

One very basic reason makes child themes beneficial: You can upgrade your parent theme without losing your design. A good child theme can persist through several WordPress upgrades. As a time-saver, this is pretty awesome. If you use Twenty Ten as a parent theme, there will be upgrades for Twenty Ten released. Version 1.1 just came out, in fact. Using a child theme on top of Twenty Ten, you in essence inherit those upgrades without having to redo your theme. Of course, the caveat exists that if you’re replacing template files, it’s on you to make sure your template files are up to date with released upgrades. That being the case, you’re still saving time and effort with a child theme as there are fewer files to go through than in a whole theme.

Another benefit of using child themes is for designers. Designers don’t have to build out a whole theme. They can create just a CSS file or a CSS file and the necessary templates.

Child themes present some serious advantages and they’re not that complicated to create. Give them a try.

More on child themes:

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Best Practices on using WordPress and Step-by-Step on Themes

photoThe Austin WordPress Meetup Group

Did everyone get upgraded to WordPress 3.0? For August, we’re returning to our dual-track format – those new to WordPress and those more advanced.

In the Beginner Track, we’re going to go through Best Practices in using WordPress. How do I take WordPress and the idea I have for my website and bring the two into sync? We’ll go through Posts, Pages, attachments, categories, tags – the differences and similarities between all of them. When to use a Page instead of a Post & vice-versa. How they help you optimize your site so it’s effective.

In the advanced side of things, we’re covering the Meetup Idea of Building a WordPress Theme. We’ll be going into the code on this one – there’s just no other way to create a working theme without seeing, understanding and writing code. The idea is to quickly go through the necessary and common files we’d need to make a Blog theme in WordPress.

Hope to see everyone here!

Austin, TX 78757 – USA

Tuesday, August 3 at 7:00 PM

Attending: 10

Details: http://www.meetup.com/austinwordpress/calendar/14184625/

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

WordPress, Thesis, and a community debate

A tempest erupted in the WordPress community today on Twitter. It’s centered around the Thesis theme and creator Chris Pearson’s bucking of the GPL in it. WordPress is released under the GPL:

The GPL, or the GNU General Public Licence is the licence that WordPress is under. The licence is simple, you’re free to do what ever you want with it, make money with it, go nuts. However derivative works need to be under GPL.

Ever since Thesis was released two years ago, it’s not been released under the GPL. This has become a sticky point for the folks at Automattic. With the discovery of a malicious file in the 1.7 and 1.8b1 release of Thesis today, Matt decided to air his feelings on Thesis over Twitter. And we’re off.

Do a Twitter search for #thesiswp and you’ll see fairly strong opinions, some funny remarks, and quite a bit of snark.

The dustup got started today with WordPress developer (and fellow Coworking enthusiast) Bill Erickson – a damn good WordPress consultant in College Station. Automattic removed him from their VIP consultant listing, CoedPoet.com, due to his promotion of Thesis.

Austin WordPress community – do you have any thoughts? All the major players in this have Austin & Texas connections. I’d love to hear you sound off in the comments.

Update: Aaron Brazell just posted a good piece on the topic with mention of a possible lawsuit.

Related stories out in the blogosphere (will post more as I find them):

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

WordPress 3.0 Overview – notes

The presentation from tonight’s Austin WordPress Meetup is online at Slideshare.

The links used in tonight’s presentation are listed here:

Big thanks to Cospace for the meetup space and WPEngine for sponsoring the meetup & providing the Ranch Road 12 Beer, pizza, and soda.

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

A History of WordPress Admin Interfaces

[flv]http://wordpressaustin.com/wp-content/uploads/wpAdminHistory.mp4[/flv]

http://wordpressaustin.com/wp-content/uploads/wpAdminHistory.mp4

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)