Coding the SimpleAdmin Theme: Dashboard Page
videos

Coding the SimpleAdmin Theme: Dashboard Page

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

The SimpleAdmin Theme

Let’s continue with our SimpleAdmin coding by tackling the Dashboard page. We’ll begin by setting out all the markup, then we’ll move on to styling the navigation and tab area.

Part 7: Dashboard Markup

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

Part 8: Top Menu and Tabs Area

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

Series Navigation<< Coding the SimpleAdmin Theme: Login PageCoding the SimpleAdmin Theme: Polishing Off >>

Adi Purdila is AdiPurdila on Themeforest
Tags: Videos
 
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

    I was just waiting for this today. Thanks Adi. This is really very valuable tutorial for me :)

    Thanks again.

  • Pingback: Coding the SimpleAdmin Theme: Dashboard Page | Shadowtek | Hosting and Design Solutions

  • http://www.vision-ps.de irfan

    thanks adi. where is demo

    • http://laranzjoe.blogspot.com lawrence77

      wait till he uploads it in themeforest ;)

  • Mike A

    Adi let me buy it :P, when are u selling it man ! i love it so much

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

      Glad you like it :D I’ll ask Ian if it’s possible to put a link in the tutorial somewhere after it’s uploaded so you can find it easier.

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

        Once it’s available I’ll link all the screencasts to it directly via the standard demo button. You’ll also see it pop up in Adi’s Themeforest stream at the bottom of each of his tuts :)

  • Michael Franz

    24/7 i’m waiting for tutorials in this session ;) love it! thanks!

  • http://maomuffy.blogspot.com Mfawa Alfred Onen

    Was waiting for this…Thanks Adi!

  • http://www.thoughtresults.com Saeed Neamati

    Why do you use blip.tv for videos? I think youtube is much better and faster.

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

      At Tuts+ we often feature quite lengthy screencasts, so YouTube’s (what was 5, then 10, then 15 minute) limit made it an impractical choice at the time. We also played with Vimeo, but their small print made our content vaguely in breach of their ‘no promoting a business’ clause.

      Anyway, we do publish to YouTube these days, so feel free to check out and subscribe to the Webdesigntuts+ channel :)

  • http://www.gorna.bg MeKeTa

    10x for this tutorials Adi! Good luck!

  • Creatan

    Could I suggest that you would use something like Firebug or some other developer tools that allows you to inspect elements. It pains me to watch few minutes of trying to find what when wrong when it could be solved in few clicks.

  • Jesse T

    Thanks Adi! You taught me a lot with the Corpra website and design with every aspect, from CS5 to the minor details in html/css… I was excited when I saw this new video series from you and they haven’t disappointed. when i the next part going to be available? It was 10 days between part 4 and 5, hopefully the next part wont be as long.

    How much jQuery you have planned for this CMS? Are you going to be incorporating any PHP and/or MySQL into the programming or are you leaving that up to the end user(s)?

    Again Adi, thank you very much for not just these tutorials but for all you do for the community.

    Jesse

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

    @Creatan

    Good suggestion, will do that in the future and my apologies for the long troubleshooting :)

    @Jesse T

    The jQuery used is minimal at best, I’m just powering some expand/collapse actions on the content modules, that’s it :) I don’t plan on implementing any server side actions since this is a shell for a CMS, so all of that fun programming stuff is already being done by the system itself.

  • ChrisR

    I seen that you put a 1px in when doing the tabs why not use the em?

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

      Well, if you increased the font size of the page, that EM value I would have set wouldn’t be 1px anymore since EM’s are relative units. So I used px to make sure my tabs always nudges the same amount no matter what the font-size. Does this make sense?

  • badyl

    Good lessons, your workhop is perfect :)

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

    Hey Adi, when is this going to be available for download on Themeforest ?

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

      Don’t have an ETA for that yet, I hope till month’s end.

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

    cool. I’ll be the first to buy it. I have developed it already till the tabs as you have guided in the tutorials :)

  • Hamid

    Adi Purdila, gotta love this guy<3, once again thQ adi, this tut was fantastic like your sleek web design tut.

  • Arjun

    Dhanyabad

  • Ayoub Gdah

    Hey, thank you for this nice tutorial. Your coding way is really nice. I have learnt a lot.
    It would be nice if you can make a tutorial about how to use the em. How to calculate it based on the parent node.

    Thanks again

  • http://www.yusufcaliskan.com 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://www.facebook.com/profile.php?id=1311520144 Steini Pé

    Do you have an alternative program which includes these shortcut commands like “ul#tabs>li*3″ like Expresso because Notepad++ doesn’t seam to have this. Again i am on Windows and Expresso is not ported for Windows