vb.org Archive - Forum Display Enhancements

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Display Enhancements - Login and Password Icons (https://vborg.vbsupport.ru/showthread.php?t=260341)

Login and Password Icons

What does this do?

This modification adds 2 small icons next to your login and password box fields (see screen shot or demo ). This is a code update for previous modification which has become outdated.

Credit

Proof of concept: TheWindows7Site (who inspired this modification)
Author & Developer: Boofo
Beta Tester & Financier: OldSchoolDSL

IMPORTANT Always backup your database before making any modification. Please read all steps carefully.

All template edits will take place in your HEADER template. You will need to download and upload the 2 small image files, before saving the template. You can of course replace these photos with your own, but should keep them the same size.

1. Find:
--------------------------

Code:

<input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />

--------------------------
ABOVE it add:
--------------------------

Code:

<img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/username.png" alt="Username" /> 

--------------------------
2. Find:
--------------------------

Code:

<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />

--------------------------
ABOVE it add:
--------------------------

Code:

<img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/password.png" alt="Password" />

--------------------------
3. Find:
--------------------------

Code:

<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />

--------------------------
AFTER it add:
--------------------------

Code:

&nbsp;<input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" />

--------------------------
4. Find:
--------------------------

Code:

<div id="remember" class="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                                </div>

------------------------------------------
EITHER remove it or replace it with:
------------------------------------------

Code:

<vb:comment>

                                <div id="remember" class="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                                </div>

                                </vb:comment>

--------------------------
Please click INSTALL

Done!
Enjoy!

If you're tired of vBulletin you should upgrade to Woltlab Burning Board http://www.woltlab.com

Should I install this? Hmmm...... ;)

Great mod, I'm still on 3.8.4 so I reworked this mod making use of the OP's graphic and based on his idea.

@ Zylantex

I got your private message. As you did the coding yourself, you are more then welcome to publish that coding within vBulletin 3.8 Template Modifications forum. All I ask is you provide credit (proof of concept) to this thread / modification.

Thanks. I have edited my post and I have given you full credit on the reworked 3.8.4 version of the mod.

That works great! **installed**

(demo on the link below)

installed however the username and password tabs jump left and right when i click on them :S

the remember me box moves once i click on the password box. any ideas?

Quote:

Originally Posted by warrior uw (Post 2176277)

the remember me box moves once i click on the password box. any ideas?

Are you using the default style?

no, i am using a custom style, i changed the header of the custom style that i am using. do i need to change the header of the default style as well?

Try it in the default style and you will see the same thing doesn't happen there.

uninstalled, not working with my style

Quote:

Originally Posted by doobiefillin (Post 2176709)

uninstalled, not working with my style

Well, duh! You can see from the pic in the first post it was done in the default style.

using default style but Login button moved to below (different row)?

Why not just auto-tick the remember me box and hide it, that's what I used to do. It's more hassle than it's worth anyway with people getting logged out etc

That won't work for anyone on a public computer. They will need to be able to uncheck the box.

I have a little bug with this modification. The log in button goes one row down. I provide a screenshot to see what I am talking about.

The screen is the view of the mod using google chrome browser. Same thing with all other browsers as well....

I would like to mention that is it a custom bought template and not the vb4 default style.

Any possible help with this?

Thank you!

Since the mod was done on a default style, there's not much that can be done as is. I would suggest contacting the style maker and see if they can help you.

I went ahead and gave it a shot. First I was trying my custom Darkness style and it went crappy but like you said, it's for a default. Then I figured I'd give it a shot with default, get it working and then compare the default style to my Darkness and see if I could make it work.

Well, it's the same in Default for me. It's a pretty easy mod but I must be dicking it somewhere. One note though, I also tried to remove the "<div id="remember" class="remember">" part in the "WebTemplates_LoginCode" in addition to the Header section. But I'm getting the same thing. Also, the remember box was below on a second line before I even started this mod as it is on the Darkness style also. I'm using Version 4.1.2 if that matters. Just seeing if you have any thoughts cause if it fixes my default, it might fix my main also.

https://vborg.vbsupport.ru/external/2011/04/50.png

If you follow the instructions EXACTLY as they are written, that will not happen.

Same thing happened to me. Followed the directions exactly as posted.
If you can get it corrected, please post how you did it.

Thanks.

Quote:

Originally Posted by mmacrypt (Post 2180825)

Quote:

Originally Posted by Boofo (Post 2180853)

If you follow the instructions EXACTLY as they are written, that will not happen.

I will be super anal tomorrow, turn off all music and do it step by step again. It seemed simple so maybe I dicked it. I will see what I come up with after some better sleep.

Make sure you do it in the default skin.

Absolutely, if I can't get it to work in the default, no way will it work on my main style.

ok, going to log this step by step. And I'm not trying to be arse, I feel I did it correct the first time but maybe logging it step by step will show you where I'm screwing up.

