Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[CM] PopUp LoginBox (LightBox Effect + Shadow) Details »
[CM] PopUp LoginBox (LightBox Effect + Shadow)
Mod Version: 1.01, by ChiNa (Coder/Designer) ChiNa is offline
Developer Last Online: Jun 2018 I like it Show Printable Version Email this Page

vB Version: 4.2.0 Rating: (2 votes - 5.00 average) Installs: 23
Released: 12 Aug 2012 Last Update: 13 Aug 2012 Downloads: 137
Not Supported Template Edits Additional Files Translations  


This was brought to you by ChiNa-Man


First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

:::::::::::::::::::::::::::::::::::::::::::::

Updated to Version 1.01
(13 August 2012)
Believe it or not, Only 1 Template Edit! (Only Copy and Past) DONE!


New Update!
Now only visible for Guests, Non Logged in & Non Registered Users


From Normal Fonts



To Bold Fonts



A simple changes means a lot for someone who cares about the look!

ABOUT THE PRODUCT


This is maybe one of the best mods I ever made so far in my opinion, and the hardest to be honest! Filling out the Password sectioning was not easy, and the html form itself.. I think is one of a kind to Install! You can get this mod with 2 different Looks! 1 With normal Buttons like the ones provided by the browser! Every browser have their own kind of Buttons and models.

-----------------------------------------

The First Tutorial will be the a normal browser button style!

The other look is Custom, we choose what color we want for out buttons,WITH HOVER EFFECT & GRADIENT! If you want to make your own buttons, then simply go to this page: http://www.cssbuttongenerator.com and generate your own style! You will see the full tutorial at the end of this post!


Dark (Custom CSS Button)



LightBlue (Custom CSS Button)




Normal Browser Button (No Custom)

10 Different LoginBox (Only a Few Showen as example)

Default
(LoginBox Used as Default)


Original vB 4.x Skin Top


Custom Pink / Red Top


Custom Orange Top


Custom Light Blue Top




And 10 Different Button (Only a Few Showen as example)


Default Buttons (Custom)


Normal Browser Buttons


Orange Buttons (Custom)


Light Blue Buttons
(Custom)


Red Buttons
(Custom)






We Start The Tutorial HERE:

Tutorial 1:

With normal buttons (Browser Buttons)



Step 1: First got to your ADMINCP, and then Styles & Templates! Now you should see your template name, on right side of the name of your template there is a dropdown menu! In the dropdown menu choose Edit Templates!

And now look for the header template or where you want the Login & Register button to appear!

Use either Header or Navbar template. But in this case open your Header template, and scroll all the way down, and add the following code at the bottom of the header:


Add the Code Below In Your Header:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Click Save and we are Done! B
efor you do anything else, Dont forget to upload the background image for the TOP, called "top.gif" to your images folder! All the extra images are in the Extras.zip file!

Now Tutorial 1 with normal Buttons Finished!

Remember that the buttons are normal, and depends on which browser you use!



Tutorial 2:

With Custom Buttons



In tutorial 2 you do all same steps over again, and again back in your header template, add the code below! After the code is added, please read my instructions below the code, which is very important if you want to change the color and etc...

Now add the code below in the header: (Below everything else)

Code To Add In header:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Click Save
, and your done !!!!
Dont forget to upload the background image for the TOP, called "top.gif" to your images folder! All the extra images are in the Extras.zip file, Download it from the Attachments! Inside the file there is a folder called "images", simply upload the "top.gif" to your "images" folder!

Your Top Image is set to "top.gif" as default!
If you wanted to change your TOP, then replace the "top.gif" with one of the files in the "Extras.zip"
images folder! top1.gif, top2.gif, top3.gif, top4.gif and many others!

Example of Default LoginBox with "top.gif"


Simply decide which image (top1.gif, top2.gif, top3.gif, top4.gif) that you wanna use for the top of your loginbox. If you are using vBulletin 4.x default theme then the TOP is called "top3.gif", and has the same look as the vB 4.x Default theme & color!





IMPORTANT!!!!!

How to change the Button Color & Gradient?

I have generated the buttons from --> http://www.cssbuttongenerator.com/
Short Video Tutorial --> http://www.youtube.com/watch?v=_YxjCsZV_w0

