Free WordPress Themes Tips

How To Add A 3D Navigation Bar For The Catalyst Theme

Costa — Thu, 09 Feb 2012 09:04:10 +0000

The Navigation Bar of a WordPress Theme is, for some reason or another, one element that users loves to customize. Some will use a ribbon, some a wooden panel so on and so forth. For this short Catalyst Theme Tip, I will attempt to customise the Catalyst Theme navigation bar with a 3D image that will give the impression that it is hanging out from the whole layout.

What You Need To Add A 3D navigation Bar For The Catalyst Theme

The first thing you need is a 3D image. You can google for these images and there will be many good people giving them away for free. Find one that suits your need, re-size it with whatever image editor you are using, then save it.

That will be almost everything you need, but since I am doing this for the Catalyst Theme, it will be best if you have that too. Else you will have no idea what I am blabbing about.

Adding The 3D Navigation Bar In A Few Easy Steps.

Adding the 3D Navigation Bar to replace the default one in the Catalyst Theme takes only a few easy steps. The only codes you actually need are a few lines of CSS codes to properly align the image and the navigation links. I wasted some time in the video but the 3D Navigation Bar will be up and running in 5 minutes

How To Add Navigation Buttons For Catalyst Theme Navigation menus in a WordPress Theme is sort of a compulsory feature. Though there is noting in the books that says a Theme will not function without the navigations menu, logging in to a Theme without one will be like entering a room in pitch darkness. You will be quite...
25% Catalyst Theme Disccount Code A short shout to those who are still in their consideration stages of buying the Catalyst Theme. All discount codes will be expiring on midnight 31st. March 2011. On April 1st of 2011 ALL Catalyst Theme Coupon Codes will be de-activated. As a token of appreciation, Catalyst is making a...
How To Customize The Catalyst Theme From Scratch I have previously written many tips about customizing the Catalyst Theme. Whether it is a tip about the Catalyst Theme or any other Themes that I have used for that matter, I try to present them in a simple effective way so as not to confuse those who are new...
Catalyst Theme Discount Code For Easter TAKE ADVANTAGE OF THIS 2 DAYS EASTER OFFER FOR THE CATALYST THEME (UPDATED: CODE HAS EXPIRED) This 20 % discount offer is for 2 days only, from Saturday April 23rd – Sunday April 24th. 2011 in conjunction with Easter. Works with all Catalyst purchases including Developer Edition Upgrades. CLICK HERE...
Kubrik Theme – Adding Navigation Links After adding the sidebar to the Singles Post of the Kubrik Theme which comes in default with your WordPress Installation, there is another missin item that you might like to add. There are no navigation links in the Default Theme. The only link that your readers can click back to...

Using Cufon Fonts For The Catalyst Theme

Costa — Mon, 06 Feb 2012 08:07:11 +0000

If you have a fetish for fonts and the few hundred fonts available in the Google Webfont directory is not enough to satisfy you, then you need Cufon Fonts. Unlike Google Fonts where you can simply insert the link in your Wp Header to call up the fonts from the Google Font Directory, Cufon Fonts needs to be converted to javascript first before you can use them in your Theme. There are a few steps to go through before you can use Cufon Fonts in the Catalyst Theme.

Getting The Cufon Fonts Ready

The first step is of course to get the fonts you like. Download it, the unpack it to your computer.

Next, head over to Cufon Generator. Click on the first button to download the Javascript file to your computer. The filename should look like this. cufon-yui.js

Next, upload the font you want to use by clicking the “Choose File” button. You can leave of the options alone except remember to check the option that says “The EULAs of these fonts allow Web Embedding”

Acknowledge the terms, then click the blue button that says “Lets Do This”

You will get another file with your fonts name as the filename, e.g. “yourfontname.js

Uploading The Cufon Fonts To Your Server

Using your favorite FTP client, go to your root directory. For Catalyst users that would be your Dynamik directory or folder. Create a new folder named, js

Upload the 2 files you have saved to this new folder.

Using The Cufon Fonts In The Catalyst Theme

To use the Cufon Fonts with the Catalyst Theme, you cannot simply insert the query into the WP Header script in Catalyst – Core Options. Don’t ask me why, but it will not work. For the Cufon Fonts to take effect, you have to insert the codes into your custom functions file which is located under Appearance – Editor.

Open the custom functions.php and insert these codes.

