HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    How to create an original top navbar

    Go to page : Previous  1, 2


    avatar
    • Administrator

        Reputation : 315
        Registered on : 2012-02-22
        Posts : 2362
        School of codes courses: coming soon
      First topic message reminder :

      How to create an original top navbar

      Description


      This tutorial will show you how to create an original navigation bar! :fior:

      Set up


      1.
      • Go to your Admin Panel > Display > Templates > General > overall_header

      • Paste this code after the BODY-tag:

        Code:
        <!--- Subject: "Original top navbar" - Copyright 2012 by www.fmcodes.com. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified code. Distribution is not allowed without written consent from FMCodes---!>

        <!-- BEGIN switch_user_logged_in -->
        <ul id="account">
        <li id="user">Welcome <span class="templateuname"></span></li>
        <li class="account_link"><a href="/forum">Forum</a></li>
        <li class="account_link"><a href="/faq">FAQ</a></li>
        <li class="account_link"><a href="/calendar">Calendar</a></li>
        <li class="account_link"><a href="/memberlist">Memberlist</a></li>
        <li class="account_link"><a href="/groups">Groups</a></li>
        <li class="account_link"><a href="/search">Search</a></li>
        <li class="account_link"><a href="/privmsg">Mailbox</a></li>
        <li class="account_link"><a href="/profile?mode=editprofile">Settings</a>
        <li class="account_link"><a href="/login?logout=1">Sign Out</a></li>
        </ul>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_user_logged_out -->
        <ul id="account">
        <li id="user">Welcome Guest</li>
        <li class="account_link"><a href="/forum">Forum</a></li>
        <li class="account_link"><a href="/register">Register</a></li>
        <li class="account_link"><a href="/login">Sign In</a></li>
        </ul>
        <!-- END switch_user_logged_out -->


      • Save and publish!


      2.
      • Go to your Admin Panel > Display > Pictures and Colors > Colors > CSS Stylesheet


      • Add this code and save!

        Code:
        <!---Copyright www.fmcodes.com---!>
        /* ACCOUNT: =account
        ------------------------------*/
        #account {
        background-color: #484848;
        background-color: rgba(85, 85, 85, 0.5);
        border: 1px solid #636363;
        border-top: none;
        -moz-border-radius-bottomright: 0px!important;
        -moz-border-radius-bottomleft: 0px!important;
        -webkit-border-bottom-right-radius: 0px!important;
        -webkit-border-bottom-left-radius: 0px!important;
        border-bottom-right-radius: 0px!important;
        border-bottom-left-radius: 0px!important;
        list-style: none;
        position: fixed!important;
        top: 0px;
        right: 0px!important;
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
        width: 100%!important;
        z-index: 999;
        font-family: arial;
        }
        #account li {
        float: left;

        padding: 7px 11px 8px 11px;
        }
        #account li#user {
        background: transparent url(http://kissinsights.com/images/app/user_icon.png) 10px 8px no-repeat;
        border-right: 1px solid #373737;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 10px;
        padding: 7px 11px 8px 26px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        margin-left: 18%!important;
        }
        #account li.account_link {
        border-right: 1px solid #373737;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        border-left: 1px solid #5a5a5a;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        }
        #account li a {
        color: #c8c8c8;
        display: block;
        font-size: 10px;
        float: left;
        text-decoration: none;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        #account li a:hover {
        color: #fff;
        }


      3.
      • Go to your Admin Panel > Modules > HTML & JAVASCRIPT > Javascript codes management, click on "Create a new javascript", paste this code in the field, choose "In all the pages" and save.

        Code:
            $(document).ready(function() {
        var x=$('#username').html();
        $('.templateuname').html(x);
            });


      • After that, you're done! :Good:


      Customize the tutorial


      How to add a link


      Add a link that is visible only for members
      • Add this code after the
        Code:
        <!-- BEGIN switch_user_logged_in --><ul id="account">
        tags:

        Code:
        <li class="account_link"><a href="/faq">FAQ</a></li>

      • Change /faq to your link, and "FAQ" to your link text.


      Add a link that is visible only for guests
      • Add this code after the
        Code:
        <!-- BEGIN switch_user_logged_out --><ul id="account">
        tags:

        Code:
        <li class="account_link"><a href="/faq">FAQ</a></li>

      • Change /faq to your link, and "FAQ" to your link text.


      Demonstration


      >>


      Technical problems



      The tutorial was tested with the browser Mozilla Firefox; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your reporting.

      Thanks, the staff
      For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible...

      Friendly,
      The team of the Forum of Codes.



      Last edited by Niko on Sat May 26, 2012 12:53 pm; edited 1 time in total



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      avatar
      • *****


          Reputation : 11
          Registered on : 2014-04-25
          Posts : 153
          Love Fmcodes
        thank u very much! its working perfect :)  :fior:

        Go to page : Previous  1, 2


        YOUR BANNER HERE
        728x90
        DMCA.com Protection Status
        © PunBB | Contact | Report an abuse