Choose from our various pricing plans. There is a package for everyone!


Nice full CP dropdown box

View previous topic View next topic Go down

Nice full CP dropdown box

Post by Michael_vx on Tue Feb 10, 2015 10:38 am

before you you read you must know the codes in the topic was translated from Arabic to English and Edited so it can be used in many ways

i like to share a good toolbar have 3 items 1 login toolbar 2 general user toolbar 3 admin toolbar
the 1st thing you should knoow this code will take 2 or 3 widgets this as you wish
the toolbar is stucked with the top by it self
now the 1st widget is for visitors
image

--> Tutorials, tips and tricks <--
nice Full CP dropdown box



1º - 1st box for Visitors
add a Widget with this code

Code: Select Content
Code:
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" /> <style>                        #login {                        overflow: visible;                        height: auto;                        -webkit-transition:  margin-top 0.5s ease-in-out 0s;                        -moz-transition:  margin-top 0.5s ease-in-out 0s;                        -o-transition:    margin-top 0.5s ease-in-out 0s;                        transition:    margin-top 0.5s ease-in-out 0s;                                   }                                   /* Login Panel I */                        #topp {                        height: 38px;                        position: relative;                        }                                   #topp ul.login {                        display: blue;                        position: relative;                        float: right;                        clear: right;                        height: 38px;                        width: auto;                        font-weight: bold;                        line-height: 38px;                        margin: 0;                        right: 150px;                        color: white;                        font-size: 100%;                        text-align: center;                        padding-right: 45px;                        }                                   #topp ul.login li.left {                        height: 38px;                        width: 45px;                        padding: 0;                        margin: 0;                        display: blue;                        float: left;                        }                                   #topp ul.login li {                        text-align: left;                        padding: 0 6px;                        display: blue;                        float: left;                        height: 38px;                        }                        #topp ul.login li a {color: #9CCCFF;}                        #topp ul.login li a:hover {color: white;}                                   /* Login Panel */                        #topp {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}                                   #topp ul.login {                        background: url(http://micsoft.xp3.biz/micbar/images/login_r.png) no-repeat right 0;}                                   #topp ul.login li.left {                        background: url(http://micsoft.xp3.biz/micbar/images/login_l.png) no-repeat left 0;}                                   #topp ul.login li {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}                                   /*Login*/                        /* toggle effect - show/hide login*/                        #login {                        background: #1E1E1E;}                                   #login .loginContent input:focus.field {                        background: #1E1E1E;}                                   #login .loginContent{padding-top:0px;width:790px;height:120px;}                                   #login .loginContent input.button_login {                               background: transparent            url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg)            no-repeat 0 0;}                                   #login .loginClose a {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}                                   #login .loginClose a:hover {                               background:            url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg)            no-repeat right -20px;}                        </style>        <!--                                                                          Login                                                                          -->        <div _moz_abspos="white" id="loginn" style="display:            block;position: absolute;left: 0px;top: 0px;width: 100%;">               <div id="login" style="margin-top: -125px;">               <div class="loginContent">               <table style="width:100%;" border="0">               <tbody>        <tr>               <td style="text-align:center;">               <table _moz_resizing="true" border="0">               <tbody>        <tr>               <td>        <script>                        jQuery(document).ready(function(){                          jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {                              link = jQuery('.panel dl:first img', data).attr('src');                              if(link){                                jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');                              }else{                                jQuery('#avatar').html('');                              }                          });                        });                               </script>        <div id="avatar">               <center>        <img src="http://i53.tinypic.com/1e1fex.gif" />        </center>               </div>               </td>               <td style="color: rgb(102, 0, 0);">               <form method="post" name="form_login" action="/login.forum">               <table _moz_resizing="true" style="PADDING-LEFT: 20px" border="0" cellpadding="0" cellspacing="3">               <tbody>        <tr>               <td>        <span class="genmed"><img src="http://i65.servimg.com/u/f65/13/95/29/87/56x76311.gif" /> </span>        </td>               <td>        <input id="Post" value="" size="10" name="username" type="text" />        </td>               <td>        <input checked="" name="autologin" type="checkbox" /><span style="color: rgb(238, 238, 238); font-weight: bold;" span="" lang="ar-sa">save my info<a href="../register?agreed=true&step=2">Register now</a></span>        </td>               </tr>               <tr>               <td>        <span class="genmed"><img src="http://i65.servimg.com/u/f65/13/95/29/87/a3d76410.gif" /> </span>        </td>               <td>        <input id="Post" value="" size="10" name="password" type="password" />        </td>               <td>        <input class="mainoption" tabindex="104" value="Login" name="login" type="submit" />        </td>               </tr>               </tbody>        </table>               </form><span style="font-size: 1.2em;"><span style="font-size: 18px; color: rgb(0, 255, 255);"><span style="font-weight: bold;"></span></span><span style="font-weight: bold;"><span style="color: rgb(0, 255, 255);"><br /></span></span></span>        </td>               </tr>               </tbody>        </table>               </td>               <td style="text-align:center;">        <span style="font-size: 1.2em; color: rgb(0, 255, 255);"><strong>to Enjoiy the site with full Possibilities<br />you must login</strong></span><span style="font-size: 1.2em;"><a style="color: rgb(102, 0, 0);" href="../profile.forum?mode=editprofile&page_profil=avatars"></a></span><br />        </td>               <td style="text-align: center; color: rgb(0, 255, 255);">        <span style="font-size: 1.2em;"><strong></strong><br /> </span>        </td>               <td style="text-align: center; color: rgb(0, 255, 255);">        <span style="font-size: 1.2em;"><strong></strong></span><span style="font-size: 1.2em;"><br /> </span>        </td>               </tr>               </tbody>        </table>               </div>               </div>               <!--                                                                          /login                                                                          -->        <div id="container">               <div style="color: rgb(0, 255, 255);" id="topp">               <!--                                                                          login                                                                          -->        <ul class="login">               <li class="left">               </li>               <li>        <a id="toggleLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')?            '-125px' : '0px');">Login by Michael_vx</a>        </li>               </ul>               <!--                                                                          / login                                                                          -->        </div>               <!--                                                                          / topp                                                                          -->        <div class="clearfix">               </div>               </div>               <p>               </p>        </div>