function load_cufon_js() {?>

TAKE NOTE:

In the third line, replace the filename typoslabserif-light-300.font.js with the one you uploaded to your server. And also, you have to replace all instances of the font name, typoslabserif-light with the font name you are using.

You can keep replacing your original fonts with the cufon fonts anywhere you like by adding another line of codes with the ID or the Class of the elements you want to change. For example if you want to change the fonts for your content paragraph you can add a new line that says:

Cufon.replace(‘#content .post p, #content .page p’, { fontFamily: ‘typoslabserif-light’});

Save your changes and you should see Cufon Fonts in your Catalyst Theme.

Using Cufon Fonts In The Frugal Theme Cufon fonts are generated javascript fonts which you can use in your WordPress Theme even if these fonts are not deemed as web safe. Which means, if other computers do not carry these font type, they will still be able to see the fonts as it is and not revert...
180 Free Google Fonts For Your WordPress Theme Google Web Fonts started with 60 fonts. From then till now, the number of fonts made available have bloated up to a staggering 180 different variants. It was less than six months ago that Web Site designers have their creative talents frustrated by the limited number of fonts that are...
How To Change WordPress Theme Fonts First, there are 2 types of fonts. Serif fonts and SanSerif fonts. Serif fonts are fonts that have those “edges” and san serif fonts are those without. A good example of a serif font is New Times Romans while Verdana is a san serif. If you look in your WordPress...
Pretty Google Fonts For Your WordPress Blog A few months ago Google released it’s first batch of fancy fonts for public consumption through the Google Font Directory. The first batch of fonts choice was quite limited but Google being Google, expectation were high that more will be added. Indeed, more fonts has been added recently in conjunction...
How To Change Fonts For Twenty Eleven Theme The Twenty Eleven Theme uses the Helvetica Neue as the main font. Except for some special areas like blockquotes and such, the Helvetica Neue font is used everywhere. It is a nice and neat font and very suitable for blogs as it is a very readable font. However, it is...

Do You Need A Responsive Web Theme Design

Costa — Sun, 05 Feb 2012 06:22:45 +0000

Of late, responsive themes and designs have been hotly debated by webmasters. The main concern is, if their site’s or their theme’s design is not responsive, they will be losing out in more ways than one. This fear is rightly brought about by the increasingly or supposedly popular use of mobile devices to surf the web. Despite studies and researches done independantly which shows that only about 2 percent of the total Net users actually use a mobile device when they want to do some serious surfing and reading online, the worries about not have a responsive web design is troubling.

Responsive Web Design And Themes Will Be Inevitable

Frankly, I do not expect the use of mobile phones for producing contents will take off in a big way. The screen is really too small for anything productive. If anything, just typing on the mini screen is already quite tedious. If one were to write a thousand words article using a mobile phone or even a tablet it will be nerve wrecking. Mobile phones will thus largely be popular only for surfing the Net, checking emails, socializing and other more mobile friendly stuffs, like playing games.

However, the criteria here is not about the productive side. This can be done at home with their giant monitors or on the go with their laptops. The most important criteria here is about people using mobile devices to view what you have produced.

Though producing contents using a mobile device will not take off in a big way, viewing contents using mobile devices will. Smartphones are selling by the millions each year that it is almost inevitable that one day, millions will be surfing the NET with them even if not on a full time basis.

Are Responsive Web Designs Achievable

The technology is certainly available. With the advancement to CSS3, resp0nsive web designs can be created by anyone with the know how. There are however some food for thought and considerations for developers concerning the migration from the traditional design to one that is responsive.

Eric Hamn, the developer of the Catalyst Theme rightly pointed out in one of his Forum postings about this dilemma when the subject of making the Catalyst Theme responsive was brought up by users. His main concern was not whether he can make the Catalyst Theme responsive for I believe he certainly can.

However he stressed that in doing so, he will have to take into consideration where elements already added to their existing theme has a fixed width. If you have read up a little bit about Responsive Designs, you will know that this responsiveness is achieved by several new elements in CSS3 that makes the site shrinks according to proportions. Would it be possible to have those previously inserted elements that already have the fixed width attribute be responsive as well without any distortions? It is something that he is working tirelessly on.

The Future Of Responsive Web Design

It’s going to be something big. Chris Coyier a top authority in everything WordPress and Theme in a recent screencast talks in detail about responsive designs, how it is done and where it is going.

The full video can be downloaded in his post at CSS-Tricks.com – Braindump on Responsive Web Design

It’s quite a big download so I have downloaded the video, split it in 2 and uploaded to YouTube for your viewing pleasure.

PART ONE

PART TWO

How Safe Is Your WordPress Theme Design From Copycats Everyone who has been involved long enough in the Internet will know that nothing is safe in the virtual world. Your identity is not safe, your password is not safe, your credit card number is not safe, everything. Even your WordPress Theme Design that you have spent hours upon hours...
Does Theme Design Effect Blog Traffic Now, first of all, designs or whatever that involves designing or any kind of art can be a very subjective topic. Beauty is in the eyes of the beholder or so the saying goes. What might appear real appealing to me can actually be quite repelling in the eyes of...
Do You Need A Degree To Design WordPress Themes There was a time, not in the very distant past, that when you want to design a WordPress Theme which you can call uniquely your own, you will have to learn and memorize a bunch of html, css and php codes. For those who are not trained in this field,...
Win A Premium WordPress Theme From Unique Blog Design Those who are always on the look out for Free Premium WordPress Themes, you have a chance now to win one for yourself in the UBD 1 Year Anniversary Contest that’s in full swing right now. You have to be fast to act though as this contest ends on 11:59PM...
StudioPress Eleven40 Genesis Child Theme For Smartphones and Mobile Devices The Genesis Framework from StudioPress went responsive recently with the release of Genesis 1.8. The Genesis Theme can now adapt to different resolutions and screen widths without any distortions or cut off line. To take full advantage this new feature, StudioPress released the Eleven40 Child Theme which is the first...

How To Add Navigation Buttons For Catalyst Theme

Costa — Fri, 03 Feb 2012 12:55:37 +0000

Navigation menus in a WordPress Theme is sort of a compulsory feature. Though there is noting in the books that says a Theme will not function without the navigations menu, logging in to a Theme without one will be like entering a room in pitch darkness. You will be quite loss and finding your way ‘Home’ will be entirely dependent on the Back button of your browser. It is also said that search engines like Google loves well placed navigation links so their spiders have an easier time crawling your site.

Navigation Menus In WordPress Themes

In almost all WordPress Themes the navigation menu will be placed in the top most area of the Theme. Some will be above the header, some below the header. Then there are some who prefers the navigation links in their sidebars.

Most modern WordPress Themes has provisions to display 2 Navigation Menus. Some like to display both while others might just stick to one.

These are all individual preferences, so to each his need.

Different Types Of Navigation Menus

Navigation menu can be in many forms. The most common of course the the page navigations. These links to the various pages within your site of blog, the most common being the The Home Page, Archive Pages, The Contact Page and so on.

All these links will provide your readers an easy way to navigate around your site and when the need arises, they only have to click once on the Home Page Link to return to your Homepage.

Other than the Page Navigation Menu , there is the Categories Navigation Menu, which is also a very popular feature. These links provides easy access to all your post segregated by Categories so your readers will have an easier time looking for what they want.

Display Navigation Menu Using Button Images In The Catalyst Theme

The most common method of displaying the Navigation Menu is by using the Navigation Bar above or below the Header which can be rather boring. However with the acceptance of CSS3 by major browsers, there are many creative ways which we can use to display your navigation links or menu.

Here is one method using some simple html mark-up and some CSS3 codes to style them accordingly. It works in all browsers, including Internet Explorer 9.

Since I am using the Catalyst Theme, the tutorial below is done within the Catalyst Options. If you are using a Free WordPress Theme, then you will probably have to insert the markup into the various page templates, but it should work nevertheless.

Full credit goes to Tutorialzine for the post CSS3 Minimalistic Navigation Menu from where I learned the codes from and modified it a little to suit the Catalyst Theme and my layout.

As you can see, I have moved my sidebar to the left and floated the buttons to the extreme right. It is actually resting outside the content container. I have also made the position “fixed” so even when you scroll down, the buttons will remain in place. This is for the convenience of my readers so they will not need to scroll back up in case they want to visit my homepage or other pages after reading the post.

The first portion, these markup codes goes into Catalyst – Advanced Options – Custom Hook Boxes and hooked to ” custom_hook_after_after_header”

The reason I used the “after_after _header” hook is because I might want to move my Navbar 2 which I have relocated to above the header, back to below the header in future. If I hook it to just “after_header”, then it will disrupt the button images that I am about to create.

When you add the hook box, make sure you check all the custom pages you have created so the Navigation Buttons will appear in those pages. Also make sure you change the URLs in the codes so that it points to the intended pages.


    
	    
            Home
        
    

    
    	
            About
        
    

    
	     
            Archives
         
    

    
    	
            Privacy Policy
        
    

    
    	
            Contact us

The Second portion are these CSS codes which goes into Catalyst – Advanced Options – Custom CSS

/*navigation buttons*/

#navigationMenu {
	float:right;
	position:fixed;
	margin-left:880px;
	list-style:none;
}

#navigationMenu li{
	height:39px;
	padding:2px;
	width:40px;
}

#navigationMenu span{
	/* Container properties */
	width:0;
	left:38px;
	padding:0;
	position:absolute;
	overflow:hidden;

	/* Text properties */
	font-family:'Oswald',Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:39px;

	/* CSS3 Transition: */
	-webkit-transition: 0.25s;

	/* Future proofing (these do not work yet): */
	-moz-transition: 0.25s;
	transition: 0.25s;
}

#navigationMenu a{
	/* The background sprite: */
	background:url('images/navigation.jpg') no-repeat;
	height:39px;
	width:38px;
	display:block;
	position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
	text-decoration:none;

	/* CSS outer glow with the box-shadow property */
	-moz-box-shadow:0 0 5px #9ddff5;
	-webkit-box-shadow:0 0 5px #9ddff5;
	box-shadow:0 0 5px #9ddff5;
}
/* Home Button */

#navigationMenu .home {	background-position:0 0;}
#navigationMenu .home:hover {	background-position:0 -39px;}
#navigationMenu .home span{
	background-color:#7da315;
	color:#3d4f0c;
	text-shadow:1px 1px 0 #99bf31;
}

/* About Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
	background-color:#1e8bb4;
	color:#223a44;
	text-shadow:1px 1px 0 #44a8d0;
}

/* Archives Button */

#navigationMenu .archives { background-position:-76px 0;}
#navigationMenu .archives:hover { background-position:-76px -39px;}
#navigationMenu .archives span{
	background-color:#c86c1f;
	color:#5a3517;
	text-shadow:1px 1px 0 #d28344;
}

