-3

How to combine to text box in a form using css as on tumblr https://www.tumblr.com/login and if it can not be done by css then how can that be done? Please help me with this

I want to make login form look nicer so i want to combine the input boxes of username and password boxes as on this a link

Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
namann26
  • 37
  • 3
  • It can be done is CSS. Try some code, and post it here. – CM Kanode Dec 24 '12 at 15:38
  • i have tried making an image and imposing it on the form but that wasnt working fine – namann26 Dec 24 '12 at 15:40
  • The beautiful thing about HTML and CSS is that if you can find an example of something already done, you can view the source code to see how they accomplished it. This is made even simpler by inspecting tools that are part of modern browsers such as chrome, firefox and safari. Try inspecting the code on the link you have posted and give this problem a try. If at that point you cannot get your code to function properly, feel free to post the code you wrote here and explain what is wrong with it and everyone will be glad to help you out. – Jared Dec 24 '12 at 15:40
  • i have even googled alot but the thing wasnt working fine so plss help with that as I AM QUITE NEW TO THIS – namann26 Dec 24 '12 at 15:41
  • They used JavaScript to show and hide the text inside the text box. Some browser support this without JS. Check this question out. http://stackoverflow.com/questions/7550610/pre-fill-input-text-box – manish Dec 24 '12 at 15:43

1 Answers1

2

Right click on that login page and click view source and copy it into a notepad and save as html file. They have implemented several operations like signup, password help etc. in the single page. So you need to find only login section and delete the rest of them. Just keep the following style sheets. You can change these files as you want,

<link rel="stylesheet" type="text/css" href="https://secure.assets.tumblr.com/stylesheets/compressed/global.css?cb1e8b42147f30c2e13d62135690991a"><link rel="stylesheet" type="text/css" href="https://secure.assets.tumblr.com/stylesheets/compressed/onboarding.css?1adfaf6588f389f7567dae907f646280"><link rel="stylesheet" type="text/css" href="https://secure.assets.tumblr.com/stylesheets/compressed/dashboard.css?bccedfaa1a01c28c280ee47200935a38"><link rel="stylesheet" type="text/css" href="https://secure.assets.tumblr.com/stylesheets/compressed/hello_tags.css?17d5a86bd54c60a37ef98400e6b86b4c"><link rel="stylesheet" type="text/css" href="https://secure.assets.tumblr.com/stylesheets/compressed/notification_new.css?9003193efe4adc94a3d8c85421fa6403">

Once you just have the login section in html, you can have the login page same as Tumblr login.

Gravity M
  • 1,485
  • 5
  • 16
  • 28