Webs Video Tutorials

Websisode #7 - Custom Login Box Add Video

Websisode #7 - Custom Login Box from Craig Snedeker on Vimeo.

A series of video tutorials for Webs.com users, I show you simple and advanced customization tricks and tips. The 7th Websisode is about how to turn a sidebar moduel into a custom login box on the top of your screen! Click the HD button to watch the video in High Def on Vimeo!

Posted by Craig Snedeker on Dec 15, 2009

4365 Views

36 Comments

Reply Craig Snedeker

11:37 AM on July 09, 2010

I liked having background music in videos.. to loud I guess? Will fix next time :P I just can't render videos anymore

Reply LisaNJG

11:35 AM on July 09, 2010

Craig Snedeker says...
Sorry about my speech I am not a good talker. Click the HD icon (hover over the video) so see text clear

So Craig, if you know you're not a good talker, then why are you talking over music?? Its more difficult to hear you...and you may not be so confusing to most, but to those, [probably over 17], it's gibberish...shame, too.

Reply Craig Snedeker

06:37 PM on July 04, 2010

Peggy says...
Craig's video (this is the first I watched and probably the last) is too fast and his speech is too fast and slurred. Also, the font size of the working screen is way too small. I know you know your stuff, but if you remember, we who are watching the video are here to learn. Speak more slowly and enunciate, prep the viewer that a good handle of HTML code is necessary and I think you will have happier viewers. I will try watching it again, perhaps stopping, rewinding and reviewing will be necessary, but I would have been happier with slower and easier to read your text on the screen.

Sorry about my speech

I am not a good talker. Click the HD icon (hover over the video) so see text clear

Reply Peggy

04:27 PM on July 04, 2010

Craig's video (this is the first I watched and probably the last) is too fast and his speech is too fast and slurred. Also, the font size of the working screen is way too small. I know you know your stuff, but if you remember, we who are watching the video are here to learn. Speak more slowly and enunciate, prep the viewer that a good handle of HTML code is necessary and I think you will have happier viewers. I will try watching it again, perhaps stopping, rewinding and reviewing will be necessary, but I would have been happier with slower and easier to read your text on the screen.

Reply Jeremy Bailey

03:05 PM on June 11, 2010

Craig Snedeker says...
no problerm!

Can you make a video about how to make the sign in picture bigger it's kinda small.

Reply Craig

08:32 PM on May 17, 2010

Test Profile says...
Craig, thank you for the tutorial about creating a custom login box. I have one question for you. When I sign into my site using my custom login, the 'Sign In' link remains in the box, instead of being replaced by a 'Sign Out' link. Is there additional code that can be added to make it switch to a 'Sign Out' link after I've signed in? Thank you for all of your help!

yeah that happens, sorry

Reply Test Profile

08:10 PM on May 17, 2010

Craig, thank you for the tutorial about creating a custom login box. I have one question for you. When I sign into my site using my custom login, the 'Sign In' link remains in the box, instead of being replaced by a 'Sign Out' link. Is there additional code that can be added to make it switch to a 'Sign Out' link after I've signed in? Thank you for all of your help!

Reply Craig Snedeker

09:20 PM on May 08, 2010

no problerm!

Reply Jon

09:19 PM on May 08, 2010

Yes it worked thank you very very much mate =)

Reply Craig Snedeker

09:12 PM on May 08, 2010

to your login box

Reply Jon

09:10 PM on May 08, 2010

ok, where should i add the z-index thing ( sorry for the silly questions this is basically my first timeused any sort of code

Reply Craig Snedeker

09:09 PM on May 08, 2010

I'll bet your logo is covering it up. Try adding z-index: 10000; to your box

Reply Jon

09:05 PM on May 08, 2010

Craig Snedeker says...
did you actuallymake the text links?

If you did, it's possible your logo is covering it up

yes i made them links here is a picture of it cause i couldnt post the code here
http://farm5.static.flickr.com/4055/4590661966_5be91c46ec_o.jpg

Reply Craig Snedeker

09:02 PM on May 08, 2010

Jon says...
hey everyone just my first post here =) i did all it says in the tutorial but my links dont work for some reason i have them all under the sign in and register link but they dont work and im not sure how to fix it could someone help please heres the link to my page to see the red sign in button thingy http://uniquestyleanddesign.webs.com/

did you actuallymake the text links?

If you did, it's possible your logo is covering it up

Reply Jon

08:57 PM on May 08, 2010

hey everyone just my first post here =) i did all it says in the tutorial but my links dont work for some reason i have them all under the sign in and register link but they dont work and im not sure how to fix it could someone help please heres the link to my page to see the red sign in button thingy http://uniquestyleanddesign.webs.com/

Reply Test Profile

09:21 PM on April 17, 2010

I followed Craig's instructions for creating a custom login box, however, I'm experiencing some difficulty with the formatting. The side margins on my site are narrower than the margins on the site Craig used for the example. So, instead of entering "Sign In or Register" on one line, I broke it into three separate lines with the word "or" centered between "Sign In" and "Register," to avoid having words spill over the margin. However, the spacing between "or" and the other two lines is about twice as tall as I would like.

Refer to the site: http://gallerytower.webs.com/

Could someone explain to me how I can narrow the spacing between the text lines of the login box? Since I'm just starting to learn HTML, I need a descriptive answer with the steps spelled out for me.

In addition, the space between the words "Sign In" and the top of the box is about half as narrow as the space between the word "Register" and the bottom of the box. Would someone please explain to me how I can correct that? I don't understand why the spacing didn't automatically appear symmetrical. I tried to experiment with the HTML code, to no avail.

I give thanks in advance to anyone who generously takes time to try to help me. - Jason

Reply Test Profile

08:56 PM on April 17, 2010

Andrew says...
I found a problem with this, if you make a new module then you still have the borders of the table listed in your side bar which can look ugly. BUT you can just add information into any other custom module you have but only place the 'div' tags around what you want to appear in the box. Sadly he did not scroll down his page to where the bottom of his side bar is so you could see the extra table border.

Andrew, I know very little about html, and I was wondering if you could please clarify the solution that you gave for getting rid of the borders around the empty module box. I don't understand the second sentence that starts with the word 'but', where you noted adding information into any other custom module and only placing tags around what you want to appear in the box. I'm sorry I don't understand--I'm just starting to learn this--and I need you to paint me a clearer picture of what to do. Thanks!
-Jason

Reply Andrew

06:16 AM on March 29, 2010

I found a problem with this, if you make a new module then you still have the borders of the table listed in your side bar which can look ugly. BUT you can just add information into any other custom module you have but only place the 'div' tags around what you want to appear in the box. Sadly he did not scroll down his page to where the bottom of his side bar is so you could see the extra table border.