can anybody tell me this tutorial from sohtanaka i mean that where should i apply it and where.

http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

This goes before the </head> tag

Code:

 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){



   //Adjust panel height

   $.fn.adjustPanel = function(){

      $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset subpanel and ul height

      

      var windowHeight = $(window).height(); //Get the height of the browser viewport

      var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel   

      var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel)

      var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)

      

      if ( panelsub >= panelAdjust ) {    //If subpanel is taller than max height...

         $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height

         $(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size

      }

      else if ( panelsub < panelAdjust ) { //If subpanel is smaller than max height...

         $(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size)

      }

   };

   

   //Execute function on load

   $("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel

   $("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

   

   //Each time the viewport is adjusted/resized, execute the function

   $(window).resize(function () {

      $("#chatpanel").adjustPanel();

      $("#alertpanel").adjustPanel();

   });

   

   //Click event on Chat Panel + Alert Panel   

   $("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...

      if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...

         $(this).next(".subpanel").hide(); //Hide active subpanel

         $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger

      }

      else { //if subpanel is not active...

         $(".subpanel").hide(); //Hide all subpanels

         $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active

         $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger

         $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger

      }

      return false; //Prevent browser jump to link anchor

   });

   

   //Click event outside of subpanel

   $(document).click(function() { //Click anywhere and...

      $(".subpanel").hide(); //hide subpanel

      $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger

   });

   $('.subpanel ul').click(function(e) {

      e.stopPropagation(); //Prevents the subpanel ul from closing on click

   });

   

   //Delete icons on Alert Panel

   $("#alertpanel li").hover(function() {

      $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover

   },function() {

      $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out

   });











   

});

</script>


This goes before the </body> tag.

Code:

<h1><a href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/">Facebook Style Footer Admin Panel w/ CSS &amp; jQuery- <span>Tutorial by <a href="http://www.SohTanaka.com">Soh Tanaka</a></span></h1>

<div id="footpanel">

   <ul id="mainpanel">       

        <li><a href="http://www.designbombs.com" class="home">Inspiration <small>Design Bombs</small></a></li>

        <li><a href="http://www.designbombs.com" class="profile">View Profile <small>View Profile</small></a></li>

        <li><a href="http://www.designbombs.com" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>

        <li><a href="http://www.designbombs.com" class="contacts">Contacts <small>Contacts</small></a></li>

        <li><a href="http://www.designbombs.com" class="messages">Messages (10) <small>Messages</small></a></li>

        <li><a href="http://www.designbombs.com" class="playlist">Play List <small>Play List</small></a></li>

        <li><a href="http://www.designbombs.com" class="videos">Videos <small>Videos</small></a></li>

        <li id="alertpanel">

           <a href="#" class="alerts">Alerts</a>

            <div class="subpanel">

            <h3><span> – </span>Notifications</h3>

            <ul>

               <li class="view"><a href="#">View All</a></li>

               <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Et voco </a> Duis vel quis at metuo obruo, turpis quadrum nostrud <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Tego</a> nulla eum probo metuo nullus indoles os consequat commoveo os<a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Nonummy</a> nulla eum probo metuo nullus indoles os consequat commoveo <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Tego</a> minim autem aptent et jumentum metuo uxor nibh euismod si <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

            </ul>

            </div>

        </li>

        <li id="chatpanel">

           <a href="#" class="chat">Friends (<strong>18</strong>) </a>

            <div class="subpanel">

            <h3><span> – </span>Friends Online</h3>

            <ul>

               <li><span>Family Members</span></li>

               <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><span>Other Friends</span></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

            </ul>

            </div>

        </li>

       

       

   </ul>

</div>







And put the css in your css

Code:

body {

   background: #7f7f7f url(background.gif) no-repeat center top;

   margin: 0;

   padding: 0;

   font: 10px normal Verdana, Arial, Helvetica, sans-serif;

   height: 100%;

}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

h1 {

   font-size: 1.2em;

   padding: 5px 10px;

   color: #ccc;

   width: 940px;

   margin: 0 auto;

}