I have the default style back to default.
https://vborg.vbsupport.ru/external/2011/04/41.png

And here is the default code that I will be changing

Code:

<div>

                                        <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />

                                        <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />

                                        <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />

                                        <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

                                                </div>

                                        </div>

                                </fieldset>

                                <div id="remember" class="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                                </div>

Got the images copied to the right area on the server.

Doing step 1.

Here is the code after step 1.

Code:

<div>

                                        <img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/username.png" alt="Username" />&nbsp;        

                                        <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />

                                        <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />

                                        <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />

                                        <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

                                                </div>

                                        </div>

                                </fieldset>

                                <div id="remember" class="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                                </div>

And the Results after Step 1.
https://vborg.vbsupport.ru/external/2011/04/42.png

Onto Step 2.

Here is the code after step 2.

Code:

<div>

                                        <img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/username.png" alt="Username" />&nbsp;        

                                        <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />

                                        <img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/password.png" alt="Password" />

                                        <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />

                                        <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />

                                        <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

                                                </div>

                                        </div>

                                </fieldset>

                                <div id="remember" class="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                                </div>

And the Results after Step 2.

https://vborg.vbsupport.ru/external/2011/04/43.png

Here is the code after step 3.

Code:

<div>

                                        <img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/username.png" alt="Username" />&nbsp;        

                                        <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />

                                        <img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/password.png" alt="Password" />

                                        <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />

                                        <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />

                                        &nbsp;<input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" />

                                        <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

                                                </div>

                                        </div>

                                </fieldset>

                                <div id="remember" class="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                                </div>

And the Results after Step 3.

https://vborg.vbsupport.ru/external/2011/04/44.png

Not much of a change visually in Step 3, it looks like the "log in" box moved maybe 2 spaces to the right.

Here is the code after step 4.

Code:

<div>

                                        <img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/username.png" alt="Username" />&nbsp;        

                                        <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />

                                        <img style="position: relative; top: 3px;" src="{vb:stylevar imgdir_siteicons}/password.png" alt="Password" />

                                        <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />

                                        <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />

                                        &nbsp;<input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" />

                                        <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

                                                </div>

                                        </div>

                                </fieldset>

                                <vb:comment>

                                <div id="remember" class="remember">

                                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>

                                </div>

                                </vb:comment>

And the Results after Step 4.
https://vborg.vbsupport.ru/external/2011/04/45.png

I've tried adding a couple of   tags, tried removing them all and I'm seeing any change in the layout, maybe spacing a little bit but not on the return lines.

You messed up on step one already. There is no way just adding the image code by itself would move the login button. You must have changed some CSS padding or something else somewhere to get it to do that. I went though the code with a fine tooth comb before he released it.

Hmmm, maybe??? I don't recall doing much to the default style to be honest but I wouldn't say it's impossible. I know I did change a lot of stuff on my Darkness style but I really don't use the default so I'm not sure why or what I would have changed.

But don't you find it a little odd that Post 18 and 22 are getting the same thing as I am. I'm not saying you are wrong, I just find it odd that what ever I did, at least 2 other members did the same thing.

Is there a particular area you recommend me looking and I can play with some of the stuff there?

And I will lay you 1 to 10 that anyone who has problems is using a custom skin with some CSS changes on their site. I only have the default skin and that is what I coded it by.

And maybe this means more to you but when I get rid of the fieldset tags, I get this.

While it looks fine in Default, it doesn't look good in my style. But again, I'm pretty dumb to this stuff.

What does <fieldset id="logindetails" class="logindetails"> actually do?

https://vborg.vbsupport.ru/external/2011/04/40.png

It acts like whatever is making the lighter blue inner background box is set too small but I have no clue where I change that at.

And thanks for working with me on this Boofo

That makes your little blue box around it. Go in an compare the template you are editing with the default one and see what has changed.

I see it but what determines the size of that box. It seems like it's set to an X px size and if maybe I change it to X+10 px, it could fix it for everybody. But I don't know where that setting is, do you?

I have no idea as I have never needed to mess with any of that since I only use the default skin.

Cool, thank you, I'm kinda looking now to see what I can find. thanks for you help with this. If I find a solution, I'll post it.

Tye solution, if found, would only be for those who have changed CSS for custom skins as the code in the first post works fine on the default only skin.

Question: I would like to donate something for the work you have done here. How can I send payment?

Answer: I've elected to forward options for donations to Boofo since he has been offering support and I no longer use vBulletin currently. If you wish to make a donation because of this modification, please contact him. :)

To me the words "Remember me" is gone....:confused:

Quote:

Originally Posted by Losko (Post 2187559)

To me the words "Remember me" is gone....:confused:

Yes, they should be if you did the edit properly. No room at the inn for them.

thanks Boofo for your reply ;) but to restore the box on a second line to see the words "Remember Me", which part of code needs to be modified?

Greetings and good job

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01476 seconds Memory Usage 1,876KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (13)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: