I want to know how i can make this login bar

Hy everyone, I want to know how can i do something like this https://2img.net/h/oi49.tinypic.com/53ju6e.jpg, this is a login pop-up bar or i don't know how to call'it. here is e link for that forum to understand what I try to explain: http://programi.serbianforum.info/forum.htm
If you give me a tutorial to learn to do that, i'l be very grateful.

I apologize for bad English but I hope you understand, and I hope to write corectly so I can understand something

I have seen that on other peoples forums, I would also like to know how to make that.

Edit: found the tutorial,click the link below. I set it up on my testboard, and it works perfectly. To do this you must be able to edit templates.

http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/

And how do you edit templates?

hey der are many javascripts i jst downloaded the set....anybody how to do it...

Anyone?

if you like I will share ... but you must reupload js, css and image files.
I will pack and upload later !

please wait ^^"
(Englist isnt my language)

you can read this tut : http://woork.blogspot.com/2008/03/sliding-top-panel-using-mootools_05.html

I'm not experience with CSS & HTML

Could someone give me a step by step process on installing this on forumotion PhpBB3.

oh no, it work on phpBB2 and punbb - in templates. Use code <!-- Begin .... --> and <!-- End .... -->

---

I guided a member - TR and asked him resolved this topic.
my code is not perfect ...

Englist isnt my language ! ^^"

newbieQ wrote:oh no, it work on phpBB2 and punbb - in templates. Use code <!-- Begin .... --> and <!-- End .... -->

---

I guided a member - TR and asked him resolved this topic.
my code is not perfect ...

Englist isnt my language ! ^^"

hey buddy, thanx 4 the reply but then da link u specified us "http://woork.blogspot.com/2008/03/sliding-top-panel-using-mootools_05.html" dat has a code 2 display some content n how 2 do da log in thing...

the best way i see useing it is. useing the html code to place in your overall template. this can be done only on phpbb2 or punnbb versions.

Code:

<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>

then you will want to add this to your css.
And keep in mind all links colors etc.. will have to be added to this and the style.

Code:

/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0

   The CSS, XHTML and design is released under Creative Common License 3.0:
   http://creativecommons.org/licenses/by-sa/3.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(../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(../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(../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(../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(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;  /*Panel will overlap  content */
    /*position: relative;*/  /*Panel will "push" the content down */
    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(../images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
   width: 94px;
   color: white;
   background: transparent url(../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;
}
 

then here is the styles that would also have to be adjusted and added as well.

Code:

/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0

   The CSS, XHTML and design is released under Creative Common License 3.0:
   http://creativecommons.org/licenses/by-sa/3.0/

*/     

html, body {border: 0; margin: 0; padding: 0;}

body {
     font: 85%/0.9 arial, helvetica, sans-serif;
   background: #99A989 url(../images/bg.jpg) repeat 0 0;
     line-height: 130%;
     width: 100%;
     min-width: 970px;
     color: black;
}

a {
   color: #0099CC;
   text-decoration: none;
}

a:hover {
   color: #00CCFF;
}

a img {
  border: none;/*remove border for linked images*/
}

h1 {
   font-size: 1.6em;
   height: 20px;
   padding-top: 0;
}

h2{
   font-size: 1.2em;
   height: 20px;
   padding-top: 0;
}

.highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}

/***** Main Layout ****/
#container {
     width: 100%;
     height: 100%;
     text-align: center;/* IE fix to center the page */
}

#content {
     width: 740px;
     margin: 0 auto;/* center the page in Firefox */
     text-align: left;
   padding: 20px;
}

then they provide you with images as well or you can use your own.
be sure when adding your images you use the direct link url.
i also provided the direct link for the images below if you want to use them?

BG

https://2img.net/h/oi49.tinypic.com/2gxekra.jpg

BT CLOSE

https://2img.net/h/oi48.tinypic.com/357kfgm.png

BT LOGIN

https://2img.net/h/oi48.tinypic.com/22ixcy.png

BT OPEN

https://2img.net/h/oi46.tinypic.com/2vsogsl.png

BT REGISTER

https://2img.net/h/oi48.tinypic.com/ev1b93.png

tab_b

https://2img.net/h/oi50.tinypic.com/vrt0zk.png

tab_I

https://2img.net/h/oi45.tinypic.com/16bybkx.png

tab_m

https://2img.net/h/oi49.tinypic.com/99o2o8.png

tab_r

https://2img.net/h/oi46.tinypic.com/2qjf8n7.png

so basically you have to add everthing to the style and css. after you have that add the first code to your overall header in the templates and publish. it seems rather easy to do. but of course i did not test it yet. when i have time latter i will test it out and may be make a code up that is ready for use. other then that good luck.. i will try to pm ankillian as well to see what he thinks.. him or jalo may have something that can do the same thing and more easy? dunno but i will send them a pm to take a look at the thread.

Honestly guy's and gals.
this seems like an awful lot of crap to go through for this.
But it's up to who ever if they want it or not.it seems like a lot of work for that feature though to me. so befor anyone starts going crazy with this. i would wait until ankiilian or other experienced css members comment on this first.. to me it seems like there has to be a better way?

i have sent rono a pm as well. i have seen rono create simular things like this not exact
but close so i would wait and see what ankillien and rono say first. i also have another sugestion alternitive.. but it will not look like the bar on the forum. but i might be able to get that look too.. so lets just wait first... lol

peace out for now

hey thanx 4 replaying...
Kirk i tried it its not working...its jst showing Log In | Register n a blank transparent bg...

ayush26 wrote:hey thanx 4 replaying...
Kirk i tried it its not working...its jst showing Log In | Register n a blank transparent bg...

well there is more to it.i sent a pm ankillien about here's is his quote.
the java code is over there.. but as far as hosting it somewhere and linking it to your forum.
is it realy worth it... lol

ankillien wrote:
Yes, thats pretty much work for anyone buddy.

The codes you provided there are not wrong but it requires something more than that.
The log in panel is actually powered by JavaScript and jQuery library which I don't know how to work with

It requires to download some JavaScript files, host them on a site and then link them to our forum.

I think Jalokim would be able to explain this better. Why not to ask it in expert advice only topic in staff room?


-ankillien

So to me it seems like to much to go through for a feature that's not even really doing much?
But everyone is different and like to have different things..I my self it's not something i would bother with..

if you like i can post this in jalos expert advice board in the staff room and see what he has to say and if perhaps he has a better way or a easier way to do it or explain it.
In the mean time i will try something similar to this but not exact.. i will just test a few things if i have something almost like it then i will post here.. then if not.. that's about all i can really help with on this one.. i just don't have the time to go through all these steps.. once again it's not really something for me and don't seem worth going through all that.

so let me know i can pass it along to jalo.. just give him time to receive it and go over it.

he res the java.
and be sure to read over here too. i basically just posted what was in the download for the images and tried to explain. but i did leave out the java part.. sorry about that.

Code:

$(document).ready(function() {
 
   // Expand Panel
   $("#open").click(function(){
      $("div#panel").slideDown("slow");   
   });   
 
   // Collapse Panel
   $("#close").click(function(){
      $("div#panel").slideUp("slow");   
   });      
 
   // Switch buttons from "Log In | Register" to "Close Panel" on click
   $("#toggle a").click(function () {
      $("#toggle a").toggle();
   });      
 
});

here is Reave's link.

Reave wrote:
Edit: found the tutorial,click the link below. I set it up on my testboard, and it works perfectly. To do this you must be able to edit templates.

http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/

ok ankillien too kthe liberty to figure it out and test it.
thanx again ankillien bang up job

ankillien wrote:Hey, I tried it on my test board and it works!
We just need to host two JS files and those images.
Once done it, the remaining thing is to link them to our forum

Here is the code...

Code:

<script src="JAVASCRIPT FILE URL HERE" type="text/javascript"></script>

This code goes inside <head> tags in overall_header_new template under general templates.

