/* 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.

Click for demo!

Addition to those advertisement features, Wow XML Flash Video Player helps you keep your video files hidden. This is handled with a hidden xml file, queried inside flash video player. This is crucial to prevent bandwidth theft also keeping your visitors coming to your site, since there will be no way to download video files.

All of the features, can be configured with few easy steps, by just modifying an xml file and adding few parameters into HTML. That’s all. All is well explained in our documentation, that will be provided you if you purchase.

Features:

• Hides your exact video path ( Videos are fetched from XML )
  Video path is hidden in XML file. The XML file path can only be seen in Actionscript, which means anyone willing to hack your video path, to steal bandwidth, has to have your FLA file, which he will not have.
• No need to edit FLA. Configure this flash video player using XML
  All the features of this video player, can be configured easily with html code
• Define the path to your video in the XML
  Video path is kept in an xml file. Our documentation explains how to use this file, even demonstrates an example of php coded dynamic video site.
• Enhanced advertisement functions
  You can have a pre-roll video advertisement for your video, just by configuring your video player using HTML. You can also have in-video text ads, again configurable. Let’s just say, on the 6th second of the video, you want to advertise Google.com, configuration is so easy. Then you will have a popup inside the video when it reaches to the 6th second. See the demo.
• Auto Play Feature
  You can easily set the video to auto play or not. If not, you can also have a preview image before the video plays.
• Post-Video Related/Featured Videos Screen
  You can guide your visitors to view more videos, by showing 3 recommended/related videos at the end of the video.
• Your Web Site’s Logo on Video Screen
  You can also have your site’s logo on video screen, it is totally configurable with HTML. No need to edit FLA.
• Fully customizable
  Some of the customizable features:
  • Auto Play: True or False
  • Pre-roll Ads: True or False
  • Video Preview Image: True or False
  • In-video Ads: True or False
  • Post-video related videos screen: True or False
  • Your logo on screen: True or False
• Can easily be reskinned and resized

If you buy, You get:

• FLA. You can easily customize the skin of your video player.
  .fla files contain source material for the Flash application. Flash authoring software can edit FLA files and compile them into .swf files.
• SWF. Wow XML Flash Video Player.
• DOC. Detailed documentation on using Wow XML Flash Video Player
• PHP-XML coded video site example with Wow XML Flash Video Player.
• Upgrades are totally free.
• Unlimited Support. We even help you build your video web site !

Technical Specifications:

• Adobe Flash Player 10
• Actipscript 2. MediaDisplay used.
• SWF File: 66KB
• Plays FLV files
• Progressive Download

More Features and It’s Customizable! Check it out

The video below, is set to auto-play:false. Preview image is set. In-video ad is set. Pre-roll video ad is set. Post-video screen is enabled. Click here for an auto play version.

If you are having problems purchasing this software, please contact us.

In this tutorial, we’ll show you how to code and design your custom flash video player step by step. We hope it will be a good resource for the flash newbies.

Click for an example.

Important Notes Before Beginning

• Don’t forget to set the instance names of the movieclips as stated, otherwise, the actions will not work!
• Pay attention to italic statements. They will be telling you which layer & movieclip you are working on!
• FullScreen button will only work if you have <param name=”allowFullScreen” value=”true” /> in your HTML.

Design Part:

First,  create a new flash document (ActionScript 2.0) and set the size and the frame rate as you wish. A frame rate of 30fps is typical. Speaking of document size, you should keep in mind that if you are streaming 4×3 ratio videos, you should obey this ratio also adding the height of control bar which we will use. We, in this tutorial, set the size to 489 x 400 px.

As background color, we suggest you to set it same with your website’s background color. But it is up to you, of course.

Scene 1 (layer:background)

Now name the first layer “background” and put whatever you want to display on the background of your video player. We placed a black fading background for the control bar here.

Scene 1 (layer:controls)

Create a new layer, named “controls”. Then, draw your control bar buttons that will trigger video to pause, play, rewind, mute and resize to fullscreen.

Convert all buttons to movie clips by selecting and hitting F8. Name each as you wish. Then in the properties window, set the instance name of each movie clip. Instance names of the buttons in our example; “pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” and “fullscreen_btn” in order.

Scene 1 > volume (layer:Layer1)

As you can guess, volume and fullscreen buttons must have different views when clicked. So, first, click on the volume button to edit further. Inside the movieclip, create two frames, one for mute, one for unmute.

Scene 1 > fullscreen (layer:Layer1 & Layer2)

Repeat the same process for the fullscreen button. Two parts of the fullscreen button, the arrow and the rectangle is split to two layers in my example. You are totally free on that.

Scene 1 (layer:controls)

For the scrub bar, you will draw 2 thick lines, one long and horizontal, and one short and vertical. Convert each line you drew to movieclip by selecting and hitting F8. Set the instance name of the long line, which will be used as the video timeline, “mc_track”. Instance name of the knob, the short line, can be set as “mc_knob”. Finally, select both movieclips together and hit F8 to merge both into one movieclip, which we named “mc_scrubber”.

Now, select all movie clips together ( Shift + click each one ) and hit F8 again to merge all movie clips in one clip. Name it “mc_controls”.

Scene 1 (layer:video)

Now, create a new layer, named “Video”. Open the components panel or hit directly Ctrl+F7 and drag the MediaDisplay component to the newly created layer. For the video to show up in the whole screen of video player, you must resize the component to fill all white area. After resizing, click on the MediaDisplay component and open the component inspector tools ( Shift + F7 ). In the parameters tab, uncheck “Automatically Play”, “Use Preferred Media Size” and “Respect Aspect Ratio”. You can use it “Automatically Play” checked if you want that way.

Scene 1 (layer:stroke)

For the video screen to be more stylish, create a new layer over the “video” layer, name it “stroke” and grap the rectangle tool to draw a rectangle ( black + 1 px border ) with the same dimensions of MediaDisplay component. This is to cover the component with a stroke around. Now, we have a better video player look.

ActionScript Part:

Scene 1 (layer:actions)

Actionscript part is the important part to add the functionality to our design. First, we begin with defining the relative path of the video file. Create a new layer, named “actions”. Click on the first frame and open the actions panel. Type the following code to define the FLV address. Keep in mind that, this video player is only able to play FLV files.

The path, “video/video.flv” is the relative path for the video file, named “video.flv”. “FLV” expresses that the video player will be used to play FLV files. The other option is “MP3″.

Scene 1 > mc_controls (layer:othercntrls)

Now time to add “actions” for the control buttons. Click on the “mc_controls” movie clip, that must be in “controls” layer normally. Click twice to edit this movie clip, Inside “mc_controls”, create 3 layers and names in order: “progress”, “actions”, “othercntrls”. Put all the control bar buttons (”pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” and “fullscreen_btn” ), created before, into “othercntrls” layer. “actions” layer again will keep all the actionscript and “progress” layer will hold the scrub bar for the video player.

Click here for more about this step.

Scene 1 > mc_controls (layer:actions)

Now, click on the “actions” layer, open the actions panel for this layer (F9). Add the following code into actions panel.

video = _root.video;
//play button function
play_btn.onRelease = function() {
video.play();
};
//pause button function
pause_btn.onRelease = function() {
video.pause();
};
//fullscreen function
fullscreen_btn.onRelease = function() {
video.displayFull();
toggleFullScreen();
};
 
//rewind function, stop(0) can also be used.
rewind.onRelease = function() {
video.play(0);
};
 
//mute and unmute
mc_volume.onRelease = function() {
mc_volume.play();
};
 
//This part is for the fullscreen function
Stage.scaleMode="Scale";
Stage.align = "TC";  //T:top, C: center
function toggleFullScreen(){
if(Stage["displayState"]=="normal"){
Stage["displayState"]="fullScreen";
fullscreen_btn.gotoAndStop(2);
}else{
Stage["displayState"]="normal";
fullscreen_btn.gotoAndStop(1);
}
}

Scene 1 > mc_controls > volume (layer:Layer1) & Scene 1 > mc_controls > fullscreen

For the volume button and the fullscreen button, only the first frames of those movieclips must be appearing on the screen if not clicked. When those buttons clicked, movieclips must play the second frames and stop there. To do that, add a stop function into the every frame of fullscreen and volume movieclips. In the code above, it can be seen that clicking the button, will play those stopped movieclips, meaning the second frame will appear on screen.

Scene 1 > mc_controls > volume (layer:Layer1)

For the volume button, to mute and unmute the sound. We will add two pieces of code after stop function in actions panel, that changes the state of sound for that frame.

For frame 1, put the following code into actions panel. When this frame plays, sound will be unmuted.

stop();
_root.video.volume = 100;

For frame 2, put the following code into actions panel. This frame will decrease the volume to zero.

stop();
_root.video.volume = 0;

In sum, we have a video screen, that has the path for the video file, a rewind button, a pause button, a play button, a volume control button and a fullscreen button. The only thing left is a scrub bar’s (seek bar) functions.

Scene 1 > mc_controls > mc_scrubber (layer:Layer1)

Scrub bar needs the following code. So, click on “mc_scrubber” movieclip and create a new layer for the actions. Copy and paste the following code, into the actions panel.

video = _root.video;
mc_knob.onPress = function() {
mdown = true;
this.startDrag(false, 0, 0, mc_track._width, 0);
};
mc_knob.onRelease = function() {
mdown = false;
this.stopDrag();
};
mc_knob.onReleaseOutside = mc_knob.onRelease();
this.onEnterFrame = function() {
if (mdown) {
dist = mc_knob._x;
pct = dist/mc_track._width;
newVol = pct*video.totalTime;
video.playheadTime = newVol;
} else {
dist = video.playheadTime;
pct = dist/video.totalTime;
newX = pct*mc_track._width;
mc_knob._x = newX;
}
};

That’s it. You must now have had a simple flash video player for your web site. This is my result:

More Features in Wow XML Flash Video Player. Check it out!

If you are unable to end up with a result like above or you are looking for a more advanced player, here it is. We have the Wow XML Flash Video Player. It’s just $12, including the FLA.

The video below, is set to auto-play:false. Preview image is set. In-video ad is set. Pre-roll video ad is set. Post-video screen is enabled. Click here for an auto play version.

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 .

No Follow Concept
“No follow” tags were a protection considered to fight blog spammers. The concept for the attribute value nofollow was designed by Google’s head of webspam team Matt Cutts and Jason Shellen from Blogger.com in 2005 [wikipedia]. Since then, bloggers around the work use this tag/attribute to fight spam and spammers know that nofollow tagged links are useless.

So why we follow ?
It is simple. We do want your comments and we want to contribute to your link popularity in exchange. Actually there is more than this reason, you can also read this article: 13 reasons Why No Follow Tags Suck

Comments on all of our posts appreciated!

Thank You!

“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

For some IE bugs and differences, you may not see the IE reflection of your javascript code rendered in Mozilla, so you better see the test results using the internet explorer. I’ve googled if there is any kind of program doing that and the firebug was the answer again. According to Google’s results, there is the firebug lite, which you can include inside your website’s head tags and have the same firebug extension in Mozilla, in Internet Explorer.

Firebug Lite Usage

Just add the following code inside your page’s head tags and launch it using Internet Explorer. Firebug console must be visible at the bottom of the page.

<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js" type="text/javascript"></script>

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.

Usually, problem is related to IE6’s rendering engine.  One of the most common problem with IE6 is that it doesn’t render the negative margins as IE7 and Mozilla does. Negative margins is rendered hidden out of the layer in IE6.  Setting overflow to visible does not work and you go crazy.

The work around, making the negative margins visible, is so simple, it is even one of the simplest work arounds of the problems in IE6. Just add position:relative to your element with negative margins. This is it. Enjoy.

position:relative

Visit this page and download “corner.zip”. In the zip file, there are few javascript files that you can have some other effects with, but if you just want rounded corners, copy justcorners.js and reference it inside your head tags.

...
<script src="http://www.wowebmaster.com/demo/justcorners.js" type="text/javascript"><!--mce:0--></script>

Then, add a class into your image tag as it’s done in the following code.

<img class="corners iradius12" src="http://www.wowebmaster.com/demo/corner.jpg" alt="" width="561" height="353" />

Corner radius is set by the second class, which is “iradius12″ above. If you want greater radius, use highger values after “iradius”. e.g. iradius15, iradius25, iradius30…

See more examples at: http://www.netzgesta.de/corner/