Hi there...
My name is Marek Sotak and I am a freelance drupal developer, consultant and designer based in London. I have more than 7 years of experience creating customized web applications for clients.
My areas of expertise include graphic design, custom websites, and Flash applications. I also specialize in Drupal, a highly customizable and robust content-management system. Click here to contact me
I am able to outsource and manage big drupal projects.
Popular content
London Drupal training
Are you looking for a Drupal training course in London? Let me know and if there will be enough attendants we can organise one.
Contact me
Twittering
- Twitter is loading...
Back with the new website and theme!
Submitted by sign on Sun, 07/22/2007 - 11:00.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.
- 993 reads
Delicious
Technorati
Comments
...
It is a theme of epic proportions!
Cool theme, and nice
Cool theme, and nice graphics!
Tom ;)
wow
Wow, it's paradise for my eyes. Keep on.
nice... keep me
nice... keep me updated.
anak
You did nice job. I really
You did nice job.
I really like design of your drupal theme.
One suggestion: you could activate "aggregation of css" to improve (a bit) page load performance.
The reason I didn't activate
The reason I didn't activate 'aggregation of css' is because I am still changing the css and the site isn't finished yet :)
Thanks for comment. Glad you like my theme.
very nice theme, slick and professional
I really like this theme and am going to learn more about what drupal can do and come back to you.
Cheers,
John
Good theme
Good design and theme
Comments boxes are very beatiful
Terrfic theme. Very eye
Terrfic theme. Very eye catching and user friendly
Webdesign
Ahoj Marku. Moc se mi Tvoje stránka líbí. Přehledná a rychlá. Dobrá práce.
I always loved dark
I always loved dark backgrounds, your color theme just flows really nicely.
Half site
On screens with high and medium resolution (1280x800 on my PC) your site take only left half of browser's window. In usability case this deal uncomfortable for use.
nice! what was the name of
nice!
what was the name of your old theme again?
web
The pages of websites can usually be accessed from a common root URL called the homepage, and usually reside on the same physical server. The URLs of the pages organize them into a hierarchy, although the hyperlinks between them control how the reader perceives the overall structure and how the traffic flows between the different parts of the sites.
Post new comment