There are two different JavaScript files. Repeat this code for the other JS file. Save the template and publish it.

Add the CSS codes to the Stylesheet, link the images in the CSS code and save it.

Now we need to add the HTML code in index_body template.

Code:

<!-- panel -->
<div id="toppanel">
   <div id="panel">
      <div class="content clearfix">
         <div class="left">
            <h1>Welcome to Web-Kreation</h1>
            <h2>Sliding login panel Demo with jQuery</h2>      
            <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>

            <h2>Download</h2>
            <p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article &raquo;</a></p>
         </div>
         <div class="left">
            <!-- Login Form -->
            <form class="clearfix" action="#" method="post">
               <h1>Member Login</h1>

               <label class="grey" for="log">Username:</label>
               <input class="field" type="text" name="log" id="log" value="" size="23" />
               <label class="grey" for="pwd">Password:</label>
               <input class="field" type="password" name="pwd" id="pwd" size="23" />
                  <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Remember me</label>
                 <div class="clear"></div>
               <input type="submit" name="submit" value="Login" class="bt_login" />

               <a class="lost-pwd" href="#">Lost your password?</a>
            </form>
         </div>
         <div class="left right">         
            <!-- Register Form -->
            <form action="#" method="post">
               <h1>Not a member yet? Sign Up!</h1>            
               <label class="grey" for="signup">Username:</label>

               <input class="field" type="text" name="signup" id="signup" value="" size="23" />
               <label class="grey" for="email">Email:</label>
               <input class="field" type="text" name="email" id="email" size="23" />
               <label>A password will be e-mailed to you.</label>
               <input type="submit" name="submit" value="Register" class="bt_register" />
            </form>
         </div>
      </div>

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

    <!-- The tab on top -->   
   <div class="tab">
      <ul class="login">
          <li class="left">&nbsp;</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">&nbsp;</li>
      </ul>
   </div> <!-- / top -->
   
</div> <!--panel -->

The HTML code goes after {JAVASCRIPT} in the template code.
Save the template and publish it.

Now the panel should be working

Note : Normal file hosting sites don't seem to help us to host the JS files because the code they generate redirects us to the file download page and not the actual file. So, the panel won't work. We need to use some free web host to upload our JS files, I think. Copying the JS code in the template is not going to work since it is jQuery and it requires files to be hosted and linked via HTML <script> code.

Hope that helps

Spoiler:

ok great

yes i will add this over there now. thanx man great job.

hey really thanx but i m encored a problem i jst got da bar but the toggle action(sliding) is not happenin n also content is overlapped...

hey i jst removed the css code n tried i found the content resembling the page which was given as a demo...so i doubt if this work it ll not have iterface wit the forum,insense that it wont change for a register user n for the log in page....

ayush26 wrote:hey really thanx but i m encored a problem i jst got da bar but the toggle action(sliding) is not happenin n also content is overlapped...

hey i jst removed the css code n tried i found the content resembling the page which was given as a demo...so i doubt if this work it ll not have iterface wit the forum,insense that it wont change for a register user n for the log in page....

Well ankillien said he had it working on his test forum..
so i would go over all the steps again.I did about all i can help with. i mean honestly
i don't even like it. it seems to be too much work for a feature/option that's not even that great or significant.

But i understand everyone is different and like different things.
so just wait for another member or staff member to reply. i am sure someone can help get it working right.

nyways thanx...
no worries i will wait...

Hello,

ayush26 wrote:hey really thanx but i m encored a problem i jst got da bar but the toggle action(sliding) is not happenin n also content is overlapped...

Can you tell me where did you host the javascript files?
Normal file hosting sites will generate the download link for you and not the actual link to the file so it can be an issue for you.

ayush26 wrote:hey i jst removed the css code n tried i found the content resembling the page which was given as a demo...so i doubt if this work it ll not have iterface wit the forum,insense that it wont change for a register user n for the log in page....

The content you see in the slider is for demo only. You need to edit the HTML as per your need that you put in index_body template. The log in form can be used for Forumotion forums.

