Try Tuts+ Premium, Get Cash Back!
Coding the SimpleAdmin Theme: Polishing Off

Coding the SimpleAdmin Theme: Polishing Off

on Feb 27th 2012 with 31 comments
Tutorial Details
  • Topic: Admin Theme Design
  • Difficulty: Beginner
  • Screencast duration: 83 mins
Download Source Files
Demo View It Online
This entry is part 6 of 6 in the series The SimpleAdmin Theme

The SimpleAdmin Theme

It’s been quite a journey, but we’ve reached the end! Let’s finish off our SimpleAdmin theme by sorting out the side menu, styling the forms and buttons, then implementing some JavaScript touches.

Part 9: Side Menu

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Part 10: Form Styling, Buttons and JavaScript

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Series Navigation<< Coding the SimpleAdmin Theme: Dashboard Page

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.welancers.com Aslam Doctor

    Coool, now I will be able to finish the half left work :D
    Thanks Adi.

  • supprof

    thank you adi purdila!!
    it’s always a great pleasure to see you around and see your tutorials
    may be you’re going to make us another template full project the next time
    don’t stop because you’re the best here

  • Oyebanji Jacob Mayowa

    Wow… Wonderful Tuts.. absolutely interesting and fun {i kept laughing while u fix a mistake in the name of one of the classes. lol. that shows u are human.. lol}… +1 for the WebDesign Tuts Team… You are Helping Millions develop their skills..Keep it Up. ;)

  • Pingback: Coding the SimpleAdmin Theme: Polishing Off | Shadowtek | Hosting and Design Solutions

  • http://cansurmeli.com C@N

    Thanks for these gorgeous tutorials. :) I’ve been wondering when they will come out. Really appreciate your effort.

    P.S. the download links are broken.

    • http://www.snaptin.com Ian Yates

      Yep – sorry about that, download permissions fixed :)

  • http://www.welancers.com Aslam Doctor

    Hi Adi, just one question. In side menu, you set the background color to darker one & then you give the light color to side menu links background. Is there any specific reason to do that or is it alright to do it other way ?

    • http://www.adipurdila.com AdiPurdila
      Author

      Well, the dark BG color is best used in the heading of the box to make it stand out and mark the boundaries of the box. If you’d swap them, you won’t get a proper visual hierarchy in my opinion.

      Imagine doing this on a traditional table. Set the TH colors to a very light gray and then the row BG colors to a very dark grey and see what happens :)

  • Chris

    Hello,

    loved the tutorials, one thing with the checkbox in the th it looks like that should check all the boxes in the table hows that done?

    • http://www.adipurdila.com AdiPurdila
      Author

      That can easily be done from JS. Using jQuery you can grab the TH checkbox click event and then select all the other checkboxes from the first cell of each row and set “checked” to them. I didn’t include that because most CMS’s out there offer that functionality.

  • http://www.welancers.com Aslam Doctor

    Adi, I am just studying this & found that the checkboxes & the table action icons are coming little-bit from the upside. any idea why? check this screen capture http://i43.tinypic.com/118q1qp.png

    Thanks

    • http://www.adipurdila.com AdiPurdila
      Author

      Hmm, weird. What browser are you using?

      • http://www.welancers.com Aslam Doctor

        That’s Google Chrome on Windows 7 :)

  • http://www.welancers.com Aslam Doctor

    May be because you have given padding 0 to the first & last child ??

    • http://www.adipurdila.com AdiPurdila
      Author

      Possible. You can also try to set “vertical-align: middle” to that cell, see if that works. And of course remove all top/bottom padding for it.

      • http://www.welancers.com Aslam Doctor

        cool, that worked, thanks :)

  • hamzalija meco

    will the html and css files be downloadable?

    • http://www.snaptin.com Ian Yates

      You’ll be able to purchase the theme via Themeforest once everything is complete :)

  • nLamprok

    Well to be honest this is more like a general question. And to be more specific there are 2 questions. :P

    I guess, making an admin template should “force” you to be sure that every single detail is displayed correctly in every browser. Now in your last video you said IE 6 & 7 aren’t really bother you (and I agree with this, since they’re really old) but my questions do include compatibility for those 2 too.

    So first question is really a dumb one. Does the :hover selector works perfectly for every single element aside from anchor tags? In every browser?

    And the second one. Do the :first, :last and :nth-child(odd) selectors work as well in every browser?

    Sorry for being a newbie on these, but I’m designing something and I need to be sure that all these are working as they should everywhere. (well, I might not care so much for IE6 :P)

    Thanks in advance,
    Nasos

    • http://www.adipurdila.com AdiPurdila
      Author

      As far as I know, :first-child and :last-child are CSS 2.1 selectors, which work in everything except IE6 and below. :nth-child on the other hand is a CSS3 selector, so it doesn’t work in IE8 and below, only IE9.

      Here’s a handy resource that you might like: http://caniuse.com/

      It’s basically a compatibility table for all CSS stuff :)

      • nLamprok

        That’s exactly what I was looking for. I appreciate it, thanks! Good luck, we’re looking forward on seeing more screencasts like this! :)

        Thanks again,
        Nasos

      • http://www.snaptin.com Ian Yates

        Nearly but not quite Adi :)

        :first-child is CSS2.1, but :last-child was actually introduced later along with :nth-child in the CSS3 spec.

        :first-child is therefore supported in all but IE6, but :last-child requires IE9 or above to work. It’s one of those details which often goes unchecked because (logically) if :first-child works, :last-child should too, right?!

        • http://www.adipurdila.com AdiPurdila
          Author

          Ha, true that Ian. I knew about :first-child and I assumed :last-child was the same, but didn’t bother to check my own resource (*hides in shame*).

          Thanks for clarifying this :D

  • Chris

    Is there any ETA on when we will see this on themeforest?

    • http://www.snaptin.com Ian Yates

      Change of plan Chris, Adi’s made this freely available for download instead (check the link at the top of the page).

  • Marius

    Hey!

    Im just wondering if you guys recommend any CMS that would fit for this kind of theme. Don’t have to be all super fancy and complicated.. :)

  • Gabriel

    Thank you Adi.

  • http://www.welancers.com Aslam Doctor

    Hi Adi, I am just integrating into my custom cms :)
    Big thanks to you. Looking at the screenshot below, can you suggest me which is the best place to put “Add New Record” button/link ?
    http://i43.tinypic.com/2vn45k9.png

  • Omar Hitter

    cool tutorial for a static CMS, but what about the dynamic one !

    thanks

  • Yusuf Çalışkan

    Thanks for everythink God Bles you. Could you give me some information about ” Logo ” ?. I am trying to do it, but i cant?. How can i do like your logo? Pls…

  • http://xpellshop.com ricardo

    very nice clean cms – i am using it for my cms – one thing i would have liked to see is placement of regular content inside the main content box, instead of grouping buttons, inputs and message boxes.
    regards

  • newbie

    Thanks for the tutorials adi!!! I learned alot.

    A question on back-end.

    How would one make a cms for this admin template? What languages will be used? php, sql?

    thanks