Tutorial Details
- Topic: Admin Theme Design
- Difficulty: Beginner
- Screencast duration: 90 mins
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
Part 5: Login Page Styling
Part 6: Finishing up the Login Page
Further Resources
- Clearfix hack – Perishable Press
- How to size text in CSS – A List Apart
- About fluid grids – A List Apart
Tags: Videos
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Adi Purdila
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.
Sign up now!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
great adi purdila
your tutorials are perfection and it’s an event when you post a new one
thank you very mutch adi purdila
Are the downloading files not there or ? :)
I like the coding vids.
Regards
Mike
Mike,
This will be put up for sale on ThemeForest, so unfortunately I can’t provide the source files.
Well when can i expect it to be on themeforest hehe :D
Well when can i expect it to be on theme forest i really like the design :d
I think in 1-2 weeks tops it should be there :D
Are u gonna put some more stuff in it when u put it on themeforest or ?
The basic elements will stay the same, but I’ll do more page layouts and probably more color schemes, but not sure yet.
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.
Another great coding tutorial from Adi. Great!
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.
You can grab the reset from: http://pastie.org/3360738
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! :)
Hmm, that actually works from what i’ve seen. Didn’t think about it, but thanks for the idea :d Good catch!
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.
Do you have a live demo?
As always, great tutorial.
Keep them coming.
Thanks so much for this amazingly useful tutorial. Learned a lot from it.
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!
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.
@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 :)
Thank you so much! That makes perfect sense.
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.
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
@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
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
Nice post will be really useful in my upcoming projects thank you