h1 a {   color: #fff; }

h1 span {font-weight: normal;}

















#footpanel {

   position: fixed;

   bottom: 0; left: 0;

   z-index: 9999; /*--Keeps the panel on top of all other elements--*/

   background: #e3e2e2;

   border: 1px solid #c3c3c3;

   border-bottom: none;

   width: 94%;

   margin: 0 3%;

}



*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/

   margin-top: -1px; /*--prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/

   position: absolute;

   top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));

}



#footpanel ul {

   padding: 0; margin: 0;

   float: left;

   width: 100%;

   list-style: none;

   border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/

   font-size: 1.1em;

}

#footpanel ul li{

   padding: 0; margin: 0;

   float: left;

   position: relative;

}

#footpanel ul li a{

   padding: 5px;

   float: left;

   text-indent: -9999px;

   height: 16px; width: 16px;

   text-decoration: none;

   color: #333;

   position: relative;

}

html #footpanel ul li a:hover{   background-color: #fff; }

html #footpanel ul li a.active { /*--Active state when subpanel is open--*/

   background-color: #fff;

   height: 17px;

   margin-top: -2px; /*--Push it up 2px to attach the active button to subpanel--*/

   border: 1px solid #555;

   border-top: none;

   z-index: 200; /*--Keeps the active area on top of the subpanel--*/

   position: relative;

}





#footpanel a.home{   

   background: url(home.png) no-repeat 15px center;

   width: 50px;

   padding-left: 40px;

   border-right: 1px solid #bbb;

   text-indent: 0; /*--Reset text indent--*/

}

a.profile{   background: url(user.png) no-repeat center center;  }

a.contacts{   background: url(address_book.png) no-repeat center center; }

a.playlist{   background: url(document_music_playlist.png) no-repeat center center; }

a.videos{   background: url(film.png) no-repeat center center; }

a.messages{   background: url(mail.png) no-repeat center center; }

a.editprofile{   background: url(wrench_screwdriver.png) no-repeat center center; }

#footpanel a.chat{   

   background: url(balloon.png) no-repeat 15px center;

   width: 126px;

   border-left: 1px solid #bbb;

   border-right: 1px solid #bbb;

   padding-left: 40px;

   text-indent: 0; /*--Reset text indent--*/

}

a.alerts{   background: url(newspaper.png) no-repeat center center;    }



#footpanel li#chatpanel, #footpanel li#alertpanel {   float: right; }  /*--Right align the chat and alert panels--*/



#footpanel a small {  /*--panel tool tip styles--*/

   text-align: center;

   width: 70px;

   background: url(pop_arrow.gif) no-repeat center bottom;

   padding: 5px 5px 11px;

   display: none; /*--Hide by default--*/

   color: #fff;

   font-size: 1em;

   text-indent: 0;

}

#footpanel a:hover small{

   display: block; /*--Show on hover--*/

   position: absolute;

   top: -35px; /*--Position tooltip 35px above the list item--*/

   left: 50%;

   margin-left: -40px; /*--Center the tooltip--*/

   z-index: 9999;

}











#footpanel ul li div a { /*--Reset link style for subpanel links--*/

   text-indent: 0;

   width: auto;

   height: auto;

   padding: 0;

   float: none;

   color: #00629a;

   position: static;

}

#footpanel ul li div a:hover {   text-decoration: underline; } /*--Reset link style for subpanel links--*/



#footpanel .subpanel {

   position: absolute;

   left: 0; bottom: 27px;

   display: none;   /*--Hide by default--*/

   width: 198px;

   border: 1px solid #555;

   background: #fff;

   overflow: hidden;

   padding-bottom: 2px;

}

#footpanel h3 {

   background: #526ea6;

   padding: 5px 10px;

   color: #fff;

   font-size: 1.1em;

   cursor: pointer;

}

#footpanel h3 span {

   font-size: 1.5em;

   float: right;

   line-height: 0.6em;   

   font-weight: normal;

}

#footpanel .subpanel ul{

   padding: 0; margin: 0;

   background: #fff;

   width: 100%;

   overflow: auto;

}

