The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum widgets management > Sliding Panel

View previous topic View next topic Go down

Solved Forum widgets management > Sliding Panel

Post by fliper4o on 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

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on February 28th 2013, 2:05 pm

so can someone explain

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by JAN2XONLINE on March 1st 2013, 5:00 am

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

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

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

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



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by JAN2XONLINE on March 1st 2013, 5:32 am

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

JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on 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

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 2nd 2013, 8:20 pm

can some1 help Smile
I can support

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

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

Check here,
ACP >> Modules >> JavaScript Management



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 2nd 2013, 9:55 pm

so ?
Post Background Color
Select Content Button
now what do
add new ?

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

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

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



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 2nd 2013, 10:16 pm

CJ11 wrote:Can you please post the tutorial or thread from where you got this codes?
CP > Modules > Forum widgets management > Sliding Panel >
@fliper4o wrote:
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

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by Sir Chivas™ on 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. blackeye



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 3rd 2013, 6:55 am

so what can we do now :/

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by SLGray on 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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 3rd 2013, 8:48 pm

So I use this them > [PunBB] ProWhite
http://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

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by SLGray on March 3rd 2013, 11:57 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 4th 2013, 10:15 am

NO I installed the them and I had this widget

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by SLGray on March 4th 2013, 5:15 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 4th 2013, 10:00 pm

I didnt do anything just saw this wdget and activate it

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by SLGray on March 4th 2013, 10:05 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by Nera. on 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/


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by fliper4o on March 7th 2013, 8:31 am

Thank you Nera : ))

fliper4o
Forumember

Male Posts : 120
Reputation : 0
Language : Bulgarian

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Forum widgets management > Sliding Panel

Post by Sanket on March 7th 2013, 8:52 am

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum