DODSKI

I am active at my other site!

Ritchie — Fri, 10 Apr 2009 15:23:26 +0000

It’s been so long since my last post here in my blog but those days and months have passed I’ve been currently active at my personal website. Tutorials, inspirations, reference and discussion will be posted at my personal website and to all those have subscribe here in my blog you can visit my website and subscribe to my feeds to receive latest updates. The url of my personal website is www.ritchielinao.com. Thanks for the time visiting here in my website and wish you good luck.

WP List Page with CSS Navigation

Ritchie — Wed, 04 Feb 2009 09:12:05 +0000

When I was making one of my project, I was wondering how can I make an Active Menu using wp_list_page function. The navigation I made was an image and it has a different angle. I was thinking on how can I make it active using wp_list_page function without using the manual template for each page. And I was thinking what if I should try using the meta function for custom field in WordPress. And when I tested on how to make an active page with wp_list_page and CSS, the end result was a successful and it is time for me to share to you on how I can make an active menu with wp_list_page function with CSS.

Step 1
The code bellow is the function on how to display list of pages of your WordPress blog/cms. And I have separate one menu for the Home page.


	Home

Step 2
As the default class name for the wp_list_page they have set page_item, page-item-1 and current_page_item. The page-item-1 is set for the menu Home and the rest will be different coz it is dynamic. The number of page-item for the wp_list_page is not random. So lets start the coding for the CSS and I will use three menu for wp_list_page for you to use as sample.

/*Menu for Home*/
#navigation ul li.page-item-1 a{
	background:url(images/home.png) no-repeat left top;
}
#navigation ul li.page-item-1 a:hover{
	background:url(images/home.png) no-repeat left bottom;
}
body#mainPage ul li.current_page_item a{
	background:url(images/home.png) no-repeat left bottom;
}

/*Menu for About*/
#navigation ul li.page-item-2 a{
	background:url(images/about.png) no-repeat left top;
}
#navigation ul li.page-item-2 a:hover{
	background:url(images/about.png) no-repeat left bottom;
}
body#aboutPage ul li.current_page_item a{
	background:url(images/about.png) no-repeat left bottom;
}

/*Menu for Contact*/
#navigation ul li.page-item-3 a{
	background:url(images/contact.png) no-repeat left top;
}
#navigation ul li.page-item-3 a:hover{
	background:url(images/contact.png) no-repeat left bottom;
}
body#contactPage ul li.current_page_item a{
	background:url(images/contact.png) no-repeat left bottom;
}

Step 3
As what I have in my previous tutorial that we are going to give the body an ID Name. Let’s now make a meta function for custom field of your active menu.

ID, 'body-id', true)){; ?>


/*Default ID for the main page*/

Step 4
Login into your WordPress back-end, edit each of your pages to add a Custom Field for the body by inserting body-id in the name field and input a value for the ID name of your body such as what you have made in the CSS.

CSS Active Menu

Ritchie — Thu, 29 Jan 2009 06:58:46 +0000

For being very busy at work and got lazy sometimes, this new tutorial will help you on how to make an active menu for your website. This tutorial is good for static and dynamic website, depends on how your gonna use it.

For this tutorial, I’ll be using one of my CSS Navigation tutorial. Let’s choose CSS Advanced Navigation. And I’m gonna copy the css code for home navigation.


/* -- Normal Menu that is not active -- */
ul#navigation li.home a{
background:url(09.jpg) no-repeat 0 0;
}

/* -- Hover Menu that is not active -- */
ul#navigation li.home a:hover{
background:url(09.jpg) no-repeat 0 -30px;
}

And for you to make a active menu you need to give your HTML body an ID, for me I’ll name it mainPage. For class? Don’t know if it will work coz I haven’t tried it before.


/* -- Active Menu for a current page -- */
body#mainPage ul#navigation li.home a{
background:url(09.jpg) no-repeat 0 -30px;
}

Why body#mainPage? To make sure that you are calling the HTML body ID. And don’t forget to call the anchor text “a” for you to enable active menu.

Dodski Version 7 together with WP 2.7

Ritchie — Wed, 21 Jan 2009 15:51:55 +0000

Damn that was a long time since my verson 6 of Dodski was online. And it’s been so long with no posting article and tutorials here in my blog. I got busy because of work, planning for this new design, and other personal stuffs and projects. I do have lots of tutorials coming up my head but I just don’t have the time to make one. Lazyness is part of it. I also have one big project coming and i’m gonna be busy again. Hope I can create my own new css tutorials soon. I’m going to make lots of css tutorials coz I also want to share of what I have learn through self study.

My WordPress is now version 2.7 and it’s a relief that I have switched to a latest version so it would be easier for me to navigate, faster, very refreshing color scheme. heheh My plugins are updates, and others were deleted because I no longer need it.

