Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[CM] Twitter SlideBox (Widget) Details »
[CM] Twitter SlideBox (Widget)
Mod Version: 1.00, by ChiNa (Coder/Designer) ChiNa is offline
Developer Last Online: Jul 2019 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.6.12 Rating: (1 vote - 5.00 average) Installs: 1
Released: 24 Aug 2012 Last Update: Never Downloads: 0
Supported Template Edits Additional Files Translations  

Get this for vBulletin 4.x. CLICK HERE! (NEW)
Get it as Facebook LikeBox. CLICK HERE!

Hey Everyone, I made this first as a Facebook LikeBox, and now you can get it as Twitter Widget too. Its very small and simple! I hope you will like it.. And what you will achieve with this tutorial is that when mouse over the image, it will shift / slide your Twitter-Box Widget.

Lets Start with the Example Images First, and then the Modification!


The modification may look a bit scary or confusing, but its very easy and after 1 time, you will install it without any help the next time!

Only 3 Template Edits

DEMO HERE

Image: Slide In


Image: Slide Out


Notice: This works on almost all vBulletin versions, I have used it on 3.8.x and 4.2 so far. You can now get this for vBulletin 4.x by CLICKING HERE!

==================== Modification Starts =====================


Step 1: Go to your ADMINCP, and then Styles & Templates. Find your Template, and in most cases the "headinclude" is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...

Code to add:

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




Step 2: Now we have to add the CSS,
Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Main CSS"! In your Main CSS scroll all the way down till you find the "Additional CSS Definitions" section! Add the following code below all the other codes:

Code to add:


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

Step 3: Go to this Site https://twitter.com/settings/widgets

Login with your own account... Or if you dont have an account then signup for one!

The Widget option can also be seen in your PROFILE, below! Its called
WIDGETS! Now you can click on it and on you right side click on options are on your right side it says "Create new"!

Click on CREATE NEW, and after creating your widget, simply COPY the code from BELOW! We need to embed the code on your webpage, but in a bit...

Widget Settings: You can leave the Width and Height as it is. It will also ask you for a Scrollbar, and make sure to Click and mark it YES! Click SAVE on your twitter accounts widget that you created...

When you are done, Click on Finish & Grab Code!

Step 4:
Now add the CODE inside the original code showen below, instead of the BLUE TEXT. After you have added the code, your full code should be ready!

Look for the BLUE TEXT below, and replace it with the code you just got for the Widget!:

Code to add:

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

REPLACE THIS PART --> "PUT THE WIDGET CODE HERE" WITH THE WIDGET CODE.

STEP 5:
When your are done putting the WIDGET CODE inside the real code, Then now we need to put it all in your HEADER template, or footer...

Put the code below everything else in the tempplate. And you are DONE! (You can see an example of my CODE, used on my site below this post, so you get an idea of how it looks like when finished)

STEP 6:
Now copy the "twitbox.png" image from the attachment below, or from below the text, and upload it in your "images" folder in the root of your ftp!
We are DONE, Please its very important that you click INSTALLED after Installing, for future support! Thank you!

I would Get very happy if you nominate this as (MOTN) Mod of the Month

=================== Modification End ===============
===


Extra Troubleshoots & Info


Below you see example of the full code used in my forum China-Cheats.com
. The code in BLUE color is the twitter widget code:

Example of my Code:

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

Slide Issues & Troubleshoots

If you have issues and your button will not SLIDE in or out, then try ADD the code from the HEADINCLUDE in another spot, Try add right below the stylesheet!

Find:

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



And add code in you "headinclude" template, right below the CSS Stylesheet! Its because the code can make conflict with other jquery / Javascripts! So keep changing spot, and you will see that it will work!

Download Now

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

Screenshots

Click image for larger version

Name:	twitbox.png
Views:	1
Size:	14.5 KB
ID:	140719  

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.
Similar Mod
Mod Developer Type Replies Last Post
Forum Home Enhancements [CM] Twitter SlideBox (Widget) ChiNa vBulletin 4.x Template Modifications 15 09 Mar 2017 00:13
Forum Home Enhancements [CM] Twitter SlideBox (Widget) ChiNa vBulletin 3.7 Template Modifications 0 24 Aug 2012 15:43
Forum Home Enhancements [CM] Twitter SlideBox (Widget) ChiNa vBulletin 3.8 Add-ons 1 13 Aug 2012 23:27

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


New To Site? Need Help?

All times are GMT. The time now is 15:10.

Layout Options | Width: Wide Color: