akModal: simplest alternative to thickbox

80 Responses to “akModal: simplest alternative to thickbox”

1. April 30, 2008 9:24 am John says
   

   Hi

   Thanks for putting this up. I usually use thickbox a lot but today I needed something really light weight that I could open from a google map and customize a lot.

   This was perfect – up and running in about 10 minutes.

   Cheers
2. April 30, 2008 9:53 am Amit Kumar Singh says
   

   @jhon:
   thanks, this is the idea behind this plugin.

   Enjoy
3. May 27, 2008 9:13 am dan says
   

   hi, nice plugin – really qorks great…

   with latest version 1.2.5 of jquery which i need for other functions firebug gives an error saying “jQuery.dequeue is not a function”.

   obviously the function(p,a,c,k,e,d) called by interface.js that akmodal depends on is not fully compatible with the latest jquery…

   do you have any idea how to solve or worka-around this error?

   thanks & best from berlin,
   dan
4. May 27, 2008 6:28 pm Amit Kumar Singh says
   

   Hi Dan,

   you may want to try “jQuery 1.1 Compatibility Plugin” and see if it solves you problem for now. i have not yet tested this plugin with jQuery 1.2.5, but soon i will do it and will release if i found any problem.
5. May 28, 2008 10:25 am dan says
   

   thanks,

   but for me the jquery compatibility plugin 1.1. did not solve the problem (might be i have not implemented the compat. plugin properly – icluded right after jquery.js)

   a separate fix for interface.js (found at http://theneubeck.blogspot.com/2007/11/jquery-interfacejs-issues.html) solved it…

   my feature requests for an even better akmodal:
   a) option to fix the bg / parent
   b) option to drag the akmodal window by element (id)
   c) option to resize the akmodal window

   keep up the good work

   best,
   dan
6. May 28, 2008 10:39 am Amit Kumar Singh says
   

   dan,

   thanks for the link it will help me a lot, and i have actually removed the dependency from the interface plugin by changing the function that i had used, since i received your feedback and was thinking of releasing it.

   I liked you suggestion some of them will be part of next release of akmodal.

   thanks,
7. May 28, 2008 3:38 pm Bacardi says
   

   Amit,

   Good work, I agree that the version dependencies should be removed. Looking forward to the updated release.

   Bacardi
8. May 28, 2008 5:37 pm Michael Myles says
   

   Just thought that everyone should know that if the following code is simply pasted at the end of the akModal.js file, everything seems to have been resolved.

   /* Backwards compability to make JQuery to work with interface */
   (function($){
   $.extend({ dequeue : function(elem, effect) {
   $(elem).dequeue(effect);
   }
   });
   })(jQuery);
9. May 31, 2008 10:08 am Sarah Neuber says
   

   Thanks for the plugin!
   I downloaded it but when I opened the test page you created I had some problems Both in IE7 and Firefox the close img does not appear and the content (the sign-in form) is not even there!
   Help?
10. May 31, 2008 10:31 am Amit Kumar Singh says
    

    sarah,

    akmodal_test.htm file is the demo, without changing anything, from the downloaded folder, just double click the demo file, then click on ’sign in’ link you will see everything working fine.

    If you still can’t get anything working you can email me a screenshot, so that i can see exactly what is missing. Also check if there is any JS error you are getting.
11. May 31, 2008 12:03 pm Sarah Neuber says
    

    Thanks for replying so quick
    I’m obviously doing something wrong here I just dont’ know what because I haven’t changed anything in your demo file. I just opened the akmodal_test.htm file in the browser and this is what I get after clicking on the “sign in” link: the background darkens, the box comes up, I see the title “Sign In” with the red bgd but no X img and no content! (urg!)
    I’ll send you a screenshot if you let me know how.
12. June 16, 2008 1:33 am Chad Hooper says
    

    This is a great bit of code! I was trying to use Thickbox for a shopping cart, but found that it was very buggy when trying to pass a form to the Thickbox – this does it perfectly.

    I seem to have found a minor bug though. After calling $.akModalRemove, when I try to call $.showAkModal again, the little cross is missing from the top right hand corner.

    It remains like this until the original calling page is refreshed.

    The cross is definitely still there, because if I call $.akModalRemove again, I can see it moving across the page, but it seems to be positioned somewhere outside of the iframe (hope that makes sense).

    Still, I can live without that, so huge thanks to you for this.
