Five Tips for using @font-face

No related posts.

As some of you know I’ve moved to Taiwan since my last post, and while spending time out here I have learned that being w3c compliant is a MUST. Validation help ensure your website can be seen by web browsers of any type, including mobile users (it may not be pretty but it wont be broken).

The Firefox add-on “Developers Tool Bar ” can help you be

1. standards compliant
2. css error free
3. javascript error free

But if you really want to be proud of your work, you need to go that extra mile, spend that extra time to ensure that your site is w3c compliant. If your looking for the validation? Shoot on over to their website and test your pages for yourself.

• XHTML Validation
• CSS Validation

If your valid you can stick one of those stickers onto your site letting people know.

No related posts.

This is not an attempt to create a mega list of tools for CSS developers; only few but really useful tools have been selected and placed under appropriate categories. If you see that a really useful tool has been missed, please feel free to share the link in comments.

Note that for a tool to be really useful, it also needs to provide easy to follow instructions and user friendly interface unless it is really straight forward. Unfortunately several tools listed in this list may not fulfill this criteria. If you are aware of another tool that is more user friendly and feature rich than one of the  listed tools, please let us know and we may replace it with an existing tool.

Layouts

• CSS Layout Generator
  This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
• Grid Designer
  Generates fixed and scalable grid layouts along with basic reset and typography.
• Layout Generators
  Generate multi-column and grid layouts with CSS techniques using %, px, or em.

CSS Frameworks

• Boks
  Boks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Boks is an Adobe AIR application, which means it will works on Windows, Mac and Linux.
• Useful Tools & Resources For Blueprint CSS Framework
• YAML Builder
  YAML Builder is an online tool for visually creating YAML-based CSS layouts.
• YUI CSS Grid Builder
• 960 Grid System – Variable Grid System
  Based on the 960 Grid System; the variable grid system is a quick way to generate an underlying CSS grid for your site.
• Grid System Generator
  The grid system generator will create fixed grid systems based on 960 Grid System in valid css / xhtml for rapid prototyping, development and production environments.

Fonts

• Typetester
  The Typetester is an online application for comparison of the fonts for the screen.
• CSS Type Set
• TypeChart
  Lets you flip through, preview and compare web typography while retrieving the CSS
• CSS-Typoset Matrix and Code Generator
• CSStxt
  Tool for generating CSS for web typography.
• EM Calculator AIR Application
  Calculator for Vertical Rhythm in XHTML & CSS; easily convert px to em based on base font-size and line-height; Padding and margins automatically calculated
• Em Calculator
  Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
• PXtoEM

Colors

• CSS Color Editor
  CSS Color Editor allows you to replace the color scheme of your website without going through the entire CSS file. You choose your local CSS file, select new colors and then download the new CSS file with new color codes automatically replaced for you.
• Color Palette Generator
  Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.
• Color Contrast Check
  The Color Contrast Check Tool allows to specify a foreground and a background color and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”.

Sprites

• CSS Sprite Generator
  CSS Sprite Generator will combine the uploaded images into a single sprite and generate the CSS for you.
• YASC (Yet Another Sprite Creator)
  This tools is useful when all your sprite images have been created in a single file. The process is fairly straight forward: you upload this file, then visually select each individual item and specify its CSS id; once you have selected all your sprites you can generate all the required CSS  with a single click.
• SmartSprites
  SmartSprites is Java command line utility that will let you easily introduce and maintain CSS sprites in your designs. SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

Forms

• Accessible Form Builder
  Create accessible form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
• Wufoo
  Wufoo is an online service that allows anybody to easily build great looking online forms. You can use Wufoo as an easy way to create good-looking, valid CSS/XHTML form markup. It allows you to use your account to design and download the markup and CSS for FREE.

UI Components

• List-o-Matic
  Create CSS-styled navigation blocks based on unordered list <li> items. Get your semantics on!
• CSS Menu Generator
  Generates horizontal, vertical & dropdown CSS menus
• ThemeRoller
  ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects.

Text Wrappers

• CSS Text Wrapper
  Generates HTML/CSS to wrap content to any shape
• The Box Office
  The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in HTML pages.

Analysis & Debugging

• W3C CSS Validation Service
• CSS Analyzer
  CSS Analyzer checks the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
