Screenshot of the Graphical Grub

Step 1 : Download the required files

Step 2) Install and configure the patched gfxgrub

Step 3) Configure grub to use the theme file

If everything worked fine, send me a Beer or still, you could send in your comments below !

Go ahead ! Search over the internet and make your own theme, and if you do that, do send me a copy too

Despite the panic created by the scheduled heavy power cuts ( reaching upto 16hrs/day ) , i now feel it’s one of the best things that has happened since my graduation !

Having the time to reconnect to oneself, more specificially with my parents, i owe a real lot to the unmelted Snow Caps up in the mountains somewhere.

Enjoying the privilege of sunshine, coffee, oranges and hearing to what “my parents were up-to”, back when they were my age, isn’t something i’m guaranteed to have any random Wednesday

Browsing through my past photographs ( while cursing aside for not having access to my recent “digital” ones ) , walking through the neighbourhood, speaking to elders/friends….

I guess everyone needs a break once a while. Thanks Power Cuts ! …. i’m having a life, and yes ! Thanks to maximoox and Youtube once again, for the almost forgotten video below ! Wear Sunscreen !

[........] I’m going to let u in now dear 08, u’ve got quite short span than mine, so make the best, see things around, (try)live good, cuz ur cousin 2009 is on the way. Live while u can, for an year [...........]

2008 was a hell-lot-better, definitely had a gr8 time. Collected a lot of gr8 memories.



Being in the OLPC Nepal Team, office office experience , moving on to my own domain, completing my Bachelors degree, GRE pain-in-the-ass ( not worth bearing ) , Powercuts …….. and everything else that i shouldn’t be announcing online, yep everything rocked !


December was really cruel on me though, didn’t let me have even a single blog post, hehe !


Stay tuned though,  as i intend to post on computational art mainly this upcoming year. I already am making significant progress in Blender and Processing, will definitely post here after i make something decent enough


Let’s see if January has pity on me. ( bohooo… i still have to make the contact and showcase pages…. )


Once again i wish everybody a Happy New Year. Set this year on fire !

1. Like always begin with clean markup.

I prefer using unordered lists for the menu items, it makes a semantic markup too.

<h2>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
     </ul>
</h2>


Make sure you have included the <ul></ul> inside other tags. Anything would do. I have used <h2></h2> above. We will need this later, as it will serve as the container for the menu items.
I’m using only a two item menu, but that will show the trick.

2. Add classes to the menu items to get the CSS hooks on…

Add classes to the items, so that you can manipulate them through CSS later

<h2 class="menu">
     <ul>
          <li class="home"><a href="#">Home</a></li>
          <li class="contact"><a href="#">Contact</a></li>
     </ul>
</h2>

Add the following to your CSS file
h2.menu { margin:auto; width:280px; } /* Change the values as your menu requires */
h2.menu ul{}
h2.menu li{list-style:none;}
h2.menu li.home {width:140px;}
h2.menu li.contact{width:140px;}
This should set-up your menu. Now, on to the exciting part.

3. Add Image Replacements for the anchor, with the “out” images.

Use CSS to fill the menu items with images, make sure to check the image path.


h2.menu li.home a{background:url(../images/home.gif) no-repeat; width:140px; height:90px; display:block;}
h2.menu li.contact a{background:url(../images/contact.gif) no-repeat; width:140px; height:90px; display:block;}


The menu is now displayed with it’s normal “Out” state.

4. Add Image Replacements for the anchor , but on :hover for container, with the “blur” image.

h2.menu:hover li.home a{background:url(../images/home_blur.gif) no-repeat;}
h2.menu:hover li.contact a{background:url(../images/contact_blur.gif) no-repeat;}

As you can see, the menu is already coming to life, with the blurs on rollover.

5. Finally, add Image Replacements for the :hover for anchor, with the “over” images.


h2.menu li.home a:hover{background:url(../images/home_over.gif) no-repeat;}
h2.menu li.contact a:hover{background:url(../images/contact_over.gif) no-repeat;}

Once again make sure that your image paths are correctly replaced, else the mnu might not work.

6. Optionally, you can use the invisible span technique to get rid of the text in the menu.

Add the following to the CSS file
.invisible{display:none;}
and following changes to HTML

<h2 class="menu">
     <ul>
          <li class="home"><a href="#"><span class="invisible">Home</span></a></li>
          <li class="contact"><a href="#"><span class="invisible">Contact</span></a></li>
     </ul>
</h2>


Voila, the menu is now fully working. Make sure, that the CSS styles are written in the order presented, else the menu might not work.


To remind, you can download the source and get your hands dirty.


Hope you liked this short tutorial. Please, i need feedbacks

Will charge up slowly and steadily.