With new Design for the main page, now the blog is same as my main page and a new tabular layer at the sidebar, Twitter switched to a one line post, Flickr is removed, added new search tool for you to search entries in my blog, and Cform plugin in my contact form to be added soon.

WordPress as a CMS

Ritchie — Mon, 06 Oct 2008 07:56:56 +0000

Finally I have made my own WordPress as a CMS. The title of the site is my full name. Visit www.ritchielinao.com and take a look. For lock of updates here in my blog, I’ve been researching for a good function reference for me to use by customizing WordPress into CMS. It really took me so long to customize the template coz I need to test the functions if it’s working fine. I made the site only for my personal, freelance and life stream blog. The portfolio I showcase in my new site are websites. There will be no Photo Manipulation and Illustration in the new site.

PBA 2k8: Finalist for Best Blog Design

Ritchie — Sat, 20 Sep 2008 16:01:26 +0000

WOW!! I can’t believe it guys. I’m one of the finalist for Best Blog Design at Philippine Blog Awards 2008. This is exciting and cool, coz it’s my first time to join in this national contest.

I comment at the site and mention about money for the ticket. Well, I change my mind coz I’m just wasting my money to visit there. I’ll just wait for the final result and not to think too much and expect to win the contest. I’m already happy that my blog is one of the finalist. So LET’S GET IT ON!!! Hehehehe ^_^

Here are the nominees:
Accidental Rebel
Blog of a Freelance Web Designer
Dodski
Noel Perlas – Perlas Design Studio
OctTwelve
Pinoy Teens Online
Redberger
Stellify
Strawberry Colada
Stylemo
Tonet’s Daily
Well Whatever

Advanced Navigation

Ritchie — Tue, 16 Sep 2008 14:42:32 +0000

Today I’ll be teaching you guys on how to design and code advance css navigation. The navigation that I’m going to teach you is a glossy horizontal navigation.

If you haven’t read my basic css navigation tutorial, click on the link bellow to learn on how to make your own css navigation.

Basic CSS Navigation

VIEW DEMOAdvanced Navigation

Step 1
Open your photoshop and create new file. Set the width to width 500px and Height 30px. Press letter U in your keyboard to use shape tool but choose only the rounded tool and set the radius to 20px.

Step 2
Will now add new layer style for navigation. Go to blending option and choose gradient overlay. You can give any color you want for your glossy navigation so before you choose the right color make sure that the two colors will almost match.

Step 3
Hold press CTRL and click on the layer to select a perfect rounded side marquee tool on your layer and then hold press ALT to delete the top part of the marquee. Don’t deselect the marquee as of now make a new layer above the first layer and go to your gradient tool to choose your own color.

Click the image bellow to enlarge.

Step 4
And now let’s create one part of the navigation to make it a glossy navigation. Repeat the same as above by holding CTRL on the first layer, create new layer and put it above the second layer then delete the bottom part of the selected layer marquee.

Change the opacity of the layer 3 to 50% and set the layer property to screen.

Press CTRL+ALT+C to open canvas option and do the same option i did in the image bellow.

Duplicate your glossy navigation bar and do it same as the image bellow.

Step 5
Then let’s add some text as your navigation together with the hover effect. Make sure the text is aligned in the center.

What you see above there is only one hover effect so make more for the others and do the same bellow.

Step 6
Select one of the hover effect layers and go to blending tool then gradient overlay. The angle should be -90 degree and default gradient color, change the black to lighter one, change it to grey. And select overlay for the blending mode and opacity to 75%. To make your work faster for doing the same for the other hover effect layers, right click on the layer with the blending option settings and copy layer style then right click on the other hover effect layer and click on paste layer style.

Step 7
In this step will start coding in html. And what we are going to use is unordered list.


Home
About
Photos
Blog
Contact

Step 8
This next step is coding the basic in CSS code for the navigation. So read carefully especially the comment part.

ul#navigation{
	margin:0;
	padding:0;
}
ul#navigation li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
ul#navigation li a{
	margin:0;
	padding:0;
	width:100px; /*All link width are set to 100 pixels*/
	height:30px; /*All link height are set to 30 pixels*/
	text-indent:-2000px; /*Move your text link to 2000 pixels to the left*/
	float:left;
	outline:none;
}

Step 9
Let’s start inserting the image into your unordered list. If you notice the coordinates of 0 0 to -400 0; it is use to position your image navigation to display properly. The first digit is for the left position and the second digit is top position. I used negative coz if the position is set to 0 0, means the image is starting from the left part of the image navigation. So by displaying the second menu properly, you need to give it a negative coordinates for the left position. Then do it the same as the other menu but don’t forget using basic math for the positioning of your menu. Coz all width is set to 100 pixels.

