post

The steps I took to customise my Thesis theme

NOTE: As I’m not using the Thesis theme anymore, I’ll not be in a position to give any more reply and help in this area. Please accept my apology. However, the steps below should still work for Thesis 1.5.1. Here’s a screenshot on my customised Thesis theme: http://www.melvinneo.com/wp-content/uploads/2009/06/thesis.gif

If you’re using the Thesis theme and are not doing any customisation to it, you’re not doing any justice to the immense flexibility of the theme! In fact, I think you’re simply wasting your money. Granted, I know not everyone of us is as tech savvy, but at least do something to it so that your theme doesn’t look like one of those free themes!

To help you guys kick-off some customisation juice in you, I’ll show you step by step what I did to customise my theme to make it look like the current one:

1. Install the plugin, “Thesis Open Hook

When you install it, not only the “Thesis Open Hook” plugin will be installed, the plugins “Thesis Custom Styling” and “Thesis Custom Programming” will be installed too. You need the latter two to do the changes I mention below.

2. Add a pinstriped image to the background

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in or copy and paste the following CSS codes:

/* Body and Background */
body.custom {
background: #ffffff none scroll right top;
background-image:url(i/bg.png);
background-repeat:repeat-x;
}

Note that ‘i’ is the folder where I put the ‘bg.png’ file. You do not have to name your background file, ‘bg.png’. Just name it anything you like and make sure you change the codes accordingly.

Click on the “Save Settings” button to save your file.

*3. Add a custom header image to your blog

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in or copy and paste the following CSS codes:

/* Header Image */
.custom #header #logo a { display: block; height: 180px; width: 915px; background: url(i/melvin-header.jpg) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header {border-bottom:none; padding:0}
.custom #header { padding: 0;
}

Note that the width of the image is dependent on the column and sidebar sizes you’ve selected. And ‘i’ is the folder where I place my ‘melvin-header.jpg’ file. Again, the header file can be any name. Just make sure you change the codes accordingly.

Click on the “Save Settings” button to save your file.

4. Add 2 borders – 1 dark grey and a ligher shade of grey

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in the following CSS codes:

/* Content Container */
.custom #container {
margin-top: 1em;
margin-bottom: 1em;
padding: 0.6em;
background: #333333;
border: 0.3em solid #565656;
}

#333333 will output the dark grey and #565656 the lighter shade of grey border.

Click on the “Save Settings” button to save your file

5. Bring the header image above the navigation menus

Open up the ‘custom_functions.php’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Programming”. Find the last immediate empty space and key in or copy & paste the following codes:

//Move Header Up
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’); add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

Click on the “Save Settings” button to save your file.

*6. Apply different colour codes to the navigation menu

Open up the ‘custom.css’ file by clicking on the link, “Appearance” followed by, “Thesis Custom Styling”. Find the last immediate empty space and key in or copy & paste the following CSS codes:

/* Custom Navibar */
.custom ul#tabs {border-bottom:none; border-left:none; background:#333333;}
.custom ul#tabs li {margin-bottom:0; border:none; background:none;}
.custom ul#tabs li.current_page_item a {
color: #fff;
background-color: #333;
font-style:italic;
background-image: none;
}
.custom ul#tabs li.page-item-1 a {
background-color: #304860;
color: white;
}
.custom ul#tabs li.page-item-2 a {
background-color: #4890C0;
color: white;
}
.custom ul#tabs li.rss a { padding-right: 23px;
background: url(i/icon-rss.gif) no-repeat 97% 50%;
color: white;
}
.custom #tabs li a {
color: black;
text-decoration: none;
margin: 0;
padding: 7px 15px;
background: #EBF7FF none repeat-x;
}
.custom ul#tabs li a:hover {
background-color: #333333;
color: white;
text-decoration: none;
background-image: none;
}
.custom ul#tabs li.page_item a:hover {
background-color: #333333;
background-image: none;
}
.custom ul#tabs li.rss a:hover {
background-color: #91918f;
text-decoration: underline;
background: url(i/icon-rss.gif) no-repeat 97% 50%;
}