2º - 2nd box for users and mods and admins if you like to skip the 3d box
make new Widget with this code

Code: Select Content
Code:
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" /> <style>                        #login {                        overflow: visible;                        height: auto;                        -webkit-transition:  margin-top 0.5s ease-in-out 0s;                        -moz-transition:  margin-top 0.5s ease-in-out 0s;                        -o-transition:    margin-top 0.5s ease-in-out 0s;                        transition:    margin-top 0.5s ease-in-out 0s;                                   }                                   /* Login Panel I */                        #topp {                        height: 38px;                        position: relative;                        }                                   #topp ul.login {                        display: blue;                        position: relative;                        float: right;                        clear: right;                        height: 38px;                        width: auto;                        font-weight: bold;                        line-height: 38px;                        margin: 0;                        right: 150px;                        color: white;                        font-size: 100%;                        text-align: center;                        padding-right: 45px;                        }                                   #topp ul.login li.left {                        height: 38px;                        width: 45px;                        padding: 0;                        margin: 0;                        display: blue;                        float: left;                        }                                   #topp ul.login li {                        text-align: left;                        padding: 0 6px;                        display: blue;                        float: left;                        height: 38px;                        }                        #topp ul.login li a {color: #9CCCFF;}                        #topp ul.login li a:hover {color: white;}                                   /* Login Panel */                        #topp {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}                                   #topp ul.login {                        background: url(http://micsoft.xp3.biz/micbar/images/login_r.png) no-repeat right 0;}                                   #topp ul.login li.left {                        background: url(http://micsoft.xp3.biz/micbar/images/login_l.png) no-repeat left 0;}                                   #topp ul.login li {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}                                   /*Login*/                        /* toggle effect - show/hide login*/                        #login {                        background: #1E1E1E;}                                   #login .loginContent input:focus.field {                        background: #1E1E1E;}                                   #login .loginContent{padding-top:0px;width:790px;height:120px;}                                   #login .loginContent input.button_login {                               background: transparent            url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg)            no-repeat 0 0;}                                   #login .loginClose a {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}                                   #login .loginClose a:hover {                               background:            url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg)            no-repeat right -20px;}                        </style>        <!--                                                                            Login                                                                            -->        <div _moz_abspos="white" id="loginn" style="display:            block;position: absolute;left: 0px;top: 0px;width: 100%;">               <div id="login" style="margin-top: -125px;">               <div class="loginContent">               <table _moz_resizing="true" style="width:100%;" border="0">               <tbody>        <tr>               <td style="text-align:center;">               <table _moz_resizing="true" border="0">               <tbody>        <tr>               <td>        <script>                        jQuery(document).ready(function(){                          jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {                              link = jQuery('.panel dl:first img', data).attr('src');                              if(link){                                jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');                              }else{                                jQuery('#avatar').html('');                              }                          });                        });                               </script>        <div id="avatar">               <center>        <img src="http://i53.tinypic.com/1e1fex.gif" />        </center>               </div>               </td>               <td style="color: rgb(102, 0, 0);">        <span style="font-size: 1.0em;"> <span style="font-size: 10px;"><span style="font-size: 10px; color: rgb(0, 255, 255);"><span style="font-weight: bold;">Hi again</span><br />{USERLINK}</span><br style="color: rgb(0, 255, 255);" /></span><span style="font-size: 10px;"><span style="font-weight: bold; color: rgb(0, 255, 255);">you have</span><strong style="color: rgb(0, 255, 255);">:</strong><span style="color: rgb(0, 255, 255);">{USERCOUNTPOST}<span style="font-weight: bold;"></span></span></span><span style="font-weight: bold;"><span style="color: rgb(0, 255, 255);"><span style="font-size: 10px;">Post<br />your last visit: {USERLASTVISIT}:thank you for back again<br /><a href="http://micsoft.logu2.com/login?logout">Log out</a></span><br /></span></span></span>        </td>               </tr>               </tbody>        </table>               </td>               <td style="text-align:center;">        <span style="font-size: 1.0em; color: rgb(0, 255, 255);"><strong>CPacel:</strong></span><span style="font-size: 1.0em;"><strong style="color: rgb(0, 255, 255);"><br /></strong><span style="color: rgb(0, 255, 255);"> </span><a style="color: rgb(0, 255, 255);" href="../profile.forum?mode=editprofile&page_profil=informations">My Profile informations</a><span style="color: rgb(0, 255, 255);"> </span><br style="color: rgb(0, 255, 255);" /><a style="color: rgb(0, 255, 255);" href="../profile.forum?mode=editprofile&page_profil=preferences">preferences</a><br style="color: rgb(0, 255, 255);" /><span style="color: rgb(0, 255, 255);"> </span><a style="color: rgb(0, 255, 255);" href="../profile.forum?mode=editprofile&page_profil=signature">My signature</a><br style="color: rgb(0, 255, 255);" /><span style="color: rgb(0, 255, 255);"> </span><a style="color: rgb(102, 0, 0);" href="../profile.forum?mode=editprofile&page_profil=avatars"><span style="color: rgb(0, 255, 255);">My avater</span></a> </span>        </td>               <td style="text-align: center; color: rgb(0, 255, 255);">        <span style="font-size: 1.0em;"><strong>links to:<br /></strong> <a href="../profile.forum?mode=editprofile&page_profil=friendsfoes">my friends and foes</a> <br /><a href="../search.forum?search_id=watchsearch">watched topics search</a> <br /><a href="../search.forum?search_id=draftsearch">draft search</a> <br /><a href="../search.forum?search_id=favouritesearch">favourite search</a> <br /><a href="../rpg_sheet_edit.forum">my rpg sheet</a> </span>        </td>               <td style="text-align: center; color: rgb(0, 255, 255);">        <span style="font-size: 1.0em;"><strong>Fast links:</strong></span><span style="font-size: 1.0em;"><br /> <a href="../msg.forum?folder=inbox">my PM</a> <br /><a href="../search?search_id=activetopics">best topeic of the day</a> <br /><a href="../search.forum?search_id=egosearch">My topics</a><br /> <a href="../search.forum?search_author=Victor&show_results=posts">New Topics</a> <br /><a href="../search?search_id=unanswered">Toics with no reply</a> </span>        </td>               </tr>               </tbody>        </table>               </div>               </div>               <!--                                                                            /login                                                                            -->        <div id="container">               <div style="color: rgb(0, 255, 255);" id="topp">               <!--                                                                            login                                                                            -->        <ul class="login">               <li class="left">               </li>               <li>        <a id="toggleLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')?            '-125px' : '0px');">my toolbar by Michael_vx</a>        </li>               </ul>               <!--                                                                            / login                                                                            -->        </div>               <!--                                                                            / topp                                                                            -->        <div class="clearfix">               </div>               </div>               <p>               </p>        </div>               <table style="width: 100%;" class="tborder" border="0" cellpadding="6" cellspacing="1" align="center">               </table>
- 3rd box for Admins only
make new Widget add this code