ul#navigation li.home a{
	background:url(09.jpg) no-repeat 0 0;
}
ul#navigation li.about a{
	background:url(09.jpg) no-repeat -100px 0;
}
ul#navigation li.photos a{
	background:url(09.jpg) no-repeat -200px 0;
}
ul#navigation li.blog a{
	background:url(09.jpg) no-repeat -300px 0;
}
ul#navigation li.contact a{
	background:url(09.jpg) no-repeat -400px 0;
}

Step 10
For the final step, let’s start the hover effect of the image navigation guys. Just copy the code above and paste it in a new line then change the second digit to -30px and then it’s all done. You advanced navigation is ready to go.

ul#navigation li.home a:hover{
	background:url(09.jpg) no-repeat 0 -30px;
}
ul#navigation li.about a:hover{
	background:url(09.jpg) no-repeat -100px -30px;
}
ul#navigation li.photos a:hover{
	background:url(09.jpg) no-repeat -200px -30px;
}
ul#navigation li.blog a:hover{
	background:url(09.jpg) no-repeat -300px -30px;
}
ul#navigation li.contact a:hover{
	background:url(09.jpg) no-repeat -400px -30px;
}

Concept and Design Tips

Ritchie — Thu, 31 Jul 2008 02:27:58 +0000

For beginners this post will be a good tips for you to learn the easiest way on how to make a concept when it comes to website. Visit a CSS Showcase website and list everything what you like in the website and how they do it. Make a research if you can’t solve one part of the problem. Visit some good site for tutorials. Gather lots of information and make a notes. Visualize your concept through hand drawn sketch. And now lets start the step by step concept of your website.

Header
When you conceptualize your header you need a good reference. Most of the header design are just plain white or gradient. Others are grungy effect background as a header. Your logo should be simple or creative and it should fit in your header background. Others have a thick border on the top header. And if you make one don’t copy the concept of their header just used it as a reference and make your own original design.

Navigation
This one is kinda hard to think, coz you need your navigation to look casual and user friendly. Most of the navigation has little detail of each menu. Don’t design a navigation that is too small. If you design your navigation give it a size of 18-24 pixels, style should fit on your background header or the whole concept of your website.

Sidebar
This part of the site is one of the most useful for a website to have. Sidebar is use to display latest updates, category, site links, advertisement, meta log-in, latest events and photos, flickr, and rss/mailing list.

When designing or arranging this part of the site, think of something that will make it commercialize, add some icons as a bullet or icons for each header title or background image. In your side bar, don’t make too much large font, just normal size or give it a limit of 18/24 pixels for the header title. Add some fancy hover effect of your link or just make it simple.

Search Bar
If you want to have a search bar on your website, and can’t think of some good concept in where you want it to appear. Look for a good reference. Some good site with search bar has a magnifying icon others don’t.

Contents
When making a concept for your contents, think of possibilities what user will read first in yourlanding page. And what you want to be featured in that particular layer.

Other contents don’t have write up contents on their landing page, just empty space or little introduction of their self/company.

Footer
The footer is very simple but the question is, how will you make a good concept design to make it eye catchy? But that’s up to you if you want it to be stylish in designing your footer. Mine is not stylish. Just simple plain black footer.

Overall
When making a concept always remember that every part of the site will match. Design should be aesthetically done. Your design can be done by abstract illustration, flash animation, typography, grungy texture effect and a design integrated with JQuery/MooTools AJAX.

Note: Visit 2008 design trends at Web Designer Wall by Nick La. To view a list of inspirational website.

Sozin’s Comet: The Final Battle

Ritchie — Fri, 25 Jul 2008 02:24:15 +0000

Book III of Avatar The Last Bender. Sozin’s Comet is been release as a two hour movie special. The series has finally ended.

Aang’s Avatar mode surrounded with Air, Flame, Water and Earth. This is how Aang wins the battle against the Phoenix King.

When the Sozin’s Comet have arrived, Fire Lord Ozai change his position as Phoenix King and give the position of Fire Lord to Princess Azula.

When Princess Azula was becoming the Fire Lord, Prince Zuko came to stop Azula and to take the thrown.

This scene is the fight of Sister and Brother.

This Five are the member of the Order of the White Lotus. Prince Zuko’s uncle is the one who plan to liberate the Earth Capital, Ba Sing Se, from Fire Nation rule.

Fore more detailed information of this series, please visit Wikipedia.

To jump in the summary of Sozin’s Comet click here.

Erika Sawajiri into Vector Illustration

Ritchie — Wed, 16 Jul 2008 02:52:13 +0000

Every time I’m not busy in the office without project, I always spend a little time editing a vector art of Erika Sawajiri. This new vector art will be added in my portfolio soon, but I need more time to enhance the vector art into a complete new illustration wallpaper that I’m gonna use in my desktop.