#footpanel .subpanel li{

   float: none; /*--Reset float--*/

   display: block;

   padding: 0; margin: 0;

   overflow: hidden;

   clear: both;

   background: #fff;

   position: static;  /*--Reset relative positioning--*/

   font-size: 0.9em;

}



#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }

#chatpanel .subpanel li span {

   padding: 5px;

   background: #fff;

   color: #777;

   float: left;

}

#chatpanel .subpanel li a img {

   float: left;

   margin: 0 5px;

}

#chatpanel .subpanel li a{

   padding: 3px 0;   margin: 0;

   line-height: 22px;

   height: 22px;

   background: #fff;

   display: block;

}

#chatpanel .subpanel li a:hover {

   background: #3b5998;

   color: #fff;

   text-decoration: none;

}





#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }

#alertpanel .subpanel li {

   border-top: 1px solid #f0f0f0;

   display: block;

}

#alertpanel .subpanel li p {padding: 5px 10px;}

#alertpanel .subpanel li a.delete{

   background: url(delete_x.gif) no-repeat;

   float: right;

   width: 13px; height: 14px;

   margin: 5px;

   text-indent: -9999px;

   visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/

}

#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }

#footpanel #alertpanel li.view {

   text-align: right;

   padding: 5px 10px 5px 0;

}


I guess some parts won't shop up , Like the friends and more.
Also add your own iamges and change the titles

Topic moved to HTML forum

blade99,
I advice you to learn HTML. You should learn at least the basics so you can understand the difference between HTML, CSS and JS codes and know where you need to put them.

@Emillio it dont show.

@ankillienok sorry!

Hope you will start learning soon

Btw, the code doesn't work because of the jQ link is not full.

Replace this...

Code:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

with this one...

Code:

<script type="text/javascript" src="https://ajax.googleapis.com
/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

where should i apply this on overall_header template or simple_header i applied to overall_header template and simple_header template but still dont show? whats the problem i think needs picture?

Put this in overall_header before </head>

Code:

<script type="text/javascript" src="https://ajax.googleapis.com
/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  //Adjust panel height

  $.fn.adjustPanel = function(){

      $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset subpanel and ul height

      var windowHeight = $(window).height(); //Get the height of the browser viewport

      var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel 

      var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel)

      var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)

      if ( panelsub >= panelAdjust ) {    //If subpanel is taller than max height...

        $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height

        $(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size

      }

      else if ( panelsub < panelAdjust ) { //If subpanel is smaller than max height...

        $(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size)

      }

  };

  //Execute function on load

  $("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel

  $("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

  //Each time the viewport is adjusted/resized, execute the function

  $(window).resize(function () {

      $("#chatpanel").adjustPanel();

      $("#alertpanel").adjustPanel();

  });

  //Click event on Chat Panel + Alert Panel 

  $("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...

      if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...

        $(this).next(".subpanel").hide(); //Hide active subpanel

        $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger

      }

      else { //if subpanel is not active...

        $(".subpanel").hide(); //Hide all subpanels

        $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active

        $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger

        $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger

      }

      return false; //Prevent browser jump to link anchor

  });

  //Click event outside of subpanel

  $(document).click(function() { //Click anywhere and...

      $(".subpanel").hide(); //hide subpanel

      $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger

  });

  $('.subpanel ul').click(function(e) {

      e.stopPropagation(); //Prevents the subpanel ul from closing on click

  });

  //Delete icons on Alert Panel

  $("#alertpanel li").hover(function() {

      $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover

  },function() {

      $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out

  });
});
</script>

This code goes in the CSS...

Code:

h1 {

  font-size: 1.2em;

  padding: 5px 10px;

  color: #ccc;

  width: 940px;

  margin: 0 auto;

}

h1 a {  color: #fff; }

h1 span {font-weight: normal;}

#footpanel {

  position: fixed;

  bottom: 0; left: 0;

  z-index: 9999; /*--Keeps the panel on top of all other elements--*/

  background: #e3e2e2;

  border: 1px solid #c3c3c3;

  border-bottom: none;

  width: 94%;

  margin: 0 3%;

}