• Firebug
  One of the post popular web developer tool – Firebug is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can use Firebug Lite in IE, Opera, and Safari.

Maintenance

• Dust-Me Selectors
  Dust-Me Selectors is a Firefox extension that finds unused CSS selectors
• CssCleaner
  Windows desktop application that removes unused CSS Classes from your web application
• CSS Redundancy Checker
  Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant.

Optimization

• CSS Drive CSS Compressor
  Normal mode allows you to choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. You can switch to Advanced mode for greater customization.
• Robson CSS Compressor
  A good CSS Compressor still in development.
• MinifyMe – AIR Application
  Adobe AIR application that allows you pack multiple files together.

Formatting

• CleanCSS – CSS Formatter and Optimizer
  This tool comes with several options for formatting as well as optimization. It also provides ready made sets of options for various level of balances between optimization and readability.  Important feature includes ability to automatically merged the same selectors and properties.
• Styleneat
  It organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas and see how they relate to each other.
• CSS Toolbox
  Free CSS Validation, CSS Formatter, CSS Compressor

Browser Specific

• Conditional-CSS
  Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers. Compilers for Conditional-CSS are available in PHP, C# and C.
• Litmus
  Litmus shows you exactly how your designs look on various platform, across every popular web browser.
• Web Browser CSS Support
  Detailed information about CSS support in major web browsers, allows you to pick which browser appear on the information tables.
• When Can I Use?
  Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies. Allows you to specify browsers, features, time period,  status, search and sorting options.
• IE7.js
  IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Cheat Sheets

• CSS Cheat Sheet
  The CSS cheat sheet is a one-page reference sheet, listing all selectors and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
• CSS Shorthand Cheat Sheet
• YUI Library: CSS Reset, Base, Fonts, and Grids
• Blueprint CSS Cheat Sheet

via List of Really Useful Tools for CSS Developers | W3Avenue .

No related posts.

Problem

I needed to add the post picture stored in a custom field to my header only on the post when its called.

Information

If you guys are already familiar with wordpress in any sort of way then you will know that the single.php will handle any calls of your posts. but it also handles categories or groups of posts that are called.

Hypothesis

My hypothesis was that i could run an if statement that would test and see if it was using single.php and if it was in the specific category i want the picture applied to (in my case the only categorized with post pictures is my blog).

my statement was something like this

<php if (is_single() && in_category(‘blog’))
echo ‘content ‘;
} ?>

Solution

Although my initial hypothesis was nearly correct or at least the logic was correct it wasn’t working for some reason, the wordpress template tag for in_category was pulling no results at any time. And I believe this was because this statement was completely out of the loop being in the header and all it didn’t quite know what post it was suppose to call to be in a category or not. Any ways after trying to take a nap later that day the simple solution came to me and ended up as such.

<?php if (is_single()) {
if (!is_category()) {
echo ‘content’;
}
} ?>

Instead of testing if it’s in a category I only needed to test to see if it was displaying a category page or not, This would eliminate my border on category pages, but keep them on all my post pages, the next and last step would be to create a default image for the categories where there is no post image. Ill post on this later.

No related posts.

Creating and Styling our first theme from scratch.

CSS Styles

In order to get our new style to accept and read our new css style sheet we have to configure just a few comments.

like below

/*
Theme Name: cssOrigins.com
Description: the second iteration of the cssOrigins website
Author: Hunter  Brelsford
Author URI: http://www.cssOrigins.com
version: 1.0
Tags: Design, WordPress, Css
Optimization: Css Optimization done by Hunter  Brelsford 4/23/09
*/

Make sure at this point we save our style sheet. The style sheet fortunately is ready to be read in by our new blog, even though it does not contain any kind of actual style information. All plugins, and stylesheets in wordpress are detected this way, and auto generated into their respective themes, and plugins sections under the admin panel.

If we go on over to see our new theme, we can see that unfortunately that its listed as a broken theme.

Index.php

The reason we have a broken theme is because we have no files other then the style sheet associated with our theme, wordpress needs at least one for it to recognize its theme as a valid workable theme. So we will indulge it by creating a new file and naming it “index.php ”

1. create a index.php
2. add a title
3. save the page

if you want to add your own screen shot for your theme you can additionally upload a 4×3 .jpg up to your themes directory.

Template Tags – 10:05

