Five Tips for using @font-face

No related posts.

• Choosing Link Partners
• 5 Elements of a winning SEM strategy
• Maximize your paid advertisements with Google
• and a two part series, Tools of the Trade, Part I , and Part II

Related posts:

1. Blackhat SEO Practices and General Problems Hey guys, I know its been awhile since I’ve published...

Check the tutorial out.

Related posts:

1. Wonderful Information on Web Fonts Recently read a wonderful article about how you can add...
2. Sempo.org SEM institute I was linked to this website by a friend, it...

site tweaks and tune ups with sem 101

Related posts:

1. Sempo.org SEM institute I was linked to this website by a friend, it...
2. Wonderful Information on Web Fonts Recently read a wonderful article about how you can add...
3. Integrating Facebook Authentication with your Website just reviewed an article on Nettuts about how you can...

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.

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.

Automatically Retrieve The First Image From Posts On Your Home Page

The problem . Many WordPress users use custom fields to display a thumbnail on their blog home page. Of course, this is a nice solution, but how about automatically retrieving the first image from a post and using it as a thumbnail?

The solution . This hack is quite easy to implement:

1. Open the functions.php file in your theme.
2. Paste this code in. Don’t forget to specify a default image on line 10 in case a post of yours does not have an image.function catch_that_image {
   global $post, $posts;
   $first_img = ”;
   ob_start;
   ob_end_clean;
   $output = preg_match_all’//i’, $post->post_content, $matches;
   $first_img = $matches [1] [0];
   ifempty$first_img{ //Defines a default image
   $first_img = "/images/default.jpg";
   }
   return $first_img;
3. Save the functions.php file.
4. On your blog home page index.php, call the function this way to get the URL of the first image from the post:

<?php echo catch_that_image() ?>

Code explanation . The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.

via 10 Exceptional WordPress Hacks | Developer’s Toolbox | Smashing Magazine .

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.