Black slide in login panel on Forumotion Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    Black slide in login panel on Forumotion

    xDroiidx
    avatar
    xDroiidx
    Forumember


    Posts : 95
    Reputation : 2
    Language : English
    • Post n°1

    Solved Black slide in login panel on Forumotion

    Post by xDroiidx August 5th 2012, 12:08 pm

    ok so i have this login slider: http://www.xcodezz.com/h26-log-in-slide# that i configured to my forum, but how to i like install it or move it to my forum page. so that its above my sites logo when people are logged out


    Last edited by xDroiidx on August 5th 2012, 11:43 pm; edited 1 time in total
    • Back to top
    Nera.
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -
    • Post n°2

    Solved Re: Black slide in login panel on Forumotion

    Post by Nera. August 5th 2012, 1:46 pm

    Hi,

    Step 1:

    AP > Display > Templates > Overall_header and find <body>
    Add this just after it:

    Code:
    <!-- Login --><div id="toppanel">
       <div id="panel">
          <div class="content clearfix">
             <div class="left">
                <h1>Welcome to xCoDeZz</h1>
                <h2>The Home of CSS, Wii, And PSP Codes</h2>      
                <p class="grey">Please Login or Register now! thank you</p>
                <h2>Benefits of Registering?</h2>
                <p class="grey">You will get unlimited access to the forums, You will get to see the codes section when ever you want, and you get to chat with other members, and our site is #1 for leaking codes</p>
             </div>
             <div class="left">
                <center><h1>Login</h1></center>
    <form class="c3" action="/login.forum" method="post">
    <table class="c2" border="0" cellpadding="3" cellspacing="1">
    <tbody>
    <tr>
    <td align="right" width="45%">Username:</td>
    <td><input name="username" size="25" maxlength="40" class="c1" type="text"></td>
    </tr>
    <tr>
    <td align="right">Password:</td>
    <td><input name="password" size="25" maxlength="32" class="c1" type="password"></td>
    </tr>
    <tr align="center">
    <td colspan="2">Log me on automatically each visit: <input name="autologin" checked="true" type="checkbox"></td>
    </tr>
    <tr align="center">
    <td colspan="2"><input class="mainoption" name="login" value="Log in" type="submit"> <input name="redirect" type="hidden" value="/h1-redirect-page"></td>
    </tr>
    </tbody>
    </table>
    </form>
             </div>
             <div class="left right">
                <form action="#" method="post">
                   <h1>Not a member yet? Register!</h1>   
    <br>         
                   <center><a href="/Register">Click here to Register now!</a></center>
                                        <center> You will be Redirected to the Login Page</center>

                </form>
             </div>
          </div>
       </div> <!-- /login -->   

        <!-- The tab on top -->   
       <div class="tab">
          <ul class="login">
              <li class="left"> </li>
               <li>Hello Guest!</li>
             <li class="sep">|</li>
             <li id="toggle">
                <a id="open" class="open" href="#">Log In | Register</a>
                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>         
             </li>
              <li class="right"> </li>
          </ul>
       </div> <!-- / top -->
       
    </div> <!--panel -->

    Save and publish your template on the green cross. Do what's necessary in it, add links and souch.

    Step 2:

    AP > Display > Colors > CSS and add this in it:

    Code:
    /*
    Name: Sliding Login Panel with jQuery 1.3.2
    Author: Jeremie Tisseau
    Author URI: http://web-kreation.com/
    Date: March 26, 2009
    Version: 1.0
    */

    /***** clearfix *****/
    .clear {clear: both;height: 0;line-height: 0;}
    .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    .clearfix {height: 1%;}
    .clearfix {display: block;}

    /* Panel Tab/button */
    .tab {
         background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_b.png) repeat-x 0 0;
       height: 42px;
       position: relative;
        top: 0;
        z-index: 999;
    }

    .tab ul.login {
       display: block;
       position: relative;
         float: right;
         clear: right;
         height: 42px;
       width: auto;
         font-weight: bold;
       line-height: 42px;
       margin: 0;
       right: 150px;
         color: white;
         font-size: 80%;
       text-align: center;
    }

    .tab ul.login li.left {
         background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_l.png) no-repeat left 0;
         height: 42px;
       width: 30px;
       padding: 0;
       margin: 0;
         display: block;
       float: left;
    }

    .tab ul.login li.right {
         background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_r.png) no-repeat left 0;
         height: 42px;
       width: 30px;
       padding: 0;
       margin: 0;
         display: block;
       float: left;
    }

    .tab ul.login li {
        text-align: left;
         padding: 0 6px;
       display: block;
       float: left;
       height: 42px;
         background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_m.png) repeat-x 0 0;
    }

    .tab ul.login li a {
       color: #15ADFF;
    }

    .tab ul.login li a:hover {
       color: white;
    }

    .tab .sep {color:#414141}

    .tab a.open, .tab a.close {
       height: 20px;
       line-height: 20px !important;
       padding-left: 30px !important;
       cursor: pointer;
       display: block;
       width: 100px;
       position: relative;
       top: 11px;
    }

    .tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left 0;}
    .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left 0;}
    .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left -19px;}
    .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left -19px;}

    /* sliding panel */
    #toppanel {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 999;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #panel {
       width: 100%;
       height: 270px;
       color: #999999;
       background: #272727;
       overflow: hidden;
       position: relative;
       z-index: 3;
       display: none;
    }

    #panel h1 {
       font-size: 1.6em;
       padding: 5px 0 10px;
       margin: 0;
       color: white;
    }

    #panel h2{
       font-size: 1.2em;
       padding: 10px 0 5px;
       margin: 0;
       color: white;
    }

    #panel p {
       margin: 5px 0;
       padding: 0;
    }

    #panel a {
       text-decoration: none;
       color: #15ADFF;
    }

    #panel a:hover {
       color: white;
    }

    #panel a-lost-pwd {
       display: block;
       float: left;
    }

    #panel .content {
       width: 960px;
       margin: 0 auto;
       padding-top: 15px;
       text-align: left;
       font-size: 0.85em;
    }

    #panel .content .left {
       width: 280px;
       float: left;
       padding: 0 15px;
       border-left: 1px solid #333;
    }

    #panel .content .right {
       border-right: 1px solid #333;
    }

    #panel .content form {
       margin: 0 0 10px 0;
    }

    #panel .content label {
       float: left;
       padding-top: 8px;
       clear: both;
       width: 280px;
       display: block;
    }

    #panel .content input.field {
       border: 1px #1A1A1A solid;
       background: #414141;
       margin-right: 5px;
       margin-top: 4px;
       width: 200px;
       color: white;
       height: 16px;
    }

    #panel .content input:focus.field {
       background: #545454;
    }

    /* BUTTONS */
    /* Login and Register buttons */
    #panel .content input.bt_login,
    #panel .content input.bt_register {
       display: block;
       float: left;
       clear: left;
       height: 24px;
       text-align: center;
       cursor: pointer;
       border: none;
       font-weight: bold;
       margin: 10px 0;
    }

    #panel .content input.bt_login {
       width: 74px;
       background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_login.png) no-repeat 0 0;
    }

    #panel .content input.bt_register {
       width: 94px;
       color: white;
       background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_register.png) no-repeat 0 0;
    }

    #panel .lost-pwd {
       display: block;
       float:left;
       clear: right;
       padding: 15px 5px 0;
       font-size: 0.95em;
       text-decoration: underline;
    }

    Reupload the images so they are not hotinked to the authors site since that is not OK.

    Step 3:

    AP > Modules > Java script code manament > Enable > YES and make a new JS + mark on all pages:

    Code:
    $(document).ready(function(){$("#open").click(function(){$("div#panel").slideDown("slow");});$("#close").click(function(){$("div#panel").slideUp("slow");});$("#toggle a").click(function(){$("#toggle a").toggle();});});

    That's about it. Here is an example of it working fine on my test forum:
    http://tiki.makingforum.com/#
    http://tiki.makingforum.com/#
    http://tiki.makingforum.com/#

    Any things you want to be visable from it to members only you'll add in overall_header among triggers:

    Code:
    <!-- BEGIN switch_user_logged_in -->
    Code here
    <!-- END switch_user_logged_in -->
    • Back to top
    xDroiidx
    avatar
    xDroiidx
    Forumember


    Posts : 95
    Reputation : 2
    Language : English
    • Post n°3

    Solved Re: Black slide in login panel on Forumotion

    Post by xDroiidx August 5th 2012, 7:47 pm

    Wow awsome, you should add this to the tricks n tips list,

    Anyways it works, but it messes up my site, iknow its from the CSS, can u look through my CSS and tell me what it is?

    Code:
    /*
    Name: Sliding Login Panel with jQuery 1.3.2
    Author: Jeremie Tisseau
    Author URI: http://web-kreation.com/
    Date: March 26, 2009
    Version: 1.0
    */

    /***** clearfix *****/
    .clear {clear: both;height: 0;line-height: 0;}
    .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    .clearfix {height: 1%;}
    .clearfix {display: block;}

    /* Panel Tab/button */
    .tab {
        background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_b.png) repeat-x 0 0;
      height: 42px;
      position: relative;
        top: 0;
        z-index: 999;
    }

    .tab ul.login {
      display: block;
      position: relative;
        float: right;
        clear: right;
        height: 42px;
      width: auto;
        font-weight: bold;
      line-height: 42px;
      margin: 0;
      right: 150px;
        color: white;
        font-size: 80%;
      text-align: center;
    }

    .tab ul.login li.left {
        background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_l.png) no-repeat left 0;
        height: 42px;
      width: 30px;
      padding: 0;
      margin: 0;
        display: block;
      float: left;
    }

    .tab ul.login li.right {
        background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_r.png) no-repeat left 0;
        height: 42px;
      width: 30px;
      padding: 0;
      margin: 0;
        display: block;
      float: left;
    }

    .tab ul.login li {
        text-align: left;
        padding: 0 6px;
      display: block;
      float: left;
      height: 42px;
        background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_m.png) repeat-x 0 0;
    }

    .tab ul.login li a {
      color: #15ADFF;
    }

    .tab ul.login li a:hover {
      color: white;
    }

    .tab .sep {color:#414141}

    .tab a.open, .tab a.close {
      height: 20px;
      line-height: 20px !important;
      padding-left: 30px !important;
      cursor: pointer;
      display: block;
      width: 100px;
      position: relative;
      top: 11px;
    }

    .tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left 0;}
    .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left 0;}
    .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left -19px;}
    .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left -19px;}

    /* sliding panel */
    #toppanel {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 999;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #panel {
      width: 100%;
      height: 270px;
      color: #999999;
      background: #272727;
      overflow: hidden;
      position: relative;
      z-index: 3;
      display: none;
    }

    #panel h1 {
      font-size: 1.6em;
      padding: 5px 0 10px;
      margin: 0;
      color: white;
    }

    #panel h2{
      font-size: 1.2em;
      padding: 10px 0 5px;
      margin: 0;
      color: white;
    }

    #panel p {
      margin: 5px 0;
      padding: 0;
    }

    #panel a {
      text-decoration: none;
      color: #15ADFF;
    }

    #panel a:hover {
      color: white;
    }

    #panel a-lost-pwd {
      display: block;
      float: left;
    }

    #panel .content {
      width: 960px;
      margin: 0 auto;
      padding-top: 15px;
      text-align: left;
      font-size: 0.85em;
    }

    #panel .content .left {
      width: 280px;
      float: left;
      padding: 0 15px;
      border-left: 1px solid #333;
    }

    #panel .content .right {
      border-right: 1px solid #333;
    }

    #panel .content form {
      margin: 0 0 10px 0;
    }

    #panel .content label {
      float: left;
      padding-top: 8px;
      clear: both;
      width: 280px;
      display: block;
    }

    #panel .content input.field {
      border: 1px #1A1A1A solid;
      background: #414141;
      margin-right: 5px;
      margin-top: 4px;
      width: 200px;
      color: white;
      height: 16px;
    }

    #panel .content input:focus.field {
      background: #545454;
    }

    /* BUTTONS */
    /* Login and Register buttons */
    #panel .content input.bt_login,
    #panel .content input.bt_register {
      display: block;
      float: left;
      clear: left;
      height: 24px;
      text-align: center;
      cursor: pointer;
      border: none;
      font-weight: bold;
      margin: 10px 0;
    }

    #panel .content input.bt_login {
      width: 74px;
      background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_login.png) no-repeat 0 0;
    }

    #panel .content input.bt_register {
      width: 94px;
      color: white;
      background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_register.png) no-repeat 0 0;
    }

    #panel .lost-pwd {
      display: block;
      float:left;
      clear: right;
      padding: 15px 5px 0;
      font-size: 0.95em;
      text-decoration: underline;
    }
    .expand, .contract {position: absolute; top: 35px; right: 12px; cursor: pointer; width: 32px; height: 22px; background: url(http://codwiiforums.tk/images/imperial/collapse.gif);}
    .contract {background: url(http://codwiiforums.tk/images/imperial/collapse.gif);}
    span.kutijica a {
        text-decoration: none !important;
        margin-left: 20px;
    }
    #backtotop {
        bottom: 20px;
        color: #FFFFFF;
        cursor: pointer;
        display: none;
        font-size: 14px;
        opacity: 0.6;
        padding: 8px;
        position: fixed;
        text-align: center;
        z-index: 999px;
        right: 15px;
        border-radius : 8px;
        -webkit-border-radius : 8px;
        -moz-border-radius : 8px;
        }
        #backtotop:hover {
        opacity  : 0.9;
        }
    .pun .paged .posting {
        float: left;
    }

    a,a:link,a:hover{text-decoration:none!important}
    #content-container div#left{float:none;width:100%;padding:10px 0}
    *+ html #content-container div#main{margin-left:0}
    * html #content-container #main-content{overflow:visible;margin-right:0}
    * html #content-container div#main{margin-right:-99%;width:100%;float:none}
    .latest_topics{list-style:decimal-leading-zero outside none;text-align:left;margin:0!important;padding:0 5px 0 30px}
    .latest_topics li{position:relative}
    .pun{width:90%!important;}
    .main-head .h2,.main-head .h3,.main-head h1,.main-head h3,.main-head h2{color:#;font-family:Trebuchet MS;font-size:18px!important;font-variant:small-caps;font-weight:600!important}
    .pun .main-foot .h2,.pun .main-head .h2{float:left;height:18px;overflow:hidden;width:890px}
    #numRecent{display:none;position:absolute;right:12px;top:7px}
    #recentnew,#top_posters{background-color:#}
    .toppost_width{float:left; width: 320px!important}
    .recentWidth{float: right; width: 885px!important}
    .recentWidth .main-head{position: relative; height: 1.3em;overflow: hidden;}
    .recentWidth h3{position: absolute; left: 10px}
    .avatarthum img{height:70px!important;padding-right:10px}
    .loaddinng{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/loadin12.gif);background-position:center center;background-repeat:no-repeat;height:150px;width:180px}
    #checktip{position:absolute;right:10px;top:3px;z-index:300}
    #dulieutip, #dulieupostter,#tooltip .header,.imgstatus{display:none}
    #tooltip{background-color:#000;border-radius:3px;color:#FFF;opacity:0.8;padding:10px; border: 5px solid #000000;}
    /* END advanced recent topics ver 2.0 */
    a.mainmenu[href="/calendar"] {
        display: none;
    }.mainmenu[href="/login"] {
        display: none;
    }
    a.mainmenu[href="/faq"] {
        display: none;
    }
    a.mainmenu[href="/groups"] {
        display: none;
    }
    .frm-buttons {
        border: medium none !important;
        margin-left: -1%;
        text-align: center;
    }
    #text_edit {
        display: block !important;
    }
    .member-title {
        color: #fff !important;
    }
    a:link:hover, a:link:focus 
    {   
        text-shadow: -1px 1px 8px #000, 1px -1px 8px #000; 
    }
    a:link {
        text-decoration: none;
        text-shadow: none;
        -webkit-transition: 200ms linear 0s;
        -moz-transition: 200ms linear 0s;
        -o-transition: 200ms linear 0s;
        transition: 200ms linear 0s;
        outline: 0 none;
    }

    a:hover{
        text-decoration: none !important;
    }

    a:link {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }
    #chatbox{
    background-color: #1e1e1e !important;
    }

    .chatbox_row_1{
    background-color: #121212 !important;
    }

    #chatbox_members{
    background-color: #1e1e1e !important;
    }

    #chatbox_members .member-title{
    background-color: #121212 !important;
    }
    .chatbox_row_2{
    background-color: #1e1e1e !important;
    }

    #topbar1337 {
        position: absolute;
        top: 250px;
        left: 143px;
    }

    #cockmeat {
        position: absolute;
        top: 1px;
    }

    #topbar0 {
        position: absolute;
        top: 245px;
        right: 99px;
    }
    #loginslide {
      position: absolute;
        top: 250px;
        right: 500px;
        background: url(http://i40.servimg.com/u/f40/17/70/06/50/new_th12.png);
    }
    #topbar-1 {
        position: absolute;
        top: 250px;
        left: 143px;
    }
    #pun-visit, .main-box, #pun-about #qjump, div.main-head p.options, #main .module-advert .main-content {
        display: none;
    }
    .pun a:link, h1, h2, p, div {
        color: #fff;
        text-decoration: none;
    }
    .pun a:visited {
        color: #fff;
        text-decoration: none;
    }
    .pun a:hover, a:active {
        color: #666;
        text-decoration: none;
    }
    body {
        background: url(http://hitskin.com/themes/17/29/24/i_background.png) #fff;
        font-family: Helvetica;
        font-size: 11px;
        cursor: url('http://cur.cursors-4u.net/cursors/cur-4/cur330.cur'), progress;
    }
    .pun {
        width: 90%;
        min-width: 800px; 
        margin-top: 10px; 
        margin-bottom: 10px; 
        padding: 10px;
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 50px 0px 50px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px; 
    }
    .pun .main-content {
        margin-top: 10px; 
        margin-bottom: 10px;
        padding: 3px;
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    }
    .pun .main .main-content.message, .pun .main .main-content p.message {
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    }
    #pun-intro {
        background-color: transparent;
        border: none;
        width: 980px;
        margin: 0px auto; 
    }
    #pun-head #pun-navlinks {
        background-color: #222;
        border: 1px solid #111;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px; 
    }
    #pun-navlinks ul {
        list-style: none;
        text-align: center;
        margin-top: 5px; 
        margin-bottom: 5px; 
    }
    #pun-navlinks li {
        display: inline;
        font-size: 11px;
    }
    #pun-navlinks li a {
        margin-right: 1px;
        padding: 3px;
     
    }
    #pun-navlinks a, #pun-navlinks a:visited {
        color: #fff;
        text-decoration: none;
    }
    #pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
        text-decoration: none;
        color: #666;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border-radius: 3px; 
    }
    #pun-about {
        background-color: #222;
        border: 1px solid #111;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px; 
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        text-align: center; 
    }
    #pun-foot .center {
        background: url(http://i40.servimg.com/u/f40/17/00/71/83/coollo37.png) no-repeat right;
    }
    #stats {
        background-color: transparent;
        border: none; 
    } 
    #onlinelist {
        margin: 10px; 
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none; 
    }
    #onlinechat {
        background-color: transparent;
        border: none;
    } 
    .main-head , .main-foot, .pun .paged-foot, .pun .paged-head {
        background-color: transparent !important;
        border: none;
    }
    table.table tr td.tcr, .pun .frm .frm-form table {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none; 
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    .pun table.table th.tcl, .pun table.table th.tc2, .pun table.table th.tc3, .pun table.table th.tcr {
        background-color: transparent !important;
        border: none;
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    .pun .main table td.tc1, .pun .main table td.tc2, .pun .main table td.tc3,  .pun .main table td.tcr{
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none; 
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    .pun tbody.statused td.tcl {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none; 
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    .pun .post {
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px; 
    }
    .pun .postmain {
        background-color: transparent;
        border: none;
    }
    .pun .posthead {
        background-color: transparent;
        border: none;
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    .postfoot {
        background-color: transparent;
        border: none;
    }
    .pun .entry-content {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none;
        padding: 3px;
    }
    .pun .post .user {
        margin-top: 12px; 
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none;
        padding: 5px;
    }
    .pun .frm-form {
        background-color: transparent;
        border: none; 
    }
    .pun table.table td {
        background-color: transparent;
        border: none; 
    }
    #text_editor_textarea, .frm-form fieldset.frm-set .inputbox {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none;
        color: #fff;
        font-size: 11px;
        font-family: Helvetica; 
    }
    input {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border: none;
        color: #fff;
        font-size: 11px;
        font-family: Helvetica; 
    } 
    .faq dd, .main .frm-info, .pun .frm .frm-form table, fieldset.frm-set.multi {
        padding: 10px;
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        color: #fff;
        font-size: 12px;
        font-family: Helvetica; 
    }
    fieldset.frm-set, .main .main-content.frm {
        padding: 10px; 
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        color: #fff;
        font-size: 12px;
        font-family: Helvetica; 
    }
      .frm-buttons {
        padding: 10px; 
        border: none;
    }
    .entry-content blockquote {
        margin: 1em;
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    .codebox {
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    .codebox dd {
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        color: #fff;
        font-size: 11px;
        font-family: Helvetica;
    }
    #tabs {
        border: none;
        background-color: transparent; 
        color: #fff;
        font-size: 10px;
        font-family: Helvetica;
        text-decoration: none;
        align: center;
    }
    #tabs ul li {
        display: inline;
        font-size: 10px;
        list-style: none;
        text-align: center;
        align: center;
    }
    #tabs ul li.activetab a {
        border: none;
        background-color: transparent;
    }
    #tabs ul li.activetab a:hover {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border-radius: 3px;
    }
    #tabs ul li a {
        border: none;
        background-color: transparent;
    }
    #tabs ul li a:hover {
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08);
        border-radius: 3px;
    }
     .title-overview {
        border: none;
        background-color: transparent;
    }
    .overview {
        background-color: #222;
        border: 1px solid #111;
        border-radius: 0px 0px 0px 0px;
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    }
    #organic-tabs {
        background-color: transparent;
        border: none;
    }
    #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
    #explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
    #explore-nav li.last { margin-right: 0; }
    #explore-nav li a { display: block; padding: 5px; background: #222; color: #fff; font-size: 10px; text-align: center; border: 1px solid #111;
      -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;  }
    #explore-nav li a:hover { background-color: transparent; -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px; box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px; }
    #core, #classics { display: none; }
    #explore-nav li#ex-featured a.current, ul#featured li a:hover {  color: #666; }
    #explore-nav li#ex-core a.current, ul#core li a:hover {color: #666; }
    #explore-nav li#ex-classics a.current, ul#classics li a:hover { color: #666; }

    Or its the templates, cause i saw a lot of orange tags, when i put in the code after <body>
    • Back to top
    Nera.
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -
    • Post n°4

    Solved Re: Black slide in login panel on Forumotion

    Post by Nera. August 5th 2012, 10:59 pm

    The thing messing up your site is:: width: 740px; in this CSS part. Delete it.

    Code:
    #content {
        margin: 0 auto;
        padding: 20px;
        text-align: left;
        width: 740px;
    }

    You have a fiew JS errors on chat, tooltips etc. You need to correct it in order for your panel to work properly like mine.
    • Back to top
    xDroiidx
    avatar
    xDroiidx
    Forumember


    Posts : 95
    Reputation : 2
    Language : English
    • Post n°5

    Solved Re: Black slide in login panel on Forumotion

    Post by xDroiidx August 5th 2012, 11:33 pm

    Yes! thank you Nera Dawa i got it to work, you should move this to tips n tricks, and delete my posts form this, nice tutorial!
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51499
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°6

    Solved Re: Black slide in login panel on Forumotion

    Post by SLGray August 6th 2012, 2:53 am

    Topic Solved & Locked



    Black slide in login panel on Forumotion Slgray10

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