WordPress has many built in functions that you can use on your site. the ones used in this screen cast are covered and defined here.

1. bloginfo(‘name’)  – Uses the name of your blog thats been defined in your wordpress settings
2. bloginfo(‘stylesheet_url’) – Uses the current URL where your activated themes stylesheet is located
3. language_attributes(”) – Gives the default language and type direction of the wordpress instalation
4. bloginfo(‘html_type’) – Gives the page content type
5. bloginfo(‘charset’) – Displays the character set of the page

Template tags are nothing more then php functions in wordpress, these tags are available to access functions and variables from within wordpress.

More information on template tags can be found on the wordpress codex

This article was originally brought to you by Drew Douglass at ThemeForest

No related posts.

If you’ve ever read a tutorial on a CSS framework, I can guarantee that many comments mimic the previous statements. My guess is that the majority of these comments are stemmed from slight ignorance. Once you take the opportunity to spend some time with 960, you’ll be amazed at how much time can potentially be saved when developing your web applications. At the very least, take ten minutes to review the framework. You can always press the delete key…though I doubt you will!

Pros

• Rapidly speeds up development time.
• Clean grid structure.
• Not many browser inconsistencies. The ones you find can be fixed easily.
• It’s not "bloated" as many people suggest. We’re talking 3-4kb here, folks! You would use many of these stylings anyways.
• Build complex layouts quickly.

Cons

• It’s named "960" for a reason. If you’re hoping to use a different width for you website, you might be better off choosing a different framework.
• As with any "framework", you lose a bit of flexibility.
• You didn’t create it. There’s something to be said for code being 100% our own.

Usage

Let’s imagine that we want to work with the "12 column" structure to create the extremely simple layout seen below. First, we must create a wrapper div that has a class of "container_12". Notice the 12.

<div id="container" class="container_12">
...content goes here
</div>

Specifying an id here isn’t required by any means. However, I find that it helps me to remember exactly what the div is. One of the gripes against 960 is that the classes do nothing to define what the element is. Simply including an id fixes that issue.

Grids

Now we want to create a simple header and two column structure. When first getting started, it’s helpful to examine the demo to choose how wide a grid you should use.

I’m going to choose a header width of "940px" (+ 20px margins = 960), a sidebar width of "220px", and a main content width of "700px".

You must assign a class to each div. Naming conventions require that that the class name begins with "grid_" and ends with the number of columns needed. In our case, we’ll use "grid_12′, "grid_3" and "grid_9", respectively.

<div id="container" class="container_12">
  <div id="header" class="grid_12">
    content goes here
  </div>

  <div id="sidebar" class="grid_3">
    content goes here
  </div>

  <div id="mainContent" class="grid_9">
    content goes here
  </div>
</div>

The only additional styling that I’ve added is background colors and a minimum width for each div to simulate an actual website full of text. I won’t go over that here; mostly because they should be removed. They’re only used here to demonstrate the structure.

Without worrying about margins, floats, or IE hacks, we’re able to create a layout extremely fast. The true power of 960 is demonstrated when building complex newspaper-like layouts.

via A Detailed Look at the 960 CSS Framework – Nettuts+ .

No related posts.

1-Twitter Tools

Twitter Tools is a plugin that creates a complete integration between your WordPress blog and your Twitter account.

2-Twitter Sharts

‘Shart’ your twitter status anywhere within your wordpress blog posts or pages!

3-Twitter for WordPress

Twitter for WordPress displays yours latest tweets in your WordPress blog.

4-Twitter Widget

Adds a sidebar widget to display Twitter updates

5-Elegant Twitter Widget

A WordPress widget that displays twitter updates in yummy valid semantic XHTML code. The code is heavily commented and the output is in template functions so everything is fully customizable.

6-Twitter This

Allow to your readers sharing your blog post at twitter .

7-Twitter Widget Pro

A widget that properly handles twitter feeds, including @username and link .

8-Twitter Swell

You coult post message to your Twitter and show it.

9-WP Twitter Pitch

WP-TwitterPitch is all about getting the pitch delivered to you in the form you want to get it delivered – in other words in Twitter format. If you’re like me, then your Twitter direct message box is a lot like your email inbox.

10-Twitter Blaster

allow your visitors to post to your Twitter account. Once installed your users can update .

11-Twitter style links