Click on the “Save Settings” button to save your file.

Note that ‘i’ is the folder where I put the ‘icon-rss.gif’ file. Currently, I only have “Home”, “What About Melvin” and “Contact Melvin” links, therefore, the codes stop at 2. If you want to add more just change the following:

.custom ul#tabs li.page-item-3 a {
background-color: #4890C0;
color: white;
}

’3′ being the next page menu and ’4890C0′ being another colour code. Note that 4890C0 is the same as item-2. Therefore, it’s good that you change it to another one.

Have fun customising your Thesis theme! This is not brain surgery. Nobody will die when you make a mistake. :)

Best regards
Melvin Neo

* The ideas for Step 3 were taken from  www.howtomakemyblog.com and Step 6 from www.berchman.com

post

8 reasons why I don’t follow back

I find it amusing when people follow me on Twiter, they’d expect me to follow them back! And when they find out that I don’t follow back, very soon they’ll un-follow me. Please understand that Twitter is a social media site. If I find nothing in common with you, why must I follow you back and get ‘social’ with you? Oh please…. follow back is not an obligation.

I vet my followers manually. And if I don’t follow you back, here are some reasons:

  1. Your bio is a complete blank. There’s nothing about you, about what you do and where you’re from. Worse still, your profile picture is the default Twitter one-small-and-one-big-circle avatar!
  2. Your web bio is a link to an affliate site, some get rick quick scheme or pornographic site.
  3. You precede or follow every one of your tweets with a link to your own site.
  4. You consistently use vulgarity or foul language.
  5. You have thousands of followers and followings and yet less than a hundred tweets. It’s a dead giveaway that you’re using some bots to boost your follower’s count (a.k.a your ego).
  6. You joined Twitter for less than a month and yet have thousands of followers and followings. Another dead giveaway that your bot is in action!
  7. Your name is of complete opposite gender from your profile picture. Duh?
  8. We have nothing in common. So why bother?

I repeat. Twitter is a social media site. Not a place for people to flaunt their followers count. I’m not impressed with numbers. I’d rather follow someone who only has 50 followers and yet is an engaging Tweep than someone who has tens of thousands of followers but do nothing more than just tweeting power quotes or RT-ing other Tweeps. Remember the ‘social’ in social media sites!

Best regards,
Melvin Neo

PS:  The above 8 reasons are all that I can think of for now. Some may have slipped my mind. If you have more, please do not hesitate to add to it. Thanks!

post

Why A New Theme?

“Why a new theme?”

“I thought the previous theme looked pretty good?”

These are some questions I’ll be anticipating from people who have been reading my blog. So I might as well answer here first before you guys ask.

As much as I like the previous theme, it was NOT a premium theme. What’s a premium theme? A premium is a theme which is NOT free, and hence the word, “premium”. And because the theme I used was a free theme, the chances of other people using the same theme is high. And true enough, Last month, I got to know 3 new friends and guess what,  all 3 are using the exact same theme as I did! And all 3 of them live in the same country as me! By the way, I live in Singapore.

As a self-confessed -professed pro Blogger, how can I have a same theme like everyone else? Therefore I’ve decided to pay for a premium theme and customise it so that the chances of people using the same exact theme layout is close to zero. And guess what? I’ve found such a theme. And it’s called the Thesis Theme! It’s probably the most flexible theme in the world! Period.

For someone like me who designs and customises WP themes for hobby and for another source of income, I find the Thesis Theme is by far the easiest and the most user-friendly personal blogging theme till date. I will dedicate a few posts to this theme in the near future.

Stay tuned! :)

Best regards,
MelvinNeo

post

How to create strong password

I’m not sure about you, but I certainly do not want to type a love story whenever I have to fill up a password field. But I also do not want my password to be so easy that even a pre-school kid can guess what it is.  And, if possible, I don’t want to use the same password on different sites, because if one is compromised, then my entire online identity is exposed.