*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/

  margin-top: -1px; /*--prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/

  position: absolute;

  top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));

}



#footpanel ul {

  padding: 0; margin: 0;

  float: left;

  width: 100%;

  list-style: none;

  border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/

  font-size: 1.1em;

}

#footpanel ul li{

  padding: 0; margin: 0;

  float: left;

  position: relative;

}

#footpanel ul li a{

  padding: 5px;

  float: left;

  text-indent: -9999px;

  height: 16px; width: 16px;

  text-decoration: none;

  color: #333;

  position: relative;

}

html #footpanel ul li a:hover{  background-color: #fff; }

html #footpanel ul li a.active { /*--Active state when subpanel is open--*/

  background-color: #fff;

  height: 17px;

  margin-top: -2px; /*--Push it up 2px to attach the active button to subpanel--*/

  border: 1px solid #555;

  border-top: none;

  z-index: 200; /*--Keeps the active area on top of the subpanel--*/

  position: relative;

}

#footpanel a.home{ 

  background: url(home.png) no-repeat 15px center;

  width: 50px;

  padding-left: 40px;

  border-right: 1px solid #bbb;

  text-indent: 0; /*--Reset text indent--*/

}

a.profile{  background: url(user.png) no-repeat center center;  }

a.contacts{  background: url(address_book.png) no-repeat center center; }

a.playlist{  background: url(document_music_playlist.png) no-repeat center center; }

a.videos{  background: url(film.png) no-repeat center center; }

a.messages{  background: url(mail.png) no-repeat center center; }

a.editprofile{  background: url(wrench_screwdriver.png) no-repeat center center; }

#footpanel a.chat{ 

  background: url(balloon.png) no-repeat 15px center;

  width: 126px;

  border-left: 1px solid #bbb;

  border-right: 1px solid #bbb;

  padding-left: 40px;

  text-indent: 0; /*--Reset text indent--*/

}

a.alerts{  background: url(newspaper.png) no-repeat center center;    }

#footpanel li#chatpanel, #footpanel li#alertpanel {  float: right; }  /*--Right align the chat and alert panels--*/

#footpanel a small {  /*--panel tool tip styles--*/

  text-align: center;

  width: 70px;

  background: url(pop_arrow.gif) no-repeat center bottom;

  padding: 5px 5px 11px;

  display: none; /*--Hide by default--*/

  color: #fff;

  font-size: 1em;

  text-indent: 0;

}

#footpanel a:hover small{

  display: block; /*--Show on hover--*/

  position: absolute;

  top: -35px; /*--Position tooltip 35px above the list item--*/

  left: 50%;

  margin-left: -40px; /*--Center the tooltip--*/

  z-index: 9999;

}

#footpanel ul li div a { /*--Reset link style for subpanel links--*/

  text-indent: 0;

  width: auto;

  height: auto;

  padding: 0;

  float: none;

  color: #00629a;

  position: static;

}

#footpanel ul li div a:hover {  text-decoration: underline; } /*--Reset link style for subpanel links--*/



#footpanel .subpanel {

  position: absolute;

  left: 0; bottom: 27px;

  display: none;  /*--Hide by default--*/

  width: 198px;

  border: 1px solid #555;

  background: #fff;

  overflow: hidden;

  padding-bottom: 2px;

}

#footpanel h3 {

  background: #526ea6;

  padding: 5px 10px;

  color: #fff;

  font-size: 1.1em;

  cursor: pointer;

}

#footpanel h3 span {

  font-size: 1.5em;

  float: right;

  line-height: 0.6em; 

  font-weight: normal;

}

#footpanel .subpanel ul{

  padding: 0; margin: 0;

  background: #fff;

  width: 100%;

  overflow: auto;

}

#footpanel .subpanel li{

  float: none; /*--Reset float--*/

  display: block;

  padding: 0; margin: 0;

  overflow: hidden;

  clear: both;

  background: #fff;

  position: static;  /*--Reset relative positioning--*/

  font-size: 0.9em;

}

#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }

