Twenty Twelve Theme

I recently changed themes from a custom made one, that I’ve used for a long time, to a theme called Twenty Twelve, the current WordPress default theme. I made one slight change though which alters the entire look of the theme. I changed font from the default ‘Open Sans’ to ‘Lato’ which is available from Google. To facilitate the change, I’m using my Webfonts plugin and this CSS code:

#page {font-family:'Lato', sans-serif;}

Linode Kicks Ass

Get a web server running within minutes. Choose a Linux distro, resources, and node location. That’s essentially Linode in a nutshell. I signed up with Linode about two weeks ago. I’ve been playing around with it since then. I can happily say that I’m very impressed with Linode. It has exceeded my expectations.

If you want total control of your web server, Linode VPS is really the way to go. You will be asked to choose server size when you sign up. They come in many configurations. I chose Linode 512. You also need to choose a data center location. There are six data centers worldwide. I choose the one in Fremont since I live in California.

So far, I’m loving the guaranteed server resources. My websites are running faster . I chose Ubuntu 12.04 LTS 32 bit because it’s a Linux distro I am very familiar with. Apparently, 57% Linode users have chosen Ubuntu as well. I already transferred a couple of domains over to Linode. The websites are screaming.

I plan to migrate more websites later. If you are curious about how Linode works, here is a short list of features to get you started:

  • Full ssh and root access
  • Guaranteed Resources
  • 4 processor Xen instances
  • Out of band console shell
  • Dedicated IP address, premium bw
  • Six datacenters in the US, Europe, and Asia-Pacific
  • HA and Clustering Support
  • Bandwidth pooling
  • Managed DNS with API

Multiple Columns in HTML5 and CSS3

Creating a multiple column pages is so much easier now with HTML5 and CSS3 than was previously possible. Consider if you have a page with 200 unordered lists. The HTML markup for this would be something similar to this:

Unordered List

<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>

As you’ve noticed, I’ve abbreviated the markup. The page rendered will be long. It will take some scrolling down to get to the bottom of the page. The obvious solution for this page layout is to display the data in multiple columns.

Displaying two to three columns is ideal. You can add more if you like. It really depends on how you want to layout your page. How do we add multiple columns on our pages? It’s quite easy. You’ll be surprised how simple it is.

First, let’s add a class div to our markup. In this example, we will call our div “data.” Our markup will now look like the example below. It’s relatively unchanged, except for the div we’ve just added.

HTML5 Markup

<div class=”data”>
<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>
</div>

CSS3 Markup

The magic is really in CSS. It’s ideal to place a width in your class div, unless your class div is already inside another div that already has a width limit. We can then set a limit how wide we want our columns widths and column gaps.

I’m using a div with a width of 500px because it goes well with the 150px columns widths and 25px column gaps. You probably already guessed, the column widths are how wide the columns are, and the gaps are the spaces between column widths.

.data {
  width:500px;
  -moz-column-width:150px;
  -webkit-column-width:150px ;
  -moz-column-gap: 25px;
  -webkit-column-gap: 25px;
}

Give It A Try

Give it a try. Adding multiple columns in HTML5 and CSS3 is much easier than was previously thought. Create a simple page with some sample data. Add a class div and use the CSS3 multiple column styles to it.

Compatibility

The code has been tested with Mozilla Firefox, Google Chrome and Apple’s Safari. I haven’t tested it with any Internet Explorer. I’ll be curious if it works with IE 7, 8 or 9.

Here’s a demo of a page using the multiple columns.

Resize Images Using CSS

This is an older CSS trick that is worth repeating. Back in the days, resizing images was done via HTML height and width options. Here’s an example below. We will resize the image to 100 x 100 pixels.

HTML

<img src="example.jpg" width="100" height="100" alt="example" />

The problem with this approach is, first, we will lose image quality when resizing regardless of which direction we go, either up or down. The resized image is never going to be as good as the original. Second, there’s a good chance the image will NOT be proportioned. We have to be constantly be aware of image ratios when resizing images.

CSS

So, here comes CSS to the rescue. We will assign a class called “image” to our image.

<img class="image" src="example.jpg" alt="example" />

Next, we will apply CSS to our “image” class.

.image { width: 400px;height : auto; }
.image { width: auto;height : 600px; }

The result is, a well-porportioned image that is never going to be wider than 400px or taller than 600px. In addition, we maintain the standard dimension for all images using the “image” class.

A Background Image That Scales

I recently fixed an issue with my theme design. The dark wood background image that you see on this blog, was not big enough to fit most large monitors, where resolutions are higher than 1080px. Hat tip goes to Daniel Ritchie for pointing it out to me. So, I searched the web and found several possible solutions.

I found Chris Coyier’s at CSS-Tricks solution the most attractive, because it was by far the easiest one to implement. It not only adheres to CSS 3 standards, but it also works across most modern browsers. The result is a background image that fills up the entire page, scales to any size screen when needed, retains its aspect ratio, and centers the image properly.

What more can you ask for? Well, maybe something that loads a tiny bit faster than usual. So, I took the liberty to reduce the file size of my background image from 744kb to 128kb using my beloved Gimp. I use a little bit of image compression, without suffering too much in image quality. So, not only is the background image displaying properly on any size monitor, it also loads much, much faster. That’s a win-win situation.