13. June 16, 2008 1:38 am Chad Hooper says
    

    D’oh!
    Should have added:
    If I refresh the original calling page, and then call $.showAKModal, then the cross returns.
    Closing the window with the cross works fine, and when I next call it, the cross is still there.
    It’s only after calling akModalRemove that it disappears.
14. June 18, 2008 4:16 pm RK says
    

    if i have a flash covered on half of the page and flash is in default (windowless mode), will this appear above flash? I cannot use wmode.

    Thanks, RK
15. June 18, 2008 4:21 pm Amit Kumar Singh says
    

    RK,

    I am not sure as I have not checked it in this situation, may be you could try and check it out and let us know?
16. June 30, 2008 6:48 am pradeep says
    

    hi,
    Thanks 4 putting this up,this simplified my work when ever i want something light weight.its been pretty simple 2 use it.
17. July 4, 2008 7:38 am Sharad Kelkar says
    

    This is great plugin indeed, very nifty and sleek.
    Far better than jDialog or any such thing.
    It is more convenient than DHTML window from http://www.dynamicdrive.com
    The only issue is to make it work with jQuery 1.2.6 some patch has to me made as suggeted by Michael Myles regarding dequeue related issue.

    I wish the author pathches up everything in one place rather than different users applying their own hack. I do appreciate that author’s time is important, but having done 95% right job why just hust leave 5%
    unattended.
    Thanks
    Sharad
18. July 5, 2008 8:03 am Amit Kumar Singh says
    

    @sharad i have released a new version to avoid the patch.
19. July 5, 2008 2:02 pm Sharad Kelkar says
    

    Thanks Amit for great job in Version 1.1
    It irons out most issues reported so far.
    I feel pretty confident with this now.
    TESTED OK In
    (1) Internet Explorer 7
    (2) Firefox 3
    (3) Safari 3.1.2
    (4) Opera 9.5
    I wish if I can help Amit by contributing man hours to his great work, unfortunately I am doing more work
    on server side Java, not much on Javascript.
    But however I can definitely stress-test his scripts in most browsers on most OS ( Win32, Mac, Linux ) and report any issue found.
    Thanks alot again
    Sharad
20. July 5, 2008 2:21 pm Sharad Kelkar says
    

    Just one passing remark:
    I forgot to mention that Opera 9.5 shows some weird behavior.
    The background page of parent does not gray out fully, otherwise it is OK.
    Of course it is Opera’s problem not the problem with the script.
    However as on today Opera having less than 1% market share no knee-jerk reaction required, only future plan to see it can be handled.
    Just look at browser market share: http://marketshare.hitslink.com/report.aspx?qprid=0

    Thanks
    Sharad
21. July 5, 2008 5:28 pm Amit Kumar Singh says
    

    thanks Sharad