#chatpanel .subpanel li span {

  padding: 5px;

  background: #fff;

  color: #777;

  float: left;

}

#chatpanel .subpanel li a img {

  float: left;

  margin: 0 5px;

}

#chatpanel .subpanel li a{

  padding: 3px 0;  margin: 0;

  line-height: 22px;

  height: 22px;

  background: #fff;

  display: block;

}

#chatpanel .subpanel li a:hover {

  background: #3b5998;

  color: #fff;

  text-decoration: none;

}

#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }

#alertpanel .subpanel li {

  border-top: 1px solid #f0f0f0;

  display: block;

}

#alertpanel .subpanel li p {padding: 5px 10px;}

#alertpanel .subpanel li a.delete{

  background: url(delete_x.gif) no-repeat;

  float: right;

  width: 13px; height: 14px;

  margin: 5px;

  text-indent: -9999px;

  visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/

}

#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }

#footpanel #alertpanel li.view {

  text-align: right;

  padding: 5px 10px 5px 0;

}

and this code should be added in overall_header before </body> tag...

Code:

<h1><a href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/">Facebook Style Footer Admin Panel w/ CSS &amp; jQuery- <span>Tutorial by <a href="http://www.SohTanaka.com">Soh Tanaka</a></span></h1>

<div id="footpanel">

  <ul id="mainpanel">     

        <li><a href="http://www.designbombs.com" class="home">Inspiration <small>Design Bombs</small></a></li>

        <li><a href="http://www.designbombs.com" class="profile">View Profile <small>View Profile</small></a></li>

        <li><a href="http://www.designbombs.com" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>

        <li><a href="http://www.designbombs.com" class="contacts">Contacts <small>Contacts</small></a></li>

        <li><a href="http://www.designbombs.com" class="messages">Messages (10) <small>Messages</small></a></li>

        <li><a href="http://www.designbombs.com" class="playlist">Play List <small>Play List</small></a></li>

        <li><a href="http://www.designbombs.com" class="videos">Videos <small>Videos</small></a></li>

        <li id="alertpanel">

          <a href="#" class="alerts">Alerts</a>

            <div class="subpanel">

            <h3><span> – </span>Notifications</h3>

            <ul>

              <li class="view"><a href="#">View All</a></li>

              <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Et voco </a> Duis vel quis at metuo obruo, turpis quadrum nostrud <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Tego</a> nulla eum probo metuo nullus indoles os consequat commoveo os<a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Nonummy</a> nulla eum probo metuo nullus indoles os consequat commoveo <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Tego</a> minim autem aptent et jumentum metuo uxor nibh euismod si <a href="#">lobortis facilisis</a>.</p></li>

                <li><a href="#" class="delete">X</a><p><a href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a href="#">lobortis facilisis</a>.</p></li>

            </ul>

            </div>

        </li>

        <li id="chatpanel">

          <a href="#" class="chat">Friends (<strong>18</strong>) </a>

            <div class="subpanel">

            <h3><span> – </span>Friends Online</h3>

            <ul>

              <li><span>Family Members</span></li>

              <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><span>Other Friends</span></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>

            </ul>

            </div>

        </li>
  </ul>

</div>

I'm not sure how many of you are aware of this, but forumotion loads jQuery 1.3.2 on every page. It actually causes problems with Chrome if you load an additional copy of jQuery, because Chrome does not properly resolve function conflicts.

This is why Chrome has problems with the forumotion WYSIWYG/HTML editors licensed from vBulletin. The vBulletin editor scripts create functions with names that already exist in other forumotion scripts, and Chrome accesses the wrong initialization function.

The moral is: use the jQuery 1.3.2 loaded by forumotion, or if you're using phpBB2 or PunBB, you can modify the overall_header template to instead load the latest version of jQuery. I personally find the 1.3.2 version to be more stable (and much faster!) than the current 1.4.4 version, so I use 1.3.2 and stay away from jQuery features added after 1.3.2.

still not showing..!

blade99 wrote:still not showing..!

Well, I have told you all you need to do. Now if it won't work, I can't do anything.

I can make it work if you allow me to access your founder account and let me make the changes. But I can't do this for free.

ahhh whats the needs so you will apply it to my forum? i had remove this codes because it dont work.

I don't understand why experienced users try to help people that have absolutely no programming knowledge, because you can guarantee that they will do something wrong even though it's there in plain English what to do. You will have to learn the very basics of HTML and CSS before you even attempt this.

or let Ani do it for you for a fee

Ok,

Code:

#footpanel {
   position: fixed;
   bottom: 0; left: 0;
   z-index: 9999; /*--Keeps the panel on top of all other elements--*/
   background: #e3e2e2;
   border: 1px solid #c3c3c3;
   border-bottom: none;
   width: 94%;
   margin: 0 3%;
}
*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
   margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
   position: absolute;
   top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
#footpanel ul {
   padding: 0; margin: 0;
   float: left;
   width: 100%;
   list-style: none;
   border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
   font-size: 1.1em;
}
#footpanel ul li{
   padding: 0; margin: 0;
   float: left;
   position: relative;
}
#footpanel ul li a{
   padding: 5px;
   float: left;
   text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
   height: 16px; width: 16px;
   text-decoration: none;
   color: #333;
   position: relative;
}
html #footpanel ul li a:hover{   background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
   background-color: #fff;
   height: 17px;
   margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
   border: 1px solid #555;
   border-top: none;
   z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
   position: relative;
}
#footpanel a.home{
   background: url(home.png) no-repeat 15px center;
   width: 50px;
   padding-left: 40px;
   border-right: 1px solid #bbb;
   text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
a.profile{ background: url(user.png) no-repeat center center;  }
a.editprofile{ background: url(wrench_screwdriver.png) no-repeat center center; }
a.contacts{ background: url(address_book.png) no-repeat center center; }
a.messages{ background: url(mail.png) no-repeat center center; }
a.playlist{ background: url(document_music_playlist.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
   background: url(balloon.png) no-repeat 15px center;
   width: 126px;
   border-left: 1px solid #bbb;
   border-right: 1px solid #bbb;
   padding-left: 40px;
   text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel {   float: right; }
#footpanel a small {
   text-align: center;
   width: 70px;
   background: url(pop_arrow.gif) no-repeat center bottom;
   padding: 5px 5px 11px;
   display: none; /*--Hide by default--*/
   color: #fff;
   font-size: 1em;
   text-indent: 0;
}
#footpanel a:hover small{
   display: block; /*--Show on hover--*/
   position: absolute;
   top: -35px; /*--Position tooltip 35px above the list item--*/
   left: 50%;
   margin-left: -40px; /*--Center the tooltip--*/
   z-index: 9999;
}

Go to overall_header template and find </head>. Add the above code right before it.

Now find <body> in the same template and add this codes after that...

Code:

<div id="footpanel">
    <ul id="mainpanel">
        <li><a href="#" class="home">Inspiration <small>Design Bombs</small></a></li>
        <li><a href="#" class="profile">View Profile <small>View Profile</small></a></li>
        <li><a href="#" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>
        <li><a href="#" class="contacts">Contacts <small>Contacts</small></a></li>
        <li><a href="#" class="messages">Messages (10) <small>Messages</small></a></li>
        <li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
        <li><a href="#" class="videos">Videos <small>Videos</small></a></li>
        <li id="alertpanel"><a href="#" class="alerts">Alerts</a></li>
        <li id="chatpanel"><a href="#" class="chat">Friends (<strong>18</strong>)</a></li>
    </ul>
</div>

Now save to template, publish it and refresh the forum index. It should show up now. Note that the images won't show up since they are hosted on tutorial site. To make them show up on your site, you need to host them on your image host account and add the URLs in the CSS codes

Hope it helps. If it won't work and you want me to do it on your forum, PM me.

@Dion,

Thanks for the advise I usually forget that FM already has a jQuery library installed so I add the script tag to load it from google.

still not showing what forum version needed? i apply it it shows on the upper of the forum.

It will work on both punbb and phpbb2.

Could I get the link where you are trying to install it