Code: Select Content
Code:
             <link rel="stylesheet"    href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css"     type="text/css" media="screen" /> <style>                        #login {                        overflow: visible;                        height: auto;                        -webkit-transition:  margin-top 0.5s ease-in-out 0s;                        -moz-transition:  margin-top 0.5s ease-in-out 0s;                        -o-transition:    margin-top 0.5s ease-in-out 0s;                        transition:    margin-top 0.5s ease-in-out 0s;                                    }                                    /* Login Panel I */                        #topp {                        height: 38px;                        position: relative;                        }                                    #topp ul.login {                        display: blue;                        position: relative;                        float: right;                        clear: right;                        height: 38px;                        width: auto;                        font-weight: bold;                        line-height: 38px;                        margin: 0;                        right: 150px;                        color: white;                        font-size: 100%;                        text-align: center;                        padding-right: 45px;                        }                                    #topp ul.login li.left {                        height: 38px;                        width: 45px;                        padding: 0;                        margin: 0;                        display: blue;                        float: left;                        }                                    #topp ul.login li {                        text-align: left;                        padding: 0 6px;                        display: blue;                        float: left;                        height: 38px;                        }                        #topp ul.login li a {color: #9CCCFF;}                        #topp ul.login li a:hover {color: white;}                                    /* Login Panel */                        #topp {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}                                    #topp ul.login {                        background: url(http://micsoft.xp3.biz/micbar/images/login_r.png) no-repeat right 0;}                                    #topp ul.login li.left {                        background: url(http://micsoft.xp3.biz/micbar/images/login_l.png) no-repeat left 0;}                                    #topp ul.login li {                        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}                                    /*Login*/                        /* toggle effect - show/hide login*/                        #login {                        background: #1E1E1E;}                                    #login .loginContent input:focus.field {                        background: #1E1E1E;}                                    #login .loginContent{padding-top:0px;width:790px;height:120px;}                                    #login .loginContent input.button_login {                                background: transparent            url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg)             no-repeat 0 0;}                                    #login .loginClose a {                            background:    url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg)     no-repeat right 0;}                                    #login .loginClose a:hover {                                background:            url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg)             no-repeat right -20px;}                        </style>            <!--                                                                                 Login                                                                                 -->        <div _moz_abspos="white" id="loginn" style="display:            block;position: absolute;left: 0px;top: 0px;width: 100%;">                <div id="login" style="margin-top: -125px;">                <div class="loginContent">                <table _moz_resizing="true" style="width:100%;" border="0">                <tbody>         <tr>                <td style="text-align:center;">                <table _moz_resizing="true" border="0">                <tbody>         <tr>                <td>         <script>                        jQuery(document).ready(function(){                          jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {                              link = jQuery('.panel dl:first img', data).attr('src');                              if(link){                                jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');                              }else{                                jQuery('#avatar').html('');                              }                          });                        });                                </script>        <div id="avatar">                <center>         <img src="http://i53.tinypic.com/1e1fex.gif" />        </center>                </div>                </td>                <td style="color: rgb(102, 0, 0);">             <span style="font-size: 1.0em;"> <span style="font-size:    10px;"><span style="font-size: 10px; color: rgb(0, 255,    255);"><span style="font-weight: bold;">Hi    again</span><br />{USERLINK}</span><br    style="color: rgb(0, 255, 255);" /></span><span    style="font-size: 10px;"><span style="font-weight: bold; color:    rgb(0, 255, 255);">you have</span><strong style="color:    rgb(0, 255, 255);">:</strong><span style="color: rgb(0, 255,     255);">{USERCOUNTPOST}<span style="font-weight:    bold;"></span></span></span><span    style="font-weight: bold;"><span style="color: rgb(0, 255,    255);"><span style="font-size: 10px;">Post<br />your last     visit: {USERLASTVISIT}:thank you for back again<br /><a    href="http://micsoft.logu2.com/login?logout">Log    out</a></span><br    /></span></span></span>        </td>                </tr>                </tbody>         </table>                </td>                <td style="text-align:center;">             <span style="font-size: 1.0em; color: rgb(0, 255,    255);"><strong>CPacel:</strong></span><span    style="font-size: 1.0em;"><strong style="color: rgb(0, 255,    255);"><br /></strong><span style="color: rgb(0, 255,    255);"> </span><a style="color: rgb(0, 255, 255);"    href="../profile.forum?mode=editprofile&page_profil=informations">My     Profile informations</a><span style="color: rgb(0, 255,    255);"> </span><br style="color: rgb(0, 255, 255);"    /><a style="color: rgb(0, 255, 255);"    href="../profile.forum?mode=editprofile&page_profil=preferences">preferences</a><br     style="color: rgb(0, 255, 255);" /><span style="color: rgb(0,    255, 255);"> </span><a style="color: rgb(0, 255, 255);"    href="../profile.forum?mode=editprofile&page_profil=signature">My     signature</a><br style="color: rgb(0, 255, 255);"    /><span style="color: rgb(0, 255, 255);"> </span><a    style="color: rgb(102, 0, 0);"    href="../profile.forum?mode=editprofile&page_profil=avatars"><span     style="color: rgb(0, 255, 255);">My    avater</span></a></span><br style="font-weight:    bold;" /><a style="font-weight: bold;"    href="../admin/index.forum">Admin Panel</a><br />    </span>        </td>                <td style="text-align: center; color: rgb(0, 255, 255);">             <span style="font-size: 1.0em;"><strong>links to:<br    /></strong> <a    href="../profile.forum?mode=editprofile&page_profil=friendsfoes">my     friends and foes</a> <br /><a    href="../search.forum?search_id=watchsearch">watched topics    search</a> <br /><a    href="../search.forum?search_id=draftsearch">draft search</a>    <br /><a    href="../search.forum?search_id=favouritesearch">favourite    search</a> <br /><a href="../rpg_sheet_edit.forum">my    rpg sheet</a> </span>        </td>                <td style="text-align: center; color: rgb(0, 255, 255);">             <span style="font-size: 1.0em;"><strong>Fast    links:</strong></span><span style="font-size:    1.0em;"><br /> <a href="../msg.forum?folder=inbox">my    PM</a> <br /><a    href="../search?search_id=activetopics">best topeic of the    day</a> <br /><a    href="../search.forum?search_id=egosearch">My topics</a><br    /> <a    href="../search.forum?search_author=Victor&show_results=posts">New     Topics</a> <br /><a    href="../search?search_id=unanswered">Toics with no reply</a>    </span>        </td>                </tr>                </tbody>         </table>                </div>                </div>                    <!--                                                                                 /login                                                                                 -->        <div id="container">                <div style="color: rgb(0, 255, 255);" id="topp">                    <!--                                                                                 login                                                                                 -->        <ul class="login">                <li class="left">                </li>                <li>             <a id="toggleLogin"    onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')?             '-125px' : '0px');">my toolbar by Michael_vx</a>        </li>                </ul>                    <!--                                                                                 / login                                                                                 -->        </div>                   <!--                                                                                 / topp                                                                                 -->        <div class="clearfix">                </div>                </div>                <p>                </p>        </div>                <table style="width: 100%;" class="tborder" border="0" cellpadding="6" cellspacing="1" align="center">                </table>


- Preview of the 3 boxes
the 1st box


the 2nd box






  • why 3rd box for admins only?
    the 3rd box will add the admin CP link in the box


  • do i need to make any change?
    no need to make any change the Scripts will add your own forum links by it self
avatar
Michael_vx
Member
Member

Age : 26
Posts : 8
Join date : 2015-01-02
Forum Version : PhpBB2
Reputation : 1

View user profile

Back to top Go down

Re: Nice full CP dropdown box

Post by Nick! on Wed Apr 01, 2015 5:02 am

Not bad, but I would change the icons and possibly the colors.

Nick!
Member
Member

Posts : 25
Join date : 2012-04-06
Reputation : 1

View user profile

Back to top Go down

View previous topic View next topic Back to top


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