ankillien wrote:Hello,

ayush26 wrote:hey really thanx but i m encored a problem i jst got da bar but the toggle action(sliding) is not happenin n also content is overlapped...

Can you tell me where did you host the javascript files?
Normal file hosting sites will generate the download link for you and not the actual link to the file so it can be an issue for you.

ayush26 wrote:hey i jst removed the css code n tried i found the content resembling the page which was given as a demo...so i doubt if this work it ll not have iterface wit the forum,insense that it wont change for a register user n for the log in page....

The content you see in the slider is for demo only. You need to edit the HTML as per your need that you put in index_body template. The log in form can be used for Forumotion forums.

I tried uploading this on sites.google, but it just have me a download screen.
Do you know of a site that we can host .js files and get the actual content?

You can use any free web hosting site. Make a google search for free web host and you'll see plenty of sites.

I am just really confused. I thought you had to use some sort of special script hosting site.
Also, I would not know where to begin.
How would I get the jQuery file to display?
Do I have to insert the codes somewhere?

Let's say I tried to use Webs, a hosting site. Okay, so I made a page on the site.
*Blank* I really don't know what to do from here on.

Open your script (jquery) with a text editor (textpad, notepad),
copy the script, paste it/create a page and link to it.


You can create an Html page with script and link it.
Even thought the link ends with .htm it still works.
I link 2 scripts on Html pages for these demos:

*Mouseover slide down top bar + toggle shop items

*Invisible top bar (mouseover the top and forumotion links)


Script pages are linked like this

Code:

<script type="text/javascript" src="My forum Url/jquery-131minjs-h85.htm"></script>
<script type="text/javascript" src="My forum Url/jqueryeasing13js-h86.htm"></script>

View the page source of each demo.

Hey RoNo,
Are you sure if the .htm pages are going to work? I think it should be uploaded as .js only. I can be wrong

Linked Scripts on Html pages will work as long as it is
the actual script (only) and nothing else on the page.
The jQuery sliding bars that I linked to above will not slide
without the linked Script/Html pages. This method works on
forumotion forums & is a good alternative to off-site hosting.

hey thanx...
but i did all i uploaded
the css codes to css stylesheet
the javascripts to 110mb.com and linked as u said but b4 named it .js and now tried wit .htm too

and to above files made the changes of linking images and all..
but still its not working u can check it here..
http://lets.openu2.com

Okay, so I got it to show. The .htm pages did not work, it just showed the text from the .js file.
I tried some other link that gives you a download screen when you put the link into the url bar and that one worked.
Here is my new problem: is the login bar actually supposed to let you login? I tried this and it seems like there are no commands programmed into this.
Everything shows, but it won't let me use the bar to login to my account.
I changed the value to /login.forum, but it sends me to a screen where I have to re-type the information.

ecosystem, Check out "Panel Content" (below) for a Login Form.





ayush26, you need a "sliding" script. (below)

Link the script or add it to your page between script tags.
Example: <script> Sliding Script Here </script>


Also, add this code to your Css so the bar stretches all the way
across to the left side (or try using the entire Css sheet below)

Code:

* { margin: 0px; padding: 0px; }

Maybe this *Demo will help you guys.
(view the page source, take what you need)



[ here are the linked sheets used for the demo ]

jQuery

https://illiweb.com/fa/js_16/en.js (too long to post here)

Sliding script

Code:

$(document).ready(function() {
    
    // Expand Panel
    $("#open").click(function(){
       $("div#panel").slideDown("slow");
    
    });   
    
    // Collapse Panel
    $("#close").click(function(){
       $("div#panel").slideUp("slow");   
    });      
    
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
       $("#toggle a").toggle();
    });      
       
});

Css stylesheet

Code:

