Hitskin.com

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°1

Forum widgets management > Sliding Panel

 by fliper4o February 28th 2013, 2:20 am

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

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°2

Re: Forum widgets management > Sliding Panel

 by fliper4o February 28th 2013, 2:05 pm

so can someone explain

LikeDislike

[JAN2XONLINE]

JAN2XONLINE

•  
•   

JAN2XONLINE

Forumember

Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

• Post n°3

Re: Forum widgets management > Sliding Panel

 by JAN2XONLINE March 1st 2013, 5:00 am

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

LikeDislike

[Sir Chivas™]

Sir Chivas™

•  
•   

Sir Chivas™

Helper

Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

• Post n°4

Re: Forum widgets management > Sliding Panel

 by Sir Chivas™ March 1st 2013, 5:02 am

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

LikeDislike

[JAN2XONLINE]

JAN2XONLINE

•  
•   

JAN2XONLINE

Forumember

Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

• Post n°5

Re: Forum widgets management > Sliding Panel

 by JAN2XONLINE March 1st 2013, 5:32 am

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

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°6

Re: Forum widgets management > Sliding Panel

 by fliper4o March 1st 2013, 9:39 am

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

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°7

Re: Forum widgets management > Sliding Panel

 by fliper4o March 2nd 2013, 8:20 pm

can some1 help
I can support

LikeDislike

[Sir Chivas™]

Sir Chivas™

•  
•   

Sir Chivas™

Helper

Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

• Post n°8

Re: Forum widgets management > Sliding Panel

 by Sir Chivas™ March 2nd 2013, 8:28 pm

Check here,
ACP >> Modules >> JavaScript Management

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°9

Re: Forum widgets management > Sliding Panel

 by fliper4o March 2nd 2013, 9:55 pm

so ?

Post Background Color
Select Content Button

now what do
add new ?

LikeDislike

[Sir Chivas™]

Sir Chivas™

•  
•   

Sir Chivas™

Helper

Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

• Post n°10

Re: Forum widgets management > Sliding Panel

 by Sir Chivas™ March 2nd 2013, 10:01 pm

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

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°11

Re: Forum widgets management > Sliding Panel

 by fliper4o March 2nd 2013, 10:16 pm

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

LikeDislike

[Sir Chivas™]

Sir Chivas™

•  
•   

Sir Chivas™

Helper

Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

• Post n°12

Re: Forum widgets management > Sliding Panel

 by Sir Chivas™ March 2nd 2013, 10:20 pm

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.

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°13

Re: Forum widgets management > Sliding Panel

 by fliper4o March 3rd 2013, 6:55 am

so what can we do now

LikeDislike

[SLGray]

SLGray

•  
•   

SLGray

Administrator

Posts : 51554
Reputation : 3523
Language : English
Location : United States

• Post n°14

Re: Forum widgets management > Sliding Panel

 by SLGray March 3rd 2013, 8:38 am

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.

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips

You need one post to send a PM.

When your topic has been solved, ensure you mark the topic solved.

Never post your email in public.

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°15

Re: Forum widgets management > Sliding Panel

 by fliper4o March 3rd 2013, 8:48 pm

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

LikeDislike

[SLGray]

SLGray

•  
•   

SLGray

Administrator

Posts : 51554
Reputation : 3523
Language : English
Location : United States

• Post n°16

Re: Forum widgets management > Sliding Panel

 by SLGray March 3rd 2013, 11:57 pm

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

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips

You need one post to send a PM.

When your topic has been solved, ensure you mark the topic solved.

Never post your email in public.

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°17

Re: Forum widgets management > Sliding Panel

 by fliper4o March 4th 2013, 10:15 am

NO I installed the them and I had this widget

LikeDislike

[SLGray]

SLGray

•  
•   

SLGray

Administrator

Posts : 51554
Reputation : 3523
Language : English
Location : United States

• Post n°18

Re: Forum widgets management > Sliding Panel

 by SLGray March 4th 2013, 5:15 pm

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

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips

You need one post to send a PM.

When your topic has been solved, ensure you mark the topic solved.

Never post your email in public.

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°19

Re: Forum widgets management > Sliding Panel

 by fliper4o March 4th 2013, 10:00 pm

I didnt do anything just saw this wdget and activate it

LikeDislike

[SLGray]

SLGray

•  
•   

SLGray

Administrator

Posts : 51554
Reputation : 3523
Language : English
Location : United States

• Post n°20

Re: Forum widgets management > Sliding Panel

 by SLGray March 4th 2013, 10:05 pm

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

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips

You need one post to send a PM.

When your topic has been solved, ensure you mark the topic solved.

Never post your email in public.

LikeDislike

[Nera.]

Nera.

Nera.

Energetic

Posts : 7078
Reputation : 2017
Language : English
Location : -

• Post n°21

Re: Forum widgets management > Sliding Panel

 by Nera. March 6th 2013, 2:05 pm

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/

LikeDislike

[fliper4o]

fliper4o

•  
•   

fliper4o

Forumember

Posts : 120
Reputation : 0
Language : Bulgarian

• Post n°22

Re: Forum widgets management > Sliding Panel

 by fliper4o March 7th 2013, 8:31 am

Thank you Nera : ))

LikeDislike

[Sanket]

Sanket

Sanket

ForumGuru

Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

• Post n°23

Re: Forum widgets management > Sliding Panel

 by Sanket March 7th 2013, 8:52 am

Topic Solved & Locked

LikeDislike