This plugin allows you to add Twitter style links to comments.

12-Twitter Feed

The control functions such as connecting to a Twitter account and storing information on the tweets/blogs, can be accessed through the “Twitter Control” GUI in the WordPress admin panel.

13-Twitter updater w/ TinyURL

com status with the latest post that you’ve made. It also has the option of including a link back to your post so can people can easily click on it to view the post.

14-Twitter To TTF

displays it in a TTF Simple. Asks you for your Twitter ID. Grabs your latest tweet.

15-Kish Twitter

This plugin is using the Twitter API to get and post the updates. You need to have a twitter account to post updates.

16-Post to Twitter

Create a tweet on Twitter whenever you post

17-WP to Twitter

The WP-to-Twitter plugin posts a Twitter status update from your blog using the Cli.gs URL shortening service to provide a link back to your post from Twitter.

18-Twitter Links

This plugin will convert valid Twitter usernames mentioned in comments into a link to their Twitter profile page.

19-Twitter Status

Twitter Status is a very simple no-fuzz plugin that gets the current Twitter message from the Twitter ID specified

20-Latest Twitter Sidebar Widget

Creates a sidebar widget that displays the latest Twitter update for any given user.

21-Twitter To Wire

This plugin allows your twitter posts to show up in your buddypress wire.

22-Top Twitter Links by Twitturls

Widget that displays currently popular links from Twitter .

23-Thread Twitter

fetch your tweets and display them in thread style.

24-Twitter

Customizable twitter widget for your sidebar. Twitter Widget displays your tweets on your sidebar.

25-Twitter Link

Converts @username mentions in posts and pages into links to Twitter .

Find out more, and read the rest of skyje’s top twitter plugins for wordpress on his blog below

Via  107 Twitter plugins for WordPress displays yours latest tweets in your WordPress blog

No related posts.

WordPress is no longer just used to power blogs . It has become the CMS of choice for many web designers. It’s always interesting to see how it’s flexibility provides web designers with the freedom to design sites with no limitations. Here are 15 beautiful web sites all powered by WordPress.

Creative Depart

Big Spaceship

Ecoki

20 jours pour la retrouver par Kevin Polof

Search Inside Video

UGSMAG

App Storm

IconDock

ANidea

45royale

Alpha Multimedia Solutions

the Art of Catalin Bridinel

EightHourDay

ESPIRA

StopDesign

via 15 Impressive and Beautiful Uses of WordPress | Web Design Ledger .

No related posts.

The series will be separated into days, starting with day two… ok lets get started.

Day 2 : WordPress Admin panel.

Introduction

In our video here we quickly reviewed all the necessaries that we would be using in order to use and edit our new WordPress install. He quickly went over the WordPress file structure. The necessary changes that needed to be made to the wp-config.php file when we upload, and the location of our all important theme files.

www.example.com/wp-content/themes/theme1

Body

Moving on through the video the main bulk of this video was getting the understanding of the different template files in your wordpress theme, what they do and how they work, so lets move through a few of them.

As described in our video if we go to APPEARANCE | EDITOR we will be able to see all the template files included in the wordpress theme currently activated.

If we start by importance usualy index.php would come to mind in a wordpress site. We can see there’s no doctypes or much html data in our file at all, but rather many simple php requests to header and footer and sidebar etc.. These are essentially statements that calls in those files from you directory. So header.

In our header.php we find our doctypes and titles tags and start of our html elements. This is loaded at the top of every page or post that calls get_header(). Pretty easy to understand.

Similarly our files typically end with out get_footer() call and our footer.php contains all the closing tags for information contained within our document.

Single.php – used for individual post pages.

404.php – used when a page within your wordpress blog cannot be found.

Sidebar -  calls widgets and other custom information into the 1 or more sidebars in your wordpress theme.

Conclusion

After looking through and familiarizing yourself with the themes directory withing your wordpress install you should be able to identify the different files and what they more or less accomplish. With this basic knowledge we will be able to simply identify where and what files we need to be editing in the future while we move on to developing our own theme, in the new few videos.

If you’re having problems understand the videos or information please comment and we will see if we can help you out.

No related posts.

Feast your eyes over this collection of super useful CSS resources