/*
 Name: Sliding Login Panel with jQuery 1.3.2
 Author: Jeremie Tisseau
 Author URI: http://web-kreation.com/
 Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
 Date: March 26, 2009
 Version: 1.0
 
    The CSS, XHTML and design is released under Creative Common License 3.0:
    http://creativecommons.org/licenses/by-sa/3.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://i16.servimg.com/u/f16/14/66/53/20/tab_b13.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://i16.servimg.com/u/f16/14/66/53/20/tab_l11.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://i16.servimg.com/u/f16/14/66/53/20/tab_r11.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://i16.servimg.com/u/f16/14/66/53/20/tab_m10.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://i86.servimg.com/u/f86/13/96/16/34/bt_ope10.png) no-repeat left 0;}
 .tab a.close {background: url(http://i86.servimg.com/u/f86/13/96/16/34/bt_clo10.png) no-repeat left 0;}
 .tab a:hover.open {background: url(http://i86.servimg.com/u/f86/13/96/16/34/bt_ope10.png) no-repeat left -19px;}
 .tab a:hover.close {background: url(http://i86.servimg.com/u/f86/13/96/16/34/bt_clo10.png) no-repeat left -19px;}
 
 /* sliding panel */
 #toppanel {
    position: absolute;  /*Panel will overlap  content */
    /*position: relative;*/  /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
 }
 
 #panel {
    width: 100%;
    height: 270px;
    color: #999999;
    background-image: url('http://fliptron.com/wordpress/wp-content/uploads/2007/06/black.png');
        background-repeat: repeat-xy;
 
    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;
 }
 
* { margin: 0px; padding: 0px; }

Panel Content (Greeting, Login Form, Useful Links List)

Code:

<body><!-- Panel --><div id="toppanel"><div id="panel"><div class="content clearfix">
<div class="left">
<!-- Greeting -->
<h1>Welcome to the Forum!</h1><form action="#" method="post"><p>This is the ______ Forum, where you can find ________. (fill in the blanks)<br>Enjoy!</p></form><h2>Register and login</h2><form action="#" method="post"><p>To view the forum topics you must register ... You can do this by clicking "register" in the navigation bar or click <a href="/profile.forum?mode=register">here</a>.If you are already our esteemed member <a href="/login.forum?connexion">sign in ...</a></p></form></div>
 
<div class="left">
<!-- Login Form --><form action="/login.forum" method="post" name="form_login"><h1>Log in</h1><label><span class="genmed">Username:</span> <input class="grey" type="text" size="10" name="username"></label> <label><span class="genmed">Password:</span> <input class="grey" type="password" size="10" name="password"></label> <label><span class="gensmall">Log me on automatically each visit</span> <input class="radio" type="checkbox" name="autologin" checked="checked"></label> <br><br><br>
<input class="mainoption" type="submit" name="login" value="Log in"><br><span class="gensmall"><a href="/profile.forum?mode=sendpassword">I forgot my password</a></span></form></div>

<div class="left right">
<!-- Links Form --><form action="#" method="post">
<h1>Useful links</h1><p>
<a href="YOUR LINK">Your Link 1</a><br>
<a href="YOUR LINK">Your Link 2</a><br>
<a href="YOUR LINK">Your Link 3</a><br>
<a href="YOUR LINK">Your Link 4</a><br>
<a href="YOUR LINK">Your Link 5</a></p></form></div></div></div>
 
<!-- Access Panel --><!-- The tab on top --><div class="tab"><ul class="login"><li class="left"> </li><li>Access</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#">Open Panel</a><a id="close" style="display: none;" class="close" href="#">Close Panel</a></li><li class="right"> </li></ul> </div><!-- / top --></div>

Edit the image Url's, forum Url's, sizes, colors etc.


If you want a transparent panel...
Replace the #Panel background image in the Css
With *this (download & upload it to your image host)

Hello RoNo

Can you tell me exactly how to install this script. At the moment i have the bar there, but its not possible to click on the + or the "Open bar"

I dont know where to put the "Panel Content" and the "Sliding script"
Please tell me where to put this codes in.

Edit:
Thats at top is solved.
Thats my current Problem. This bar is showing as a registred member too, any way to hide the bar for registred members?

tnx all, you can close the topic