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.

Black slide in login panel on Forumotion

3 posters

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

Go down

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
avatar
xDroiidx
Forumember

Posts : 95
Reputation : 2
Language : English

http://www.epicstep.forumotion.com

Back to top Go down

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 -->
Nera.
Nera.
Energetic

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

Back to top Go down

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>
avatar
xDroiidx
Forumember

Posts : 95
Reputation : 2
Language : English

http://www.epicstep.forumotion.com

Back to top Go down

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.
Nera.
Nera.
Energetic

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

Back to top Go down

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!
avatar
xDroiidx
Forumember

Posts : 95
Reputation : 2
Language : English

http://www.epicstep.forumotion.com

Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51572
Reputation : 3525
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

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