Coding the SimpleAdmin Theme: Login Page
videos

Coding the SimpleAdmin Theme: Login Page

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

The SimpleAdmin Theme

It’s time to translate our admin layout into a working template. We’ll begin by setting out the markup for our Login page, then we’ll hit the stylesheets..

Part 4: Login Page Markup

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

Part 5: Login Page Styling

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

Part 6: Finishing up the Login Page

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

Further Resources

Series Navigation<< Designing the SimpleAdmin Theme: Forms and ControlsCoding the SimpleAdmin Theme: Dashboard Page >>

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
  • supprof

    great adi purdila
    your tutorials are perfection and it’s an event when you post a new one
    thank you very mutch adi purdila

  • Mike

    Are the downloading files not there or ? :)

    I like the coding vids.

    Regards
    Mike

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

      Mike,

      This will be put up for sale on ThemeForest, so unfortunately I can’t provide the source files.

  • Mike

    Well when can i expect it to be on themeforest hehe :D

  • Mike

    Well when can i expect it to be on theme forest i really like the design :d

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

      I think in 1-2 weeks tops it should be there :D

      • Mike

        Are u gonna put some more stuff in it when u put it on themeforest or ?

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

          The basic elements will stay the same, but I’ll do more page layouts and probably more color schemes, but not sure yet.

  • http://hammers.altervista.org Enrico Martelli

    Took you 5 minutes to realize that the class name was wrong, but it’s still a nice tutorial.
    I usually use the em only for the text, but never for the padding, margin and other thing, but i see that with em is much better, thank you.

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

  • Pingback: My Stream | Coding the SimpleAdmin Theme: Login Page | My Stream

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

    Another great coding tutorial from Adi. Great!

  • http://cansurmeli.com C@N

    Hi all.

    Great tutorial. Really good effort Adi. You got the talent on that one. :D

    I read that you couldn’t share your source files but could you please at least just share your RESET code for the css file? Because mine is different and it’s making some differences in the coding stage.

    Thanks.

  • http://tannernelson.me Tanner Nelson

    When you say there is no way of removing the top and bottom margin from the Google font, can’t you adjust the line-height to 1em (or less if that is too big)?
    But very great tutorial! :)

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

      Hmm, that actually works from what i’ve seen. Didn’t think about it, but thanks for the idea :d Good catch!

  • http://afpwebworks.com Mike Kear

    Excellent! Thank you. You have a totally different way to organising your css files than I’ve been using, and I reckon it’s MUCH better than what I’ve been doing. That alone is worth the effort to do this for me.

    By the way a point of trivia – the term ‘em’ comes from old hot-metal typography. The old typesetters used to have to work out the total width of a column of text before they started putting the lead slugs of characters into the frames for the printing press. They would calculate the total width of a column based on the number of the character ‘M’ they needed for the full width. (In most fonts, the uppercase letter ‘M’ is the widest character). Since all the other letters could be measured in terms of their proportion to that character, the width of the uppercase letter ‘M’ became a unit of measure. Nowadays it’s called an ‘em’.

    An ‘em’ is the width of the uppercase character ‘M’ plus its white space. The font designer will decide that the ‘i’ character might be a sixth of an ‘M’ in width, and the upper case ‘W’ might be 1.25 ‘M’ in width.

    That way, using the uppercase M as a unit of measure, all other typographical elements can be measured regardless of the size of the basic font. WhIch is precisely how you use it in CSS now. It dates back to the origins of the printing press, hundreds of years ago.

  • ChrisR

    Do you have a live demo?

  • Robert Smith

    As always, great tutorial.

    Keep them coming.

  • Muhammad Raza Ali Khan

    Thanks so much for this amazingly useful tutorial. Learned a lot from it.

  • jason

    First let me say great tutorial! I have a question, and please forgive me if this is a “newb” question. I have been reading up a lot on responsive design, (Ethan Marcotte’s book Responsive Web Design) as well as a number of articles dealing with fluid layouts. One thing I have noticed is people mixing ems and percentages when setting margins, padding, and widths. Sometimes using percentages to set margins and sometimes ems, in the same stylesheet. Are there certain instances when you should use one over the other? Or is it just whatever you want at just that moment I guess?

    Thanks!

  • http://madatoday.wordpress.com LayWriter

    Great tutorial!

    I wonder, is this theme inspired from http://codecanyon.net/item/simple-admin/109100?

    Is there html/css cutting of the PSD file?

    Thanks.

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

    @jason From my experience, you will use % when dealing with flexible layouts and em’s when you wanna get close to fixed values. For instance, let’s say you have a text box that needs to fill half the page and inside that box the paragraphs need to have 20px of margin.

    The width of the text box would be 50% (half a page) because the page can resize based on the viewport. However, the text inside the box needs a fixed margin, so you’ll set that in em’s (20 / = em_value). If you’d set the margin in % it would be directly proportional with the amount of space around the text so that’s an undesired result (the bigger the viewport, the bigger the margin). I hope that made sense :)

    @LayWriter I didn’t know about the item from CodeCanyon, but it’s just a name coincidence, no inspiration from it :)

    • Jason

      Thank you so much! That makes perfect sense.

  • Pingback: Coding the SimpleAdmin Theme: Login Page | SCRiPTMAFiA.cO.IN

  • Julius

    I’m a beginner at html/css, well lets say at web design. Really, just a beginner. Came here to see the picture of form elements (really loved it, thought I could try make these myself) then saw those videos. Then I thought, that since I have no knowledge at photoshop and slicing images, why should I watch them? Saw the length, thought I’ll watch just the first video. Liked the tips about comments when closing elements. Thought I’ll hear more tips in second video. Watched it, and watched the third one. And this was the best decision I’ve done this year (related to web design).

    For those who think this lesson is only about PSD->HTML: NO, IT’S NOT, it’s practically only about HTML/CSS. And beginners at CSS/HTML: WATCH IT!!!

    What I will do different after watching this:
    - Comment my HTML code at least a bit;
    - Use em instead of px;
    - Stop repeating myself: will write less code, and make more CSS classes (e.g. float: left/right not only for one element;
    - Start passing multiple classes to element class attribute;
    - Stop avoiding div id’s (till now I was afraid to use then, because I didn’t understand what for are they?);
    - Start sketching my design in photoshop (not convert psd to html, but paint how my website should look like when coded-up. Even with no photoshop knowledge I can do that, I think. Because now I do the design without even trying to imagine how it should look like in the end.) !important.

    Now some questions: Adi, why did you use “#header” instead of “header”? It’s html5 tag, so why not use it since you are using html5? And about that button image on the right: you extended it by 10 pixels, but wasn’t there any other option, like adding margin or something?

    Thanks to you, Adi, now HTML/CSS coding will be much more fun, since you showed me new attributes to css properties and usage of css classes.

  • Catalin

    Salut Adi,

    OK tutorialul sunt incepator si am avut ce invata, un singur lucru nu imi e clar: eu folosesc de ceva vreme rem (relative ems) unitate de masura suportata de toate browserele si nu mai am probleme cu calculatul marimii fontului relativ la elmentul parinte, crezi ca nu e o idee buna?

    PS pentru mai multe detalii legat de rems: http://snook.ca/archives/html_and_css/font-size-with-rem

    ;-)

    Catalin

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

    @Catalin Indeed, resizing the rems is better and simpler. I preferred the traditional em’s method cause of the guaranteed support for all browsers, instead of the somehow limited one for rem’s. I’d say you can use any method that you think works for the users of your website. If you have a big majority using older versions of IE, then use EM or PX, otherwise use REM :)

    @Julius I’m glad to see my tuts have a good impact on you, the changes you’re talking about will definitely improve your workflow and make your life a lot easier. To answer your question, I don’t use the new HTML5 stuff yet, only the doctype for now until the new attributes get better support across the browsers. I should start using them tho, you’re giving me ideas here :D

  • Pingback: Coding the SimpleAdmin Theme: Login Page | GMancer

  • http://www.revisionlog.com RevisionLog

    Fantastic tutorial!

    I’m new to web development and went through a few books, created a few pages and felt that CSS was a real pain to work with (I come from a desktop programming background). Your tutorial showed that it’s quite an elegant way to style the page. I like the way you define various properties of a button separately and apply them.

    I earlier thought that only one class could be applied to an element. So i would create one class with a set of attributes for an element and then if I wanted a slight change, I would make another class with the same attributes except for the one that had to change. Eventually it became very confusing – having duplicate classes that are only slightly different.

    This tutorial has shown me a new way of doing coding web pages and I can’t wait to have some fun with CSS myself.

    Thanks

  • Pingback: Best of Tuts+ in February 2012 - The online portfolio and blog of freelance graphic and web designer Ben Bradshaw

  • Pingback: Best of Tuts+ in February 2012 | CS5 Design

  • Pingback: Best of Tuts+ in February 2012 | DigitalMofo

  • Pingback: Best of Tuts+ in February 2012 | Shadowtek | Hosting and Design Solutions

  • Pingback: Best of Tuts+ in February 2012 | HowDoDesign

  • Pingback: Best of Tuts+ in February 2012 | linuxin.ro

  • Pingback: Best of Tuts+ in February 2012 – blog

  • Pingback: Best of Tuts+ in February 2012 | GMancer

  • Pingback: | Graphfucker

  • http://wpden.net/ Ritesh Sanap

    Nice post will be really useful in my upcoming projects thank you

  • Pingback: Best of Tuts+ in February 2012 | Cyber Web Designs

  • http://tentuts.com natwar singh

    hi.. adi
    your tutorial are very good and well detailed for big for people like me who just start. i have a question that the pink line (smart guide) in photoshop appear when you drag an layer (image) to align with others. how to activate them, i don’t see them when i design.
    and one request that i am from india and internet speed is very low. and it is very hard to see what you are doing and typing with low quality and HD are in very big in size.
    so please zoom that part of video while you are editing where you are typing some thing instead showing whole screen.

  • natwar singh

    i have a problem while coding this part.
    when i remove class .ic-left-arrow and .image-left in top-bar section
    the button text comes down as shown in this image https://dl.dropbox.com/u/82933776/errorAdminTheme.PNG
    this happen only in chrome even on you online demo, i not getting why it is happening

  • http://www.facebook.com/profile.php?id=1311520144 Steini Pé

    Amazing tutorial but those “Artworks” are wayyyyyyyyyyy to light. I can not even spot them on the video and i assume others haven’t but i don’t look at this artwork as an important part of the design. For me the clean design without that artwork simply suffices

    • http://www.facebook.com/profile.php?id=1311520144 Steini Pé

      Also one thing i noticed you do in the second video. When you did the hover state you repeated “color: white” but you had color: white already in the normal state. You shouldn’t need to do color: white again in the hover state. You only need to specify the color if you’re changing it. However if you do have a good reason for repeating it i would like to know. Learning is power :)

    • http://www.facebook.com/profile.php?id=1311520144 Steini Pé

      Loved your video from start to finish! driving me nuts though that you kept overseeing the ic-arrow-right and ic-right-arrow for 3 minutes! i was like talking to the screen “common man you see it, your hovering over it. Look at the class name!” :D

  • Pingback: Tổng hợp một số giao diện login form đẹp | Share and learning…