22. July 7, 2008 1:22 pm Dan says
    

    Hello Amit,
    thanks for the update.

    I have one request: Could you implement a code patch to make the window begin at least at the top of the browser window when the akmodal-box is bigger than the browser window? Now the upper part of the box is hidden and not reachable in that case.

    Should be some modifications in akmodal.js, I guess at the line containing “$(‘#ak_modal_div’).css({left:(((win_width/2-box_width/2))+scrollToLeft)+’px’,top:(((win_height/2-box_height/2))+scrollToBottom)+’px’});”

    I am looking forward to yor help.
    Thanks.
23. July 12, 2008 5:36 am StevenBui says
    

    Oh very good project but i think have to edit somethings.
    In akModal.js

    $(‘body’).append(“”);
    $(‘#ak_modal_div’).html(“”);

    because if when i call function 2 times with 2 url foreach…will be show the true url.
24. July 15, 2008 10:21 am Amar says
    

    Hi Amit,
    Thanks for this plug in,…
    I used it in my aspx page, where i have controls like dropdown,textboxes and gridview. The pop-up window pops up perfectly but the isssue is, in the parent window the drop down controls are not hidden and it allows to select them.
    Please provide a solution for this..
    Thanks And Regards ,
    Amar
25. July 15, 2008 10:28 am Amit Kumar Singh says
    

    @Amar,

    I think that is the problem of dropdown control in Internet Explorer. I think you should try to increase the window size of plugin, to cover the area.

    Sorry could not help you much
26. July 17, 2008 12:03 pm Phim Online says
    

    Thanks for code, I really like your work because it very light weight.
27. September 4, 2008 2:22 pm Jason says
    

    Hi.

    The plugin works great. I tried using the prettyphoto lightbox clone (as well as many others) as it has rounded corners but was unfortunately unable to get it to work alongside my content loaded via hashes so akModal it is. Only problem I have with akModal is the cross image close button changes position from time to time. I’ve tried editing the css to solve this but to no avail. I think this has been asked before. Do you have a solution?

    Thanks
28. September 10, 2008 12:42 am Chad says
    

    Has anybody used this along with the new Google Analytics code?
    I’m using this for an online store – the ViewCart page loads into AKModal.

    I recently added Google Analytics to the entire site. For some reason, every so often when loading the cart page (which also has analytics), I get an unspecified Javascript error 153 (no additional information is given). It doesn’t happen every time.

    This seems to be a google issue, but I can’t work out why – if anybody else has experienced it too, I would be grateful for some feedback.

    Thanks,

    Chad
29. September 18, 2008 1:19 pm Jeroen says
    

    I found this very helpful!
    Thickbox was too thick and didn’t accept custom file dialogs, akModal does just wat you want it to do: work.

    Thanks, saved me a lot of time.
30. September 26, 2008 8:26 pm Kiley says
    

    Any ideas why this doesn’t work? This is just a simple default.aspx page with the test code inserted.

    I’m stumped

    Untitled Page

    
    sign in3
31. September 26, 2008 8:28 pm Kiley says
    

    Sorry,
    I tried to post my code but the blog removed it. All I did was make a default.aspx through VS 2005 and inserted the javascript calls and the anchor tag. No text is written to the page. If I remove the jQuery.js call, the text appears.

    Stumped.

    Kiley
32. September 27, 2008 4:48 am Amit Kumar Singh says
    

    @kiley

    i can help you with html, but i will not be able to help you with .net
33. October 1, 2008 11:33 am Antonio says
    

    Hi,
    AkModal 1.1 version does not work in Opera 9.52 mac with any doctype.
    Only it works correctly without doctype.
    Does some solution exist?
    Thank you

    (I am sorry about my English evil)
34. October 1, 2008 11:46 am Amit Kumar Singh says
    

    @Antonio, sorry I have no idea about this issue with opera(mac).
35. November 2, 2008 2:28 am Moris says
    

    Hi

    Thank you for akModal works a treat

    My problem is that I am new to jquery/javascript – I have done most of my we programming with classic ASP

    My immediate issue is that in the login page I use ASP to check that the username/password are ok. How do get that information back to akModal window moreso if the login fails ie the akModal windoe not closing but message appears.

    Hope you can or direct me to such code

    thamks
    Moris
36. November 2, 2008 3:02 am Amit Kumar Singh says
    

    Moris, you don’t need to do any thing. As the part that shows the login box is an Iframe you can show the error message and box will not disappear.
37. November 12, 2008 11:32 pm MaxFromSouthFrance says
    

    Hi,
    I’m new to javascript and JQuery and I will thank you for this job that help me a lot to begin..
    I’m using it to select differents elements from differents sources and then refresh an ajax box in parent page with selections. So when you append the ak_modal_div from one source and then another source, the first content comes to you. So, I tried to give a different name to the akModal div but you can’t call the parent.$.akModalRemove() with the unknown named param..
    It’s easier to simply remove the div after any redirect !

    eg :
    akModalHideAndRedirect:function(redirect_url)
    {
    $(‘#ak_div’).fadeOut(500);
    $.dimScreenStop();
    $(‘#ak_div’).remove();
    window.location=redirect_url;
    },

    akModalHideAndLoadAjax:function(redirect_url)
    {
    $(‘#ak_div’).fadeOut(500);
    $.dimScreenStop();
    $(‘#ak_div’).remove();
    $(“#entities”).load(redirect_url);

    }

    hope this helps – diagnose is so long
38. November 14, 2008 12:59 am Moris says
    

    Hi

    Thanks from your previous response

    HAve another problem. I am now trying to close the popup in ASP.NET (VB)
    and am having no joy
    I am using the following code
    If (Not ClientScript.IsStartupScriptRegistered(“akclosing”)) Then

    Dim scriptString As String = ” ”
    scriptString += “parent.$.akModalRemove();”
    scriptString += “”
    ClientScript.RegisterStartupScript(GetType(Page), “akclosing”, scriptString, True)
    End If

    Could you direct me to or provide a possible solution
39. November 25, 2008 6:33 am Sagee says
    

    Hi,
    Is there a quick way to call for a function in the main opener page from the new modal box? meaning that if i open up a new modal box , can i call from it to a javascript function in the main window?
40. November 25, 2008 7:06 am Amit Kumar Singh says
    

    @sagee yes you can call javascript function from modal box you will have to use ‘parent.‘
41. November 25, 2008 7:09 am Sagee says
    

    thanks for the reply
    i have tried calling parent.test();
    but it doesnt seem to work
42. November 25, 2008 7:15 am Amit Kumar Singh says
    

    then check for js error that you are getting, cause i have succesfully used ‘parent’ to access js function from inside akmodal to access functions in calling window.
43. November 25, 2008 9:29 am Sagee says
    

    Hi, thanks for the reply,
    The error i get is that it doesn’t suuport this object.

    in the parent page i declare the function like this:

    function test(){}

    and in the modal page i call it like this:

    parent.test()

    but it doesnt seem to work,
    any ideas?
44. November 25, 2008 1:54 pm dan says
    

    how have akmodal.js and/or dimmer.js to be modified to enable setting the dim-factor on call of akmodal, like this: “$.showAkModal(this.href,’Window Title’,600,500,[dim_factor]);”? a default/fallback setting (of let’s say 0.5) if not given would be perfect…

    many thanks in advance.

    keep up the good work
    and best from berlin
45. December 5, 2008 6:44 am Moris says
    

    Hi

    I may be missing something, but I seem to have a problem. If the page is larger than the height/width specified I cannot get akmodal to scroll.
    In some cases the page is dynamically created and I do not know the height (the width is known) when the page loads in akmodal even though I have used overflow:auto the page seems to be cut off

    Is there a solution

    Moris
46. December 10, 2008 7:58 am Amit Kumar Singh says
    

    @moris you can force akModal to scroll using css.
47. December 10, 2008 8:40 am Moris says
    

    Thanks for your response.

    However, I am not having much luck – most probably my limited knowledge of jquery.

    Where and how does one do this?

    Thanks
48. December 19, 2008 5:27 pm RISHU says
    

    MAKE SCROLLING =YES IN
    $(‘body’).append(” “+title+”“);
49. January 8, 2009 6:34 pm rupert says
    

    this is great thanks,
    I have a funny issue: sometimes the ‘x’ button is floating in the wrong location (half way down the box) any idea why this might be?

    R
50. January 8, 2009 6:47 pm Amit Kumar Singh says
    

    @rupert mostly a css issue…
51. January 29, 2009 9:33 pm roelof says
    

    ehm… what about framebreakers?

    there goes your akomodal.

    but nice you can use any stylesheet, as it is an iframe
52. February 2, 2009 12:04 am Savas says
    

    Akmodal works perfectly on local development machine but it gives this error on product,ion machine:

    Error: Object doesn’t support this property or method

    both machines are same and all files are same.

    url is http://ozeldersverenler.net/advertise.asp

    the info icon right to the fourth text box should open a window. but it gives error. can someone please tell me what I am doing wrong?
53. February 3, 2009 6:34 pm james says
    

    Thanks for the great script, I spent a whole day looking for a modal script that could be fully customized to my look and feel and yours was the only one that allowed me to do so in like 20 minutes.

    Quick question, am running the script in a webpage where I need to call multiple instances of the script, how do i do that?
54. February 3, 2009 10:42 pm Amit Kumar Singh says
    

    @james yes you can, simply call the function again using different url.
55. February 20, 2009 10:15 am jquery plugins by name « Web Developer says
    

    [...] More information is at akModal article [...]
56. March 5, 2009 7:05 pm Kevin says
    

    Savas, how did you resolve the “Error: Object doesn’t support this property or method” error? I too am having this same problem. Thank you.
57. March 8, 2009 7:27 pm Mike says
    

    Regarding ruperts comment on January 8th, I was having the same problem. The close icon, “X”, would appear further down the popup window than it was suppose. The offset was equal to the scrollTop amount from its parent window. Here is how I fixed the problem:

    akModal.js — line 54
    X_top=offset.top

    I changed it to:
    X_top=offset.top – $(window).scrollTop()

    Hope this helps others.
58. March 11, 2009 5:22 am Savas says
    

    Hey Kevin,

    I did resolve it but to be honest, I don’t know how I did it. I was having problems at production server and it was working on development server. Apparently I was in the process of changing my production server for this website, so it worked on the new server without any problems.

    So I figure it is a server specific issue. I am sorry I cant be any help, because I havent figured out what was wrong on the previous server.
59. April 13, 2009 9:20 pm Santosh Bachuwar says
    

    How to access controls on parent page. Like if I want to modify/show/hide after I close the akmodal programatically, I want to use a hidden control on parent and how to access that modify the value on parent.
60. April 16, 2009 4:58 pm Chad says
    

    I use AKModal for an online shopping cart.
    http://www.pampercake.co.uk

    In order to update the cart value on the main page I use this:

    parent.document.getElementById(“CartTotal”).innerHTML = “£0.00″;

    Ultimately, parent.document is the collection you want to use to access anything on the main page.

    If you want to see an example, just view the cart on the above site and then view the source.

    Hope that helps.
61. April 21, 2009 1:08 am Caixa CSS modal - akModal | Links Web says
    

    [...] Site: http://amiworks.co.in/talk/akmodal-simplest-alternative-to-thickbox/ [...]
62. April 28, 2009 9:01 pm Ed McGee says
    

    I have created a spreadhseet-type interface (multiple rows & multiple columns) built on an ajax_collection and I permit the user to edit each field via an ak_Modal_popup. I use the popup to limit possible entry values via a select list on the popup. I am encountering a problem when a user attempts to edit multiple fields before submitting the parent. The first popup works fine. When the user selects the second field to edit, they get the first popup. If they cancel this popup and select again they get the correct popup. If they should select a third field to edit, they have to cancel the previous popup twice and on the third try, they get the correct popup. This continues to propagate until the parent is submitted. I do make each a href id unique to the row and column, but perhaps I am overlooking something? Thaks.
63. April 29, 2009 12:31 am sonia says
    

    Can I use this for popup confirn alert box? Anyone?
64. April 29, 2009 3:31 am sonia says
    

    Never mind about the popup alert box, I completed it.

    I want to know how to refresh the parent page once the modal window is closed. Thanks.
65. April 29, 2009 6:14 pm Ed McGee says
    

    Sonia,

    You can chain an additional javascript command after issuing the $.parent.akModalHideAndRedirect(parent_url); By default, simply issuing this command will reload the parent page essentially “refreshing” it. If not, try
    $.parent.akModalHideAndRedirect(parent_url);parent.history(0);
66. May 22, 2009 8:50 pm Lawrence says
    

    I have a web page with iframe. The akModal is implemented in the html inside that iframe. When I click the link, only the iframe’s area take effect but not the parent/whole area.

    Anyone know how to set about it?
    Thanks in advance.
67. June 3, 2009 12:49 pm Moris says
    

    hi

    I am using akModal to open a pdf. It works ok in various browsers but not Firefox. I get akModal popping up ok but with a white screen and at the bottom of the Firefoxwindow I get the message stopped

    I use the following code
    <a href=”casestudies\” id=”ak_casestudy” class=”two” onclick=”$.showAkModal(this.href,’Case Study ‘,800,760);return false;” target=”_blank”>

    Is this something in FF or me?

    Thanks
    Moris
68. June 18, 2009 10:06 am srinivas.m says
    

    hi
    is it possible to put validations to fileds at inline poup, and is it possible to inline popup submit using ajax, can u please provide the detail explanation.

    thank you.
69. June 23, 2009 11:15 am phim online says
    

    Thanks for this tip, I’ve always had a hard time with thickbox =)
70. July 29, 2009 1:29 am rfvern says
    

    Regarding Mike’s (March 8, 2009 7:27 pm) fix to the X placement when the main page is scrolled. I am still having that problem even with Mikes fix in. The X is still dropping down too far based apparently on the scroll. Scroll down on the main page, the X scroll down from where is should be on the top right corner of the pop up box.
71. September 28, 2009 6:52 pm dev says
    

    Thanks ! its really great work,

    I am using asp form for login, I am just getting problem when close the window, the parent window doesn’t refresh automatically

    Can you please help

    thanks
72. September 28, 2009 7:09 pm Ed McGee says
    

    Dev,

    See my previous post to Sonia. Basically, you will want to use something like:

    $.parent.akModalHideAndRedirect(parent_url);parent.history(0);

    Where parent_url is obviously a string to your parent, or calling, page.

    Hope this helps.
73. October 1, 2009 11:41 pm mark Nash says
    

    Hi

    Am using your popup and it works great except for one thing. Occasionally the red X will move down the vertical scroll bar about 50px or so.

    Any ideas why this would happen ?

    Thanks

    Mark
74. October 27, 2009 1:12 am Sona says
    

    I am getting an Error: $.showAkModal is not a function. I am using prototype and scriptaculous in the same file. Help!
75. October 27, 2009 1:51 am Joe says
    

    There is no demo for this on the web site and the demo that comes with the download does not work.
76. November 3, 2009 12:17 am Dave says
    

    Have you ever gotten an embedded Flash movie to run in the popup? All I get is a empty are with my button.

    thanks for any insight
77. November 3, 2009 12:21 am Dave says
    

    forget it. I’m an idiot. I had the link to the wrong sub.. DOH!
78. November 3, 2009 2:07 am Dave says
    

    OK now I have a real problem. When I close the window in IE NOT FF(it works) the movie continues to play UNLESS I click on the parent window, even an empty part of the window.

    I suspect it could be fixed with Ed McGees suggestion but my Javascript is very poor. I am not seeing the function he refers to only:

    akModalHideAndRedirect:function(redirect_url)

    Ed can you be a little more specific? I’d sure appreciate it and so would others I suspect.

    Thanks for any answers in advance!
79. November 5, 2009 3:55 pm Panshul says
    

    Is it possible to use this as a simple popup.. as in.. without darkening the surroundings and without making everything in the background inactive???
    How can i use it as a simple tool tip popup??
    advice please…
80. November 5, 2009 5:23 pm akModal alternative to thickbox using Jquery | Ajaxmint - Endless Ajax samples on jQuery, MooTools, ExtJS, Dojo, Prototype and PHP says
    

    [...] lies in the fact that, we can use it to display forms etc akModal alternative to thickbox Demo  Posted in ajax | Tags: jquery, lightbox, model, thickbox alternative « YUI – [...]

Popular Posts

• How to remove new folder exe or regsvr exe or autorun inf virus
• 11 Best Web Developer tools for Firefox and Internet Explorer
• Jquery : An Introduction
• Reading/Parsing Excel Spreadsheet using PHP
• Simplified AJAX For WordPress Plugin Developers using Jquery
• Simplest Css Hack Ever

Recently Written

• CodeIgniter 2.0 Is Baking
• How to get Latitude/Longitude from an address (or Geocoding ) using PHP
• Backup your WordPress blog to Rackspace Cloud Files
• PHPCamp is Back
• How To Fix MySQL Error – Error Code 30
• Barcamp Pune 6
• Where is MySQL Gone Away?
• Media Manager Browse Button Disabled In Joomla
• How to use SVN and Git together to get the best of both worlds in Windows
• Joomla Day Pune(India)

Categories

• drupal
• Firefox download day
• general
• how too?
• joomla
• jquery
• php
• phpcamp
• Uncategorized
• Vrius Removal
• wordpress

Admin

• Log in
• WordPress

About Me

"Where the mind is without fear and the head is held high;
		Where knowledge is free;
Where the world has not been broken up into fragments
		by narrow domestic walls;
Where words come out from the depth of truth;
Where tireless striving stretches its arms towards perfection;
Where the clear stream of reason has not lost its way
		into the dreary desert sand of dead habit;
Where the mind is led forward by Thee into ever-widening
		thought and action--"
		~ Gurudev Rabindranath Tagore Gitanjali, Verse 35. 
		

Myself Amit Kumar Singh, currently working for AmiWorks, my new startup. I was Technical Architect at Pune IT Labs. You can connect with me via Orkut, facebook or twitter. But the best way to connect with me is by leaving a comment here.

My interest lies in building web application, and i am trying to build some. This place is to share what i learn, and build during my work.

This blog design is still work under progress, and i am trying to get the layout right. Once i am staisfied with my layout, i will think about colors, till then it is going to be cool blue.