Back with the new website and theme!

After a long time, I finally updated my website. There are new functions as well as a new drupal theme. I hope it will be pleasure for your eyes. Let's talk more about this new drupal theme...

I want to write down, how I built this theme and some bits about features on this site. Anyway, this site is still under development...

USABILITY

I really like making sites more usable so that all users knows where to go and how to use it.

hover over logo feature
If you hover over logo, you can see little text, saying 'home'. I found this feature on youTube and I realy like it. Better than showing another link to home I think.

I used JQuery (which is already built in Drupal from version 5) to achieve that.

Here is the html code:

<h1 id="logo">My Logo</h1>
<div id="home-tip"></div>

And the JQuery code:

  jQuery(document).ready(function() {
    $("#logo").hover(function(){
      $("#home-tip").html("home");
    },function(){
      $("#home-tip").html("");
    });
  });

This JQuery code I included inline into my page.tpl.php file. And that's it. Simple and powerful ;)

Back to TOP
This is another nice feature which improves usability on your site. Many times forgotten by designers which is quite shame, I guess that you will use it if you hit the bottom of this web page. It's very easy to implement with just two lines of code in your html using HTML destination anchors.

<!-- place this code anywhere where you want to have a top of your page (where to jump after clicking the link 'Go to TOP') -->
<a name="#top" />

<!-- this is the link -->
<a href="#top">Go to TOP</a>

Collapsible code tag
As you can see, all code listings are collapsible. This was done with JQuery again and without hacking codefilter module.

Here is the example how codefilter module highlights php code:

<?php
  $message
= 'Hello World';
 
// Print it out
 
print $message;
  exit;
?>

I used code filter module because it can highlight php code and works as a input filter.

So here is the JQuery script which will do the job:

$(document).ready(function() {
  $('div.codeblock').prepend("<h5>Click here to see the code</h5>");
  $('div.codeblock> code').hide();
  $('div.codeblock> h5').click(function() {
     $(this).next().slideToggle('fast');
  });
});

Codefilter automaticaly creates a div with class 'codeblock' around the 'code' tags. So, with jquery we prepend another html element 'h5'. The 3rd row tells browser to hide every tag 'code' + it's content and is inside 'div' with class 'codeblock'. 4th row makes the 'h5' tag clickable. You can add here your own rows such as fading, easing, etc...

And to make it pretty, you will have to add some css styles. My looks like:

div.codeblock {
  background-color:#f8f8f8;
  border:1px solid #CCCCCC;
  padding:5px;
}

div.codeblock h5 {
  margin: 0px;
  padding: 0px;
  padding-left: 20px;
  font-size: .8em;
  font-weight: normal;
  text-decoration: underline;
  background: url(images/source.gif) no-repeat;
  color: #707070;
  cursor: pointer;
}

div.codeblock code {
  padding: 5px;
}

And that's the trick. :)

Next post will be about comments... :)
If you have any questions, ask in comments.




Need Drupal Theming? Hire us