You will find a txt file inside the Extras.zip, called
"Extra CSS Colors.txt" with 10 Different CSS colors for your Buttons! All what you have to do is to COPY the CODES from the Extra CSS Colors.txt and ONLY replace the codes THAT I HAVE MARKED WITH "RED COLOR"!

WE ARE OFFICIALY DONE, Please click INSTALLED if you like this, and if you later eeded support, I will for sure be there!

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Comments
  #2  
Old 12 Aug 2012, 17:39
ProFifaLeagues's Avatar
ProFifaLeagues ProFifaLeagues is offline
 
Join Date: Aug 2009
Real name: Rob
Look great mate another fine release will give this a shot later when i get time.Thanks Sir
Reply With Quote
  #3  
Old 12 Aug 2012, 18:16
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
You are welcome Buddy, I just updated this version, so its only visible for Guests and Non registered, Please update your code, if you havnt yet! Good luck mate, and thanks for clicking Installed!
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM

Last edited by ChiNa; 13 Aug 2012 at 09:19.
Reply With Quote
  #4  
Old 13 Aug 2012, 15:31
letipro letipro is offline
 
Join Date: Jun 2012
Real name: Nam Lee
how move "login & register" to other places
Reply With Quote
  #5  
Old 13 Aug 2012, 23:07
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Letipro, for example where do you wanna move it, Tell me an example or a spot, then I will give you the code or the Tutorial to do it yourself..
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #6  
Old 14 Aug 2012, 01:23
letipro letipro is offline
 
Join Date: Jun 2012
Real name: Nam Lee
Originally Posted by ChiNa-Man View Post
Letipro, for example where do you wanna move it, Tell me an example or a spot, then I will give you the code or the Tutorial to do it yourself..
i want move to default login and register ->> right corner
Reply With Quote
  #7  
Old 14 Aug 2012, 01:46
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
I tested it to see if I could add it to the right side of the template! I tried the Header Template and the Navbar! The right side will be the HEADER template, especially where you want the code to be.. You can try urself too. And if we choose the navbar It will still creat a conflict, so Only half of it will show,, It seems like that the buttons can only be added to the left! If you want I can provide you a few fixes to the left side, almost everywhere! And if you maybe decided to add it below the vBulletin Logo or closer to "vBulletin Message" then it is possible!

Let me know if...
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #8  
Old 14 Aug 2012, 19:34
letipro letipro is offline
 
Join Date: Jun 2012
Real name: Nam Lee
Originally Posted by ChiNa-Man View Post
I tested it to see if I could add it to the right side of the template! I tried the Header Template and the Navbar! The right side will be the HEADER template, especially where you want the code to be.. You can try urself too. And if we choose the navbar It will still creat a conflict, so Only half of it will show,, It seems like that the buttons can only be added to the left! If you want I can provide you a few fixes to the left side, almost everywhere! And if you maybe decided to add it below the vBulletin Logo or closer to "vBulletin Message" then it is possible!

Let me know if...
i only like right corner
Reply With Quote
  #9  
Old 19 Aug 2012, 21:27
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
I know, its has been been very hard to make it work on right side! The moving is not especially hard, I did move it into many spots, but the Jquery is not working as it should on the right side!

I let you know if I got any news.
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #10  
Old 12 Mar 2013, 19:55
fxdigi-cash fxdigi-cash is offline
 
Join Date: Jul 2012
Thanks for the mod. works great on vb4.2

however, I have a little request if possible. I was trying to integrate twitter login box on vbulletin, but still not as easy as I thought. I tried also a mod in here at vb.org, but didn:t work.....

is there a chance to look in this request!!!! Thanks,
Reply With Quote
  #11  
Old 19 Apr 2013, 12:01
robsta robsta is offline
 
Join Date: Oct 2006
very nice !!

the code to put on the right sight of forum is ?
Reply With Quote
  #12  
Old 16 Jul 2014, 01:22
thetechgenius's Avatar
thetechgenius thetechgenius is offline
 
Join Date: Jun 2014
I would like to know what part of the code do I edit, so i could move the Login and Register buttons.

I tried to edit the "#mask" top and left pixels, but nothing happened.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 02:40.

Layout Options | Width: Wide Color: