/    Sign up×
Community /Pin to ProfileBookmark

Hotmail CSS

Copy linkTweet thisAlerts:
Jun 09.2008

Hi guys,

Am tired reading the Hotmail source code to find out the CSS files used to create the nice looking horizental menue (the one showing the tabs “Home”,”Hotmail”,”Spaces”…).

I already downloaded the CSS files listed in the source code, but non includes what am looking for.. ?

Is it a different type of themes or just CSS files?
Does anybody have an idea about this?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jun 09.2008 — It's all in the LayoutCommon_12.4.0080.0327.aspx CSS file.
Copy linkTweet thisAlerts:
@WebJoelJun 09.2008 — It would be easier instead of hijacking Hotmail's horizontal drop-down navigation menu that you just build one for yourself ? . It is called a "drop-down menu" and is basically a "<ul>" with a small bit of javascript to make the drop-down part work.

There are several all-CSS (javascript-less) drop-down menu examples out there that can be used too.
Copy linkTweet thisAlerts:
@Declan1991Jun 10.2008 — There are several all-CSS (javascript-less) drop-down menu examples out there that can be used too.[/QUOTE]
Excellent point that I forgot.
Copy linkTweet thisAlerts:
@7ass00nauthorJun 10.2008 — Thanks guys for your quick useful reply

It's all in the LayoutCommon_12.4.0080.0327.aspx CSS file.[/QUOTE]

Will try to locate the file u mentioned and extract what i need.

It would be easier instead of hijacking Hotmail's horizontal drop-down navigation menu that you just build one for yourself . It is called a "drop-down menu" and is basically a "<ul>" with a small bit of javascript to make the drop-down part work.

There are several all-CSS (javascript-less) drop-down menu examples out there that can be used too.[/QUOTE]

You are absoltely right WebJoe, its just that some effects attracted my attention and wanted to save some time by getting the ready code. Anyway, i will also dig with in this forum to get something similar, and incase u have any suggested thread, please advise.

Thank you
Copy linkTweet thisAlerts:
@WebJoelJun 10.2008 — That is what I figured you were after, to see how it is done on a site that you like, then emulate.

There isn't anything really spectacular or unusual about the hotmail drop-down. just some nice background-images. I find myself actually surprised, being essentially microsoft, that they work as well as they do for all browsers.. :eek:
Copy linkTweet thisAlerts:
@Declan1991Jun 10.2008 — [url=http://by116w.bay116.mail.live.com/mail/LayoutCommon_12.4.0080.0327.aspx?Theme=3&culture=en-IE]Here[/url] is a direct link to the file. I personally wouldn't copy it because it uses a table which is not semantically correct.

If you have FireFox, install Firebug, and it'll be much easier to see how it works.
Copy linkTweet thisAlerts:
@mshalabiJun 12.2008 — good.. for further info..

you can use any developer toolbar in your browser e.g (Webdeveloper for FF) to view all the CSS files in one time..
×

Success!

Help @7ass00n spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...