Forum widgets management > Sliding Panel

[fliper4o]

Hey forumotions I've just found this widget Forum widgets management >> Sliding Panel

Code:

<style type="text/css" media="all">
.panel {
    position: fixed;
    top: 50px;
    left: 0;
    display: none;
    background: #000000;
    border:1px solid #111111;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    width: 330px;
    height: auto;
    padding: 30px 30px 30px 130px;
    filter: alpha(opacity=85);
    opacity: .95;
    color: white;
    }
 
    .panel p{
    margin: 0 0 15px 0;
    padding: 0;
    color: #cccccc;
    }
 
    .panel a, .panel a:visited{
    margin: 0;
    padding: 0;
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
    }
 
    .panel a:hover, .panel a:visited:hover{
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    }
 
    a.trigger{
    position: fixed;
    text-decoration: none;
    top: 80px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff !important;
    padding: 20px 38px 20px 5px;
    font-weight: 700;
    background:#333333 url(http://cdn1.iconfinder.com/data/icons/basicset/plus_16.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    opacity: .9;
    text-shadow: 0 0 7pt #fff;
    }
 
    a.trigger:hover{
    position: fixed;
    text-decoration: none;
    top: 80px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #fff;
    padding: 20px 38px 20px 5px;
    font-weight: 700;
    background:#222222 url(IMAGEURL) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    opacity: 1;
        text-shadow: 0 0 7pt #fff;
    }
 
    a.active.trigger {
    background:#222222 url(IMAGEURL) 85% 55% no-repeat;
    position: fixed;
    }
 
    .columns{
    clear: both;
    width: 330px;
    padding: 0 0 20px 0;
    line-height: 22px;
    }
 
    .colleft{
    float: left;
    width: 130px;
    line-height: 22px;
    }
 
    .colright{
    float: right;
    width: 130px;
    line-height: 22px;
    }
 
    ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
 
    ul li{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
</style>
    <div class="panel">Вход</div>
    <a class="trigger" href="#"></a>

looks like this now but what I can add and how /any tutorials/ ?? It's cool but I dont know what to add something for topics, messages, login/off.... share buttons or ads

[fliper4o]

so can someone explain

[JAN2XONLINE]

It's pretty cool but I doesn't slide or anything.

[Sir Chivas™]

It's missing the JS which causes the effect to slide.

[JAN2XONLINE]

Ohhh... topic starter should give that code too. xD

[fliper4o]

where it is ?
I found this widget herre CP > Modules > Portal & Widgets > Forum widgets management
there is nothing moar
what do

[fliper4o]

can some1 help
I can support

[Sir Chivas™]

Check here,
ACP >> Modules >> JavaScript Management

[fliper4o]

so ?

Post Background Color
Select Content Button

now what do
add new ?

[Sir Chivas™]

Can you please post the tutorial or thread from where you got this codes?

[fliper4o]

Can you please post the tutorial or thread from where you got this codes?

CP > Modules > Forum widgets management > Sliding Panel >

Code:

<style type="text/css" media="all">
.panel {
    position: fixed;
    top: 50px;
    left: 0;
    display: none;
    background: #000000;
    border:1px solid #111111;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    width: 330px;
    height: auto;
    padding: 30px 30px 30px 130px;
    filter: alpha(opacity=85);
    opacity: .95;
    color: white;
    }
 
    .panel p{
    margin: 0 0 15px 0;
    padding: 0;
    color: #cccccc;
    }
 
    .panel a, .panel a:visited{
    margin: 0;
    padding: 0;
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
    }
 
    .panel a:hover, .panel a:visited:hover{
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    }
 
    a.trigger{
    position: fixed;
    text-decoration: none;
    top: 80px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff !important;
    padding: 20px 38px 20px 5px;
    font-weight: 700;
    background:#333333 url(http://cdn1.iconfinder.com/data/icons/basicset/plus_16.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    opacity: .9;
    text-shadow: 0 0 7pt #fff;
    }
 
    a.trigger:hover{
    position: fixed;
    text-decoration: none;
    top: 80px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #fff;
    padding: 20px 38px 20px 5px;
    font-weight: 700;
    background:#222222 url(IMAGEURL) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    opacity: 1;
        text-shadow: 0 0 7pt #fff;
    }
 
    a.active.trigger {
    background:#222222 url(IMAGEURL) 85% 55% no-repeat;
    position: fixed;
    }
 
    .columns{
    clear: both;
    width: 330px;
    padding: 0 0 20px 0;
    line-height: 22px;
    }
 
    .colleft{
    float: left;
    width: 130px;
    line-height: 22px;
    }
 
    .colright{
    float: right;
    width: 130px;
    line-height: 22px;
    }
 
    ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
 
    ul li{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
</style>
    <div class="panel">Вход</div>
    <a class="trigger" href="#"></a>

I just had this widget already. maybe I should add code in it
suggestions

[Sir Chivas™]

This is a tutorial from somewhere. You're missing the JS in order for it to have an effect. I cannot find any tutorial for it.

[fliper4o]

so what can we do now

[SLGray]

So you find it in your administration panel? What was the name of the widget? Someone had to add it for you because there is not a sliding widget made by Forumotion.

[fliper4o]

So I use this them > [PunBB] ProWhite
https://help.forumotion.com/t109143-punbb-prowhite
I installed it and I already had this widget "Sliding Panel" so if some1 can add something more in the code below

[SLGray]

So you added the widget, then changed the theme/version?

[fliper4o]

NO I installed the them and I had this widget

[SLGray]

It would really help if you posted a link to where you got the code for the widget.

[fliper4o]

I didnt do anything just saw this wdget and activate it

[SLGray]

Could you send me a test account for your forum in a private message?

[Nera.]

Hi,

Original tutorial & more styles here
http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/

AP > Display > Colors > CSS and add this:

Code:

    .panel {
    position: absolute;
    top: 50px;
    left: 0;
    display: none;
    background: #000000;
    border:1px solid #111111;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    width: 330px;
    height: auto;
    padding: 30px 30px 30px 130px;
    filter: alpha(opacity=85);
    opacity: .85;
    }

    .panel p{
    margin: 0 0 15px 0;
    padding: 0;
    color: #cccccc;
    }

    .panel a, .panel a:visited{
    margin: 0;
    padding: 0;
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
    }

    .panel a:hover, .panel a:visited:hover{
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    }

    a.trigger{
    position: absolute;
    text-decoration: none;
    top: 80px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 15px;
    font-weight: 700;
    background:#333333 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    }

    a.trigger:hover{
    position: absolute;
    text-decoration: none;
    top: 80px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 20px;
    font-weight: 700;
    background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    }

    a.active.trigger {
    background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/minus12.png) 85% 55% no-repeat;
    }

    .columns{
    clear: both;
    width: 330px;
    padding: 0 0 20px 0;
    line-height: 22px;
    }

    .colleft{
    float: left;
    width: 130px;
    line-height: 22px;
    }

    .colright{
    float: right;
    width: 130px;
    line-height: 22px;
    }

    ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

    ul li{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

AP > Display > Homepage message > Message content (P.S. You can add the HTML anywhere else according where you want it to display, message content will display it on main index only). In this part of the code you will add things you want to be found in your sliding panel.

Code:

    <div class="panel">
      <h3>Sliding Panel</h3>
      <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
      <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

      <h3>A Little Something About Me</h3>
      <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
      <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
    <div style="clear:both;"></div><div class="columns">
      <div class="colleft">
      <h3>Navigation</h3>
          <ul>
            <li><a href="http://spyrestudios.com/" title="home">Home</a></li>
            <li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
            <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
            <li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
            <li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
          </ul>
      </div>

      <div class="colright">
          <h3>Social Stuff</h3>
          <ul>
            <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
            <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
            <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
            <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
            <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
          </ul>
      </div>
    </div><div style="clear:both;"></div>

    </div>
    <a class="trigger" href="#">infos</a>

AP > Modules > JS managment

Code:

    $(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
    });

Example of it working on my test forum::

http://tikitiki.forumcroatian.com/

[fliper4o]

Thank you Nera : ))

[Sanket]

Topic Solved & Locked