Go Back   vBulletin.org Forum / vBulletin Modifications / vBulletin 4.x Modifications / vBulletin 4.x Template Modifications
Reload this Page

Miscellaneous Hacks - Simple Slide-in Custom Board via CSS

Register Members List Search Today's Posts Mark Forums Read

Reply
Page 1 of 3 1 23
 
Mod Options
Simple Slide-in Custom Board via CSS Details »
Simple Slide-in Custom Board via CSS
Mod Information
The Developer
Last Online: Jan 2019
 
Mod Version: 2.00, by BCP Hung (Coder/Designer) BCP Hung is offline
Developer Last Online: Jan 2019 I like it Show Printable Version Email this Page
vB Version: 4.x.x Rating: (5 votes - 5.00 average) Installs: 20
Released: 16 Jun 2011 Last Update: 02 Jul 2011 Downloads: 100
Not Supported Template Edits Additional Files Translations  

About this modification :
This modification allow you make a simple slide-in custom board via CSS. You can create an announcement, warning, advertiment or forum directory (menu).
Browser support (full css properties) :

: margin (with icon), transition, transition-delay.
Install :
  1. Download attachment file, unzip, and upload images folder via FTP.
  2. Insert CSS code to additional.css template :
    AdminCP -> Styles & Templates -> Style Manager -> Edit Templates -> CSS Templates -> additional.css : insert at top or bottom of this template !

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

  3. Insert HTML code to navbar template :
    ... -> Edit Templates -> Navigation / Breadcrumb Templates -> navbar : insert to bottom of this template !

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

  4. Custom for yourself !
    Using your CSS knowledge to do ! Quick guide :
    • Change your location
      1. Show at right :
        In CSS code, search for :

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

        change "left" to "right", and custom your pixel !
      2. Show at left corner :
        In CSS code, search for :

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

        add below with each :

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

      3. Show at right corner : same left corner, change "left" to "right" !
    • Change your icon : I provide 4 icons in .zip packed to upload, see and choose.
      In HTML code, search for :

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

      Change your icon name !
    • Change your delay time : time when mouse un-hover and slide-in board will be collapse.
      In CSS code, search for :

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

      Change your number with "2", unit is second.
    • Change your width & height : size of slide-in custom board, recommends using the default size if you do not add much to the content.
      In CSS code, search for :

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

      Change it for you !
    • Change your background color : change the background color to match your forum style.
      In CSS code, search for :

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

      Get more color code at here : http://w3schools.com/html/html_colornames.asp
    • Change your transition time : change your time when mouse hover and un-hover.
      In CSS code, search for :

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

      and, when mouse un-hover :

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

      change with your number !

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.
Similar Mod
Mod Developer Type Replies Last Post
BB Code Enhancements BBCode CSS wrap, version InvisionPower.Board 3.0 vbenhancer vBulletin 3.8 Add-ons 1 19 Jul 2010 20:34
Forum Display Enhancements Very simple image resize (CSS only) OsMoSiS.it vBulletin 3.6 Template Modifications 55 21 Jan 2010 00:23

Comments
  #2  
Old 16 Jun 2011, 17:57
sulasno sulasno is offline
Member
  
Join Date: Feb 2010
tagged and thanks

looks interesting
Reply With Quote
  #3  
Old 16 Jun 2011, 21:46
DjEddie DjEddie is offline
Member
  
Join Date: Nov 2007
thanks for this ...i had a similar one but this looks a lot better ... off to install
Reply With Quote
  #4  
Old 16 Jun 2011, 21:58
Mr_Running Mr_Running is offline
Member
  
Join Date: May 2010
I like it.

I have it on the right hand side and it moves up and down depending on the page.
Looks good on the CMS but when I go to the forum it goes to low and can not see.
Goes away on the blog page.
Any suggestions/fix?

Edit: Okay it looks like it has something to do with collapse boxes

Second item:
How to change

A
N
N
0
U
N
C
E
M
E
N
T

To be on the outside of the slide when the slider bar is on the Right side of the screen.
Move "Announcement" as above - letters to the left in the slide.
Last edited by Mr_Running; 16 Jun 2011 at 22:38.
Reply With Quote
  #5  
Old 16 Jun 2011, 23:33
DjEddie DjEddie is offline
Member
  
Join Date: Nov 2007
okie havin a lil difficulty gettin this to show.. lil bit of help please

ive put the code into additonal.css
and ive put the code into footer at the top as per instructions ..

sorry if sounding thick.. but what do I do next to make it show?
Reply With Quote
  #6  
Old 16 Jun 2011, 23:48
Mr_Running Mr_Running is offline
Member
  
Join Date: May 2010
Try this:
If you have the vb Suite try clicking on the CMS page
May have to clear your CMS cache
and browsers cookies.

Oh and Move "Announcement" part Post #4 - I figured it out = Change the order of the Code = Copy and Paste