/* Policy Button */

#navigationMenu .policy { background-position:-114px 0;}
#navigationMenu .policy:hover{ background-position:-114px -39px;}
#navigationMenu .policy span{
	background-color:#d0a525;
	color:#604e18;
	text-shadow:1px 1px 0 #d8b54b;
}

/* Contact Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
	background-color:#af1e83;
	color:#460f35;
	text-shadow:1px 1px 0 #d244a6;
}

If you want to use the images I am using, you can save it from this location. It is almost the same as the one from Tutorialzine, except I photoshopped the colors and the Home button image.

Preferably, when you save and upload the image with the Catalyst Image Uploader, you should name the image as ‘navigation.jpg’ . Then you won’t need to change the URL in the CSS codes. But then of course, you are free to change whatever you like to make the Navigation Buttons unique to your Catalyst Theme.

How To Add A 3D Navigation Bar For The Catalyst Theme The Navigation Bar of a WordPress Theme is, for some reason or another, one element that users loves to customize. Some will use a ribbon, some a wooden panel so on and so forth. For this short Catalyst Theme Tip, I will attempt to customise the Catalyst Theme navigation bar...
Kubrik Theme – Adding Navigation Links After adding the sidebar to the Singles Post of the Kubrik Theme which comes in default with your WordPress Installation, there is another missin item that you might like to add. There are no navigation links in the Default Theme. The only link that your readers can click back to...
Numbered Page Navigation For Frugal Theme Numbered page navigation provides a better avenue for blog visitors who wants to dig deeper into your blog. The Frugal Theme utilizes the default WordPress page navigation links which shows a simple, “Next page” and “Previous Page” links. This limits the reader to navigate one page at a time and...
How To Highlight Certain Words in Your WordPress Blog A really simple tip for those who is entirely blind to html. There will be times when you want to highlight certain words with a bright background to emphasize the importance of the words. There are two ways to achieve this. One is to add another class in your stylesheet...
How To Add Colors To Your Theme Sidebar There are times when you would like to add some color to your WordPress Theme’s sidebar to make it more unique, especially if you are using a free Theme which many others are using. There are a few ways to go about adding colors to your sidebars. The easiest method...

Are You Obsessed With SEO?

Costa — Thu, 02 Feb 2012 04:19:49 +0000

If you have a web site, or a blog, following good SEO practice is good if not crucial, but being obsessed with SEO is, I think, not good. In fact I think it is very bad.

First what does SEO involve? It involves, first of all, keyword research. It involves building links. It involves a socializing. It involves writing. It involves coding.

After getting involved in all of the above, where does that leave you? What does that leave you?

You are left with a site or a blog that has not been updated for months. You are simply too involve in SEO to do anything else.

The Perils Of SEO Obsession

Being obsessed with a anything is always bad for your health. SEO is no different. It is a silent killer, killing you and your blog softly and siliently. Before you can say “glory hallelujah! I found it!” your blog, if not you, is already laying on the dead bed, breathing it’s last mortal breath.

Why?

Because of these 5 reasons

1. Being Obsessed With SEO Will Give You Sleepless Nights

And no amount of sleeping pills is going to help. The moment you lay down in bed, your mind starts to twist and turn, trying to conjure up some keywords that might have millions of searches per month but only 99 other sites are using it.

Your grey cells starts to boil trying to cook up a key phrase that tens of thousands key in each day in Google Search.

Before you know it, a new day dawns. You slumber out of bed, boot up your computer and the first thing you do is to key in the words you have conjured up last night into your recently purchased $187 keyword research tool which promises that you will make thousands after using it for one week.

The results shows that your “highly imaginative” keywords is already being used and ranked by 99,999,999 others.

How unflattering.

How discouraging.

It’s going to be another sleepless night.

2. Being Obsessed With SEO Drains Your Bank Account

You start spending all your hard earned money on scripts, programs and membership sites that does all the submissions under the sun needed to boost your sites SEO. You feel you are losing out to your competitors if you do not spend enough to beef up your arsenal of SEO tools and services.

No scripts are too expensive for you.

No services are too costly.

You must process the best in order to compete and stay competitive.

3. Being Obsessed With SEO Drains Your Physical Resources

You become a master of multi tasking.

While one window in your PC is humming away running your expensive script doing all the automated submissions for your recently found keywords to all the directories in the Net, you are buzy in another window or two commenting on other’s blogs, tweeting your links and facebook paging your sites.

You miss your lunch.

Then you miss your dinner as well.

By the end of the day, you are reduced to a pathetic blurry eyed walking zombie.

4. Being Obsessed With SEO makes You Anti Social

Since you became obsessed with SEO, have you counted the days you last had a beer with your friends?

Of had sex with your partner?

5. Being Obsessed With SEO Makes You Petty, Picky And Agitative

Once SEO Obsession takes over your mind, body and soul, you will become very picky. You must pick a Blog Theme that has concrete and fail-prove SEO features.

Every H tags must be in the right place. Every line of codes must be clean and validated. Every page must load at the speed of light.

One little misappropriation found in the Theme that is deemed not on par with your stringent SEO standard, you become very agitated. You start shouting to the Theme’s developer, complaining about the non SEO compliance. You want your money back.

How To Get Rid Of Your Obsession With SEO

Like being addicted to drugs, ridding yourself from the unhealthy obsession with SEO is not an easy task. The fear of losing out once you stop all the ongoing SEO practices is hard to overcome. Your addiction to checking your stats and rankings every half an hour will be hard to defeat.

You can only try.

Try to stop whatever SEO you have been doing . Just concentrate on the basics of what is available and what you know.

Try writing and adding some contents to your blog.

When you see the first ten hits to your written contents, half the battle is won.

When you see your first Adsense click, three quarter of the battle is won.

When you make your first dollar, the battle is finally over.

You have won.

You now realize that even without spending all your time and money being obsessed with SEO, you can still survive on the very basics.

Image: Stuart Miles / FreeDigitalPhotos.net

So Now SEO Is Important Somewhere along the earlier stages of my blogging life, I decided that blog gurus are not telling me the truth about building traffic to my blog. They are adamant that if you write good quality articles, every thing esle will fall into place. People will start spreading the word around...
Long Tail Keywords Long Tail Keywords, just in case for those who are still wondering, are words stringed together to create a phrase that contains your keywords. It would be more appropriate if one calls it Long Tail Keyword Phrases instead of just keywords, but somehow, people prefer to omit the word “phrase”....