If you like to know how I implemented a background image that scales to any screen resolution, just head on over to CSS-Tricks and check out Chris Coyier’s CSS3 solution. I hope you’ll find this article very helpful. I tested the new background with a HP w2207h monitor that rotates to landscape mode. Works great. If you find this to be otherwise, any input is appreciated.

Indent Entire Paragraph Using CSS

One of the easiest ways to indent an entire paragraph in HTML is to use a class and some padding. Let me show an example. In this tutorial, I will indent a paragraph by 40px. I will use a class called “indent” and apply “padding-left” to it. I’m using inline styles in this example, but you can easily apply the same CSS styles to an external stylesheet if you want. First, a normal paragraph.

Normal Paragraph

A normal paragraph would look like this. There is no indentation. The entire paragraph is lined up with the rest of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

A Paragraph With CSS Styling

<div class=”indent” style=”padding-left:40px;”>

In this div class, I am simply applying padding-left of 40 pixels to the entire class called “indent.” This will indent the entire paragraph as you can see in the results below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

</div>

The Result

As you can see, the entire paragraph is indented by 40px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

HTML5 Boilerplate

If you’re looking for a rock-solid HTML5 template, check out the HTML5 Boilerplate created by Paul Irish and Divya Manian. Here are more details from their site.

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

Visit and download the HTML5 Boilerplate.

CSS Text Shadow

If you are a frequent visitor to the site, you may have noticed a couple of subtle changes to my blog the last couple of days. I’ve added text shadows on the titles and I also removed the text underline from the links. Today, this article will focus on how to add text shadows to your blog using CSS.

CSS Text Shadows give coders and web developers a tool to create text effects such as 3 dimensional effects, glowing effects and stencils. Text Shadows was originally proposed in CSS2, but really took off with CSS3.

Text Shadows is supported in most major browsers: Firefox, Safari, Chrome, Opera. The one major browser that’s missing in the list is Microsoft’s Internet Explorer. Text shadows is possible in Internet Explorer using JQuery. See link below.

Adding Text Shadows to your website, blog or page is quite easy. All it takes is adding a line of code to your existing CSS file. Consider the title above called “CSS Text Shadow” styled using <h2>. To make a text shadow, just add the following to your CSS file.

h2 { text-shadow: 2px 2px 2px #aaa; }

Text Shadows

The text shadow element contains 4 attributes. The first attribute is the x-coordinate. The second is y-coordinate. The third is the blur. The fourth is the color of the shadow. Negative values can be placed to simulate a light source that’s coming from the bottom.

h2 { text-shadow: 2px 3px 3px #aaa; }

Text Shadows

Here’s a couple of excellent articles about CSS text shadows:

CSS text shadows is a great tool for creating cool effects on your site. Just one advice. Don’t overdue it. Use it sparingly.

My WordPress Multi-Site .htaccess File

I just solved my WordPress multi-site problem. I have several blogs located in the subdirectories of this blog. The problem was the media files for my sub-blogs were all broken. If you are aware of the WordPress multi-site setup, WordPress creates a blog.dir directory under wp-content. This is where it keeps all of the uploaded media files such as: images, video, etc for the sub-blogs.

The issue was began when my .htaccess file was overwritten or possibly replaced. At first, I thought it was just an issue with the WordPress options pages which is stored in the wp-options table. But, that wasn’t the case. A quick search in the WordPress forums solved that problem. So, I’m writing this article for two reasons: (1.) So others can benefit, (2.) so I have a record of this fix somewhere.

So, here’s my .htaccess file.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
# uploaded files
RewriteRule ^(.*/)?files/$ index.php [L]
RewriteCond %{REQUEST_URI} !.*wp-content/plugins.*
RewriteRule ^(.*/)?files/(.*) wp-includes/ms-files.php?file=$2 [L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule  ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule  ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]
</IfModule>
# END WordPress

Create Your Own WordPress Breadcrumbs

Breadcrumbs in web terms are a chain of links that leads the user back to the main index page. This article will teach you how to manually create your own breadcrumbs within WordPress. You will place these codes in your WordPress themes just underneath your header, for example.

Create a Home

Let’s get started. Let’s create a home. Use this HTML and PHP code.

<a href=”<?php bloginfo(‘url’);?>”>Home</a>

Double Angle Quotation Marks

Let’s use a Guillemet or a Double Angle Quotation Mark to separate the links.

The symbol » equals to “&raquo;” in HTML.

Post and Page Titles

Let’s display the titles. The code for both post and page titles are the same.

<a href=”<?php echo get_permalink() ?>”><?php the_title(); ?></a>

All Together Now

<a href=”<?php bloginfo(‘url’);?>”>Home</a> &raquo; <a href=”<?php echo get_permalink() ?>”><?php the_title(); ?></a>

The Result

Home » Create Your Own WordPress Breadcrumbs

Just place this piece of code in your WordPress theme files: e.g. pages.php and single.php. For the main index.php page, you just need the Home link.

That’s it. Fairly easy.

You can get really elaborate by adding Categories, Months and Dates in your breadcrumb. Nevertheless, this article will get you started in the right direction.