• 20 Useful CSS Tips For Beginners
• Using CSS to Do Anything: 50+ Creative Examples & Tutorials
• 101 CSS Tips, Tutorials and Examples
• CSS Code Snippets : 15 Wicked Tricks
• 15 CSS Tricks That Must be Learned
• 8 CSS tips for better linking
• 8 Premium One Line CSS Tips
• 70 Expert Ideas For Better CSS Coding
• 30+ CSS Cheat Sheets & Quick Reference Guides
• 10 Principles of the CSS Masters
• 10 Excellent CSS Tips and Tutorials
• 50+ Nice Clean CSS Tab-Based Navigation Scripts
• CSS Layouts: 40+ Tutorials, Tips, Demos & Best Practices
• 120 Excellent Examples of CSS Horizontal Menus
• 60+ Wacky CSS Tutorials, Layouts, Optimizers & More
• 12 Principles For Keeping Your Code Clean
• Quick & Easy CSS Development with Firebug
• 25+ CSS Tools to reduce your work load
• 20 Useful Resources for Learning about CSS3
• 16 Usable CSS Graph and Bar Chart Tutorials & Techniques
• Top 10 Swish And Stylish CSS Tricks
• 12 Most used CSS tricks
• Five web 2.0 CSS menu tutorials
• 12 CSS Tools and Tutorials for Beautiful Web Typography
• 5 Popular CSS Frameworks + Tools for Getting Started
• 30 Excellent CSS Based Navigation and Buttons Tutorial
• Creating CSS Layouts: Best Tutorials on Converting PSD to XHTML
• 20 Ultimate CSS Tutorials That Will Help You Master CSS
• 19 CSS Menu Tutorials to Spice Up Your Web Designs
• Top 10 CSS Buttons Tutorial List
• 40 CSS Web Form Style Tutorials For Web Developers
• 35+ very Useful And Powerful CSS techniques
• 43 PSD to XHTML, CSS Tutorials Creating Web Layouts & Menus
• Creating Sexy Stylesheets
• CSS Tip #1: Resetting Your Styles with CSS Reset
• Ten CSS tricks you may not know
• 5 Tips For Organizing Your CSS
• Web Design+ Tips & Advice on Web Standards Development
• 10 CSS shorthand techniques you’ll use everyday
• The Ultimate CSS Cheat Sheet
• 13 Training Principles of CSS Everyone Should Know
• 101 CSS Techniques Of All Time- Part 1
• 16+ Easy CSS Techniques that Simplify the Webdesigner’s Life
• 15 CSS Properties You Probably Never Use (but perhaps should)
• The CSS, HTML, and JavaScript Lab
• 5 Steps to CSS Heaven
• Cool CSS Image Maps
• 20 Sites That Brought CSS into the Mainstream
• CSS Font sizing with different techniques
• Make your Site Mobile Friendly with CSS
• Examples & Tips for Great HTML/CSS Formatting
• Top 10 CSS Table Designs
• Fluid Grids with CSS
• The Art of CSS Positioning
• CSS: Magic of ‘border’ property
• How to Debug CSS
• 26+ CSS Galleries to Follow on Twitter
• Image-free CSS Tooltip Pointers
• Simple scalable CSS based breadcrumbs
• 9 CSS Essential Skills For Every Web Designer
• My Top Ten CSS Tricks
• 22 Resources to Easily Create CSS Layouts
• 10 Invaluable CSS Resources
• 40 Beautiful Dark CSS Website Designs
• 40+ CSS Generators, Creators, and Makers
• How to: CSS Large Background
• The complete CSS guide
• Learn CSS Positioning in Ten Steps
• 50+ Nice Clean CSS Tab-Based Navigation Scripts
• 37 CSS Navigation Techniques
• 10 Challenging But Awesome CSS Techniques
• CSS Typography: Contrast Techniques, Tutorials & More
• 4 Uber Cool Css Techniques For Links
• 38 Free Elegant XHTML/CSS Website Templates
• CSS Float Theory: Things You Should Know
• CSS Tip #2: Structural Naming Convention in CSS
• 5 Techniques to Acquaint You With CSS 3
• The Highly Extensible CSS Interface
• Improving Code Readability With CSS Styleguides
• Best of CSS Design 2008
• SitePoint CSS Reference
• CSS Editors Reviewed

via 84 Amazingly Useful CSS Tips & Resources | Hi, I’m Grace Smith .

No related posts.