Here’s a tip I’d like to share with you guys on how to create super strong passwords for different websites and yet you only have to remember 4 characters!

  1. Decide from the onset:
    • How many characters you want to use for your passwords. Personally, I feel between 8 and 9 will suffice.
    • 4 common characters – preferably symbols – you want to use across all the websites which you have to key in password. Symbols are those characters you see that are above the numbers on your keyboard and also to the left of the ‘Enter’, ’1′ and right ‘Shift’ keys. Eg: ~!@#$%^&*()_+”:;’
    • Where you want these 4 common characters to be: All at the beginning? All at the end? Or two in front and two behind? It’s up to you. But it must be consistent across all the websites.
  2. Here comes the easy part! Construct the rest of the characters using the website name (URL).
    • Take the first *5 characters of the URL where you want to use the password. *This number is dependent on how many characters you have decided to use for your password.
    • If the URL has less than 5 characters, then use the whole URL – including the .com, .net. .org., etc.

Here are some examples:

Example No. 1 – My blog: www.melvinneo.com

  1. I’ve decided to use 9 characters.
  2. The 4 symbols are: !@)( and I’ve decided to put in at the beginning.
  3. The first 5 characters of my URL is melvi (Ideally, you should also replace e with 3, i with 1, a with @, s with 5, and o with 0). I’ve also decided to capitalize my first character, M. Therefore it will be M3lv1
  4. And now my password becomes: !@)(M3lv1

Example No. 2 – www.me.com

  1. I’ve decided to use 9 characters for all websites.
  2. The first 4 symbols and placement are the same for all websites. Therefore, it’s: !@)(
  3. The first 5 characters of the above URL is: M3c0m
  4. And now my password becomes: !@)(M3c0m

Example No. 3 – www.hotmail.com

  1. I’ve decided to use 9 characters for all websites.
  2. The first 4 symbols and placement are the same for all websites. Therefore, it’s: !@)(
  3. The first 5 characters of the above URL is: H0tm@
  4. And now my password becomes: !@)(H0tm@

See? The first 4 characters are essentially the same. And the last 5 represent the URL. Now you can have different passwords for different websites and still can remember all of them! It can be easy to create and remember strong passwords if you just get a little creative.

Try it for yourself and test it using the password meter here.


post

Should I go for cheap web hosting?

You know, even as an owner of a web hosting company, I’ve asked that question before!  In fact, I was tempted once to switch my personal, non-business websites to a cheap web hosting company. Some of the web hosting services offered by my competitors were so cheap they were way below my cost.  So I’ve decided to ‘fall’ for the temptation and switch some of my personal, non business sites there.

Boy, did I regret my decision! The site was always congested.  Pages took forever to download.  Ok, I exaggerated here a little. Not forever, but still too long for my liking.  Initially I thought, “What the heck, these are my personal sites. Why border about download speed?”  But then again, even if they were my personal sites, they’re still meant for people to see.  If not, why even bother to put it up on the worldwide web?  And if people could access my website, and if they observed that my websites were slow to download, it wouldn’t reflect very well on me, would it?

Well, I bit the bullet and quickly cancelled the account and switched my personal sites back to my own company’s  servers.

Phew!  What a breath of fresh air.

No.  I’m not promoting my company.  I just find that it’s not worth saving a couple of cents a day in exchange for a bad reputation.  Whether a site is personal or business-related, personal reputation is important; and we shouldn’t give it to the cheapest vendor!

post

Why do I need Web Hosting?

If you want a web site, you will need web hosting. Basically, web hosting provides a way for people to access your web site through the internet. Without it, there would be no way for people to see the page.

To Understand Web Hosting, You Need To Know What a Web Page Is

A web page is, simply put, a file. When you or your designer builds a web page, you or they save it as a file on a computer.  If the file remains on your computer, the only way anyone will see if is if they’re snooping around a bit. [Read more...]