Still working on the collapse boxes issue
Reply With Quote
  #7  
Old 17 Jun 2011, 00:18
DjEddie DjEddie is offline
Member
  
Join Date: Nov 2007
ahh it shows on my CMS page ..but not on my forum.....

ive put the code in header templete and it showed on the forum home page .... what I now need to know is how to make it show INFRONT of any flash objects i have on my forum page..as it shows up behind flash objects atm

thank u
Last edited by DjEddie; 17 Jun 2011 at 00:26.
Reply With Quote
  #8  
Old 17 Jun 2011, 07:14
NTT NTT is offline
Member
  
Join Date: May 2007
Originally Posted by DjEddie View Post
okie havin a lil difficulty gettin this to show.. lil bit of help please

ive put the code into additonal.css
and ive put the code into footer at the top as per instructions ..

sorry if sounding thick.. but what do I do next to make it show?
Look here :

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

This default code, if you want move slide to right, change it with :

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


Originally Posted by Mr_Running View Post
Try this:
If you have the vb Suite try clicking on the CMS page
May have to clear your CMS cache
and browsers cookies.

Oh and Move "Announcement" part Post #4 - I figured it out = Change the order of the Code = Copy and Paste

Still working on the collapse boxes issue
Thanks for support, author (Getamped 1404) is having a holiday with his family, so, he not support at this time !
Originally Posted by DjEddie View Post
ahh it shows on my CMS page ..but not on my forum.....

ive put the code in header templete and it showed on the forum home page .... what I now need to know is how to make it show INFRONT of any flash objects i have on my forum page..as it shows up behind flash objects atm

thank u
How do you put that code ? You must do that guide ! I'm not sure for this, put it in header template will be got bug, footer template is a good choose to do !

Good luck !
Reply With Quote
  #9  
Old 17 Jun 2011, 11:55
Mr_Running Mr_Running is offline
Member
  
Join Date: May 2010
In the footer template I have found it only works if it placed at the top of the template.

The CMS page works but...

I have collapse boxes in my forum area which may be pushing the slider down and also can not view on the blog page.
Reply With Quote
  #10  
Old 17 Jun 2011, 12:12
Mr_Running Mr_Running is offline
Member
  
Join Date: May 2010
How to show all 4 examples at once and behave like the demo?
Last edited by Mr_Running; 17 Jun 2011 at 12:41.
Reply With Quote
  #11  
Old 17 Jun 2011, 16:11
NTT NTT is offline
Member
  
Join Date: May 2007
Originally Posted by Mr_Running View Post
In the footer template I have found it only works if it placed at the top of the template.

The CMS page works but...

I have collapse boxes in my forum area which may be pushing the slider down and also can not view on the blog page.
This bug when using right sidebar in blog.php.
To fix, you can put this code to bottom of navbar template. But, this isn't good choose ! Waiting from author !
Reply With Quote
  #12  
Old 18 Jun 2011, 01:42
whitedd's Avatar
whitedd whitedd is offline
Member
  
Join Date: Jan 2010
???
How to show all 4 examples at once and behave like the demo?
...same question...

...and showing only in CMS...in forum not...
Reply With Quote
  #13  
Old 19 Jun 2011, 16:32
BCP Hung's Avatar
BCP Hung BCP Hung is offline
Coder/Designer
  
Join Date: May 2011
Real name: BCP Hung
Thumbs up
Originally Posted by Mr_Running View Post
In the footer template I have found it only works if it placed at the top of the template.

The CMS page works but...

I have collapse boxes in my forum area which may be pushing the slider down and also can not view on the blog page.
Confirm that bug ! I will fix, but not with this template modification !
Originally Posted by Mr_Running View Post
How to show all 4 examples at once and behave like the demo?
Originally Posted by whitedd View Post
...same question...

...and showing only in CMS...in forum not...
I will make a product to improve this template modification, have a few option, easy to choose and create a notifi with out edit template !
Reply With Quote
  #14  
Old 19 Jun 2011, 19:48
DjEddie DjEddie is offline
Member
  
Join Date: Nov 2007
Originally Posted by Getamped 1404 View Post
Confirm that bug ! I will fix, but not with this template modification !


I will make a product to improve this template modification, have a few option, easy to choose and create a notifi with out edit template !
nice one... ive removed the coding for now and will await the product ..
Reply With Quote
  #15  
Old 19 Jun 2011, 20:33
sadiq6210 sadiq6210 is offline
Member
  
Join Date: Sep 2005
Real name: Sadiq
Great
Thanks
Reply With Quote
Reply
Page 1 of 3 1 23

« Previous Mod | Next Mod »

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 06:44.

Layout Options | Width: Wide Color:
vBulletin Main Site
Powered by vBulletin® Version 3.8.14
Copyright © 2021, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Design by Princeton
Copyright ©2001 - , vbulletin.org. All rights reserved.
vBulletin® is a registered trademark.