/* CSS Document */
body { text-align:center } /*For IE6 Shenanigans*/
#content { width:907px; margin:0 auto; text-align:left } /* Centering Page */

You see the margin attribute ? By setting it to auto, the margins to the left and right will be automatic, which means your page will be centered. Of course, you have to specify a width for your div, otherwise the browser will not be able to calculate the margins to the left and right. The following shows the HTML code.

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<div id="content">
 
<!-- ALL THE CONTENT GOES HERE --></div>

That’s it. Enjoy.

When Wordpress first appeared in 2003, well-know traditional layout was so popular because of its simple design. However, as the wordpress blogs got popular across the world,  everyone got bored with the layouts simply outputting the latest posts one under the other. Because that layout was being used everywhere. But, thanks to the usage of wordpress as CMS, some magazines and newspapers used the wordpress blogging software as a content management system [ 1, 2, 3, 4 ]. This was one of the milestones to Wordpress magazine styles. Today, people love to read excerpts for the posts and see images next to them. By this way, a lot more posts can be viewed at the same time giving the ability to users to select whatever they want to read. Besides, organization and categorization on the front page is simpler and considered to be more presentable in magazine themes. Today, magazine themes is one of the most searched themes for wordpress. Lots of premium theme developers has also given the importance to magazine style theme developments. That’s why I prepare a wordpress magazine theme list that will provide anyone to quickly select a magazine theme.

The List: Wordpress Magazine Themes

1. Magazeen Theme
   
   Demo | Source
2. OpenBook Magazine Theme
   
   Demo | Source
3. Options Magazine Theme
   
   Demo | Source
4. Hamasaki Magazine Theme
   
   Demo | Source
5. Structure Magazine Theme
   
   Demo | Source
6. Rebel Magazine Theme
   
   Demo | Source
7. Arthemia Magazine Theme
   
   Demo | Source
8. Newsweek Magazine Theme
   
   Demo | Source
9. StudioWordpress Magazine Theme
   
   Demo | Source
10. Visionary Magazine Theme
    
    Demo | Source
11. Mimbo 2 Magazine Theme
    
    Demo | Source
12. Mimbo 3 Magazine Theme
    
    Demo | Source
13. The Morning After Magazine Theme
    
    Demo | Source
14. Small Magazine Theme
    
    Demo | Source
15. OverStand Magazine Theme
    
    Demo | Source
16. Branford Magazine Theme
    
    Demo | Source
17. Gabfire Wordpress Magazine Theme
    
    Demo | Source
18. Smooth News Magazine Theme
    
    Demo | Source
19. Shiva Magazine Theme
    
    Demo | Source
20. Zinmag Futura Magazine Theme
    
    Demo | Source
21. Digital Statement Magazine Theme
    
    Demo | Source
22. Drenched Magazine Theme
    
    Demo | Source
23. Gamezine Magazine Theme
    
    Demo | Source
24. Daily Planet Magazine Theme
    
    Demo | Source
25. Zinmag Redux Magazine Theme
    
    Demo | Source
26. Forex Press Magazine Theme
    
    Demo | Source
27. Upstart Blogger Futurosity Magazine Theme
    
    Demo | Source

Please comment below if you have/know another magazine theme for wordpress .

“95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.”

A good web designer knows the importance of typography in creating web sites. As this post mentions, typography is in fact the most important part of designing stylish web pages. However, it is in fact a little problematic to get all the fonts work in internet browser, the sIFR is the solution.

What is sIFR ?
sIFR, Scalable Inman Flash Replacement, simply detects texts and replaces them with a flash movie, which can illustrate the any font you embed in. Speaking of how it works, it is a simple javascript file doing the replacement, it has also the flash movie, which you can edit in Adobe Flash so that you can add the font you want to use in your web page.

sIFR is slow
Every good thing at internet, has disadvantages. Despite the fact sIFR produces beautiful typography, size of the required file is not that small. The required javascript file is about 22kB (uncompressed), required css file is about 3kB and the flash movie is usually between 10kB and 20kB, depending on the font used and embedded characters.

Faster & Smaller Version: sIFR Lite
In order to reduce the size, someone rewrote the sifr’s javascript file, to form a lite version and to provide a faster way of replacing texts. He named it sIFR Lite. The sIFR Lite’s javascript is just 3.7K (uncompressed), reduced from 22kB, so it actually saves bandwidth for you and time for your visitors. From developer’s site:

sIFR Lite comparing to original sIFR
1. It is smaller. This library is 3.7k uncompressed. The original sIFR is 22k, no joke!
2. It auto-detects the text color of the elements. (The original sIFR makes you enter it manually!)
3. It is completely object-oriented. (No more static methods floating all over the place.)
4. It no longer uses CSS selectors. Elements are targeted by tag name and class. (A slight loss in ease of use, but faster, lighter, and more maintainable.)
5. It isn’t named after myself, or anyone else. haha.

I highly recommend you to use the sIFR Lite instead of the original sIFR. Despite the fact sIFR lite has no support for CSS selectors (resulting some bugs for heading tags in internet explorer; but there is a workaround), it is way small and fast comparing to the original sIFR. Meaning, you can enjoy the typography beauty on your site faster because of the reduced size of the sIFR javascript.

sIFR Lite Usage
I will explain it step by step.

First download all the zip file from the original sIFR creator’s website .
Contents of zip file:

• css/sIFR-print.css
• css/sIFR-screen.css
• js/sifr.js
• js/sifr-config.js
• flash/sifr.fla

Now, open sifr.fla and edit the font of the text (choose a font to use) and publish the flash movie.

Download the sIFR lite here ( the problem mentioned in the comments below, is fixed, thanks to Patrick ) and replace it with js/sifr.js. Also remove the js/sifr-config.js. Don’t forget to edit the font path in sifr.lite.js.

Defining the text replacements are so simple, following javascript replaces h1.mySpecialClass, h2.mySpecialClass and h3.mySpecialClass texts with the flash movie, tradegothic.swf.

var gothic = new Font('tradegothic.swf', {
 
tags:'h1,h2,h3',
 
classFilter:'mySpecialClass'
 
});
 
gothic.replace()

Put the above code inside your body tags. Also reference the js/sifr.js and all css files inside your head tags. That’s it. You should now have had the sifr working correctly in your web page.

You can also use it without targeting any class. If you’d like to target all heading tags and want all of them replaced, you can use the following javascript.

var gothic = new Font('tradegothic.swf', {
 
tags:'h1,h2,h3'
 
});
 
gothic.replace()

sIFR Lite Demo

Installing IE6 and IE7 Side by Side

With a few googles, i found out  that you can actually install IE6 and IE7 in one computer. A few hacks to windows registry database, and a few file additions and deletions. Don’t be afraid, because someone has simplified it. Tredosoft is offering a software that supports Multiple IEs in one computer . Just download and run the file at this page and start testing your web designs in multiple internet explorer versions ( IE5, IE6 and IE7). Enjoy.