denkGroot supports this item


79 comments found.

We see you updated the modal functionality. Thanks!

We can now display many modals; however, you have coded it to always display below and shifted left of the link. This poses a problem if being used in a liquid page and the link is near the left of the page (the box gets displayed in negative space, so most of it is not visible).

To see what we mean, set your page to be liquid and then add a modal to the “Admin” href in the table.

Thanks for all of the great work.

FYI , we added the following to the main.css, so a content box can be displayed in another content box (handy in some cases):

.inner {
  width: 98%;
  margin-left: 1%;
  margin-top: 20px;    

Feel free to add it if you find it useful.

Also, the new modal code won’t allow for functional hrefs in the modal itself.

Please let us know if you prefer reports like these here or if you want them via email instead. We don’t want to clutter up this comment area if you would rather have them via email.


Thanks for all the feedback. I highly appreciate it and it will only improve this template.

Furthermore, I think it’s a good thing that you post this in the comment section over here so that other visitors can see how this template is being developed.

Lovin’ this theme!

I’ve noticed that the select boxes don’t select the correct value. It always selects the first option until you click it and then it selects the correct option.

DO you know how I could fix this?


I’m working on a kind of ‘big’ update right now. I’m working on fixing that issue.

I have just submitted a new update with the following features:

  • Added login notifications
  • Option-tag and selected is now supported
  • Value-attribute now works on all input-tags
  • Left and right alignment are also supported in all input-tags
  • Inner content boxes available – thanks to getnetworks!
  • Fixed the links in modal boxes

I’m still working on the DataTables plugin, suggested by getnetworks. Expect another update soon.

Nice and clean, good job!


I have submitted yet another update which features…


Just add the class ”.pagination” to any table and my script will dynamically generate the appropriate code to create working pagination.

The update is awaiting approval and I expect it to be online by tomorrow.

can this script work with any html/css template ? do i need programming knowledge? do i need my php or java script work to use this admin panel?

This is not just a script. It’s an entire admin template. :)

Can you post when update is available

It’s available now. :)

should I wait till the datatables version or will it be easy to upgrade if I get the template and begin working with it now? If not I will have to wait I suppose.

You can begin working with it. The HTML structure will always be unchanged.

Just downloaded the latest version – works great! Well done – there are a large number of themes about, but for what we are doing, this one works the best! So quick and simple!

One thought for you – this may already be there and i’ve missed it. The modal boxes, that drop down for the ‘messages’ and ‘test’ buttons – is there a way that these could be coded (as an alternative – not a replacement) to appear in the centre (both horizontal and vertical) of the screen?

I’m thinking there are times that we need to pose a question to the user and that type of box, with one or more buttons would be ideal!

Also, the info boxes ‘such as the… This is an informative notification – click here to hide me’ can they be made so that clicking on them does not hide them – i.e. they stay on screen?

Hope i’m not asking too much!

Thanks for your compliments!

Your ideas sound very reasonable and could add a lot to my theme. I will write them down and implement them in my next patch.

Very nice theme indeed, message boxes are a little messed up in Internet Explorer though. = /

Hmm I see. Will be fixed asap.

Hi Interfico,

I see currently you are doing a little CSS /Javascript magic to manipulate select boxes, but currently how it is being done doesn’t allow us to make select boxes with “multiple” or “size” attributes specified. Any chance you could rework this to include such options?

Beautiful job so far, I look forward to your future themes!

The multiple-attribute isn’t supported yet. But you can in fact adjust the size to your liking by adding the classes “small”, “medium” or “large”.

Was just having a play around on the demo and the pagination does not seem to work in IE8 – Is this a known issue?

Yes it’s a known issue. It will be fixed this weekend in an update.

Great theme! Any idea when we can expect the update on the pagination issue for IE?

I hope my post makes sense, as its the end of a long day. I made a few fixes and just thought I would share with everyone.

You can fix the issue with the modal boxes z-index problem by giving #header_buttons a z-index as well. You can read about the problem here: Squish the Internet Explorer Z-Index Bug.

I noticed two other problems with the modal boxes in IE:

The header has extra padding at the top
This can be fixed by using the following css (line 402 main.css): (remove the line-height and use padding instead)

.modalhead {
    background: #c4c4c4;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #969696;
    padding: 10px;
    position: relative;

.modalhead img {
    position: absolute;
    top: -9px;
    right: 25px;

In IE the overlay is allowing you to click through so you have the possibility of opening multiple boxes which breaks the functionality.
This can be fixed by simply updating the click function on line 94 of script.js with this:

$('a[rel="modal"]').click(function() {
    return false;
I also suggest removing the hiding of the overlay from the callback like so:
$('#overlay').click(function() { // When the overlay is clicked the mailbox will disappear

I needed to get the pagination working in IE so I found the bug. The problem lies with using a[href=’#’] as a selector.

Here is a fix:
Change line 251 in script.js to:

$(this).find(".pagination").append('<a href="#" class="graybutton" rel="' + (i + 1) + '">' + (i + 1) + '</a>');

Change line 285 in script.js to:

$(this).find('tfoot .pagination a[href="#"]').click(function() {

Oops! What I meant to post was:

Change line 251 in script.js to:

$(this).find(".pagination").append('<a href="#" class="graybutton pagelink" rel="' + (i + 1) + '">' + (i + 1) + '</a>');

Change line 285 in script.js to:

$(this).find('tfoot .pagination a.pagelink').click(function() {

Wow! That is really awesome sbkyle!

You just saved me a lot of work, thanks a lot. I’m changing the files and uploading the update right now.

Looking good. If you are sticking with your table code instead of one of the jQuery modules, adding sorting and a configurable/selectable records per page would be very beneficial.

Keep up the good work!

Sorting? Coming up!


One thing we noticed that is of a cosmetic nature is that if we link anything in the table to a modal, the table gets a little messy. The height increases for that line and the text for columns not bound to the modal seems to get bottom aligned while the text bound to the modal gets top aligned. Just link one of the table hrefs to a modal and you’ll see what we mean. It’s not a major issue, but does impact the overall visual aesthetics of the table.

+1 for table sorting : )


If you are not against using a plugin for your table functions you should check out DataTables. It is very powerful and should not be that hard to theme to match this theme.



I’d like to code my own functionality wherever I can. I looked into the DataTables plugin but feel it offers too much. I like to keep it as small and clean as possible.