Niko
  • Administrator

      Reputation : 319
      Registered on : 2012-02-22
      Posts : 2366
      School of codes courses: coming soon
    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

    MartinoPio
    • Veteran staff member

        Reputation : 14
        Registered on : 2012-02-25
        Posts : 98
      It's great. Andcreating the most beautiful I've ever seen! 1st

      Niko
      • Administrator

          Reputation : 319
          Registered on : 2012-02-22
          Posts : 2366
          School of codes courses: coming soon
        @MartinoPio wrote:It's great. Andcreating the most beautiful I've ever seen! 1st
        Really thanks for this :Good:



        Niko wants you in the team Guest

        Community manager and Administrator at Forumattivo.com

        avatar
        • ****


            Reputation : 5
            Registered on : 2012-04-01
            Posts : 84
          How to make this not fly?

          Anonymous
          • Guest

              @Verrell123 wrote:How to make this not fly?
              Change position:fixed to position:absolute inside the #account tag. :)

              Nick
              • Manager

                  Reputation : 20
                  Registered on : 2012-04-01
                  Posts : 407
                Really good tutorial, several people has asked about this.



                How to create an original top navbar 15px10
                LGforum
                • Veteran staff member

                    Reputation : 19
                    Registered on : 2012-04-05
                    Posts : 77
                  ID attributes are supposed to be unique you know. There should only be one ID per page, so no two elements with the same ID. Thats what classnames are for ;)
                  ID's are to uniquely identify single elements.

                  Nick
                  • Manager

                      Reputation : 20
                      Registered on : 2012-04-01
                      Posts : 407
                    I'm glad you posted that. I now know what that is for. lol



                    How to create an original top navbar 15px10
                    Niko
                    • Administrator

                        Reputation : 319
                        Registered on : 2012-02-22
                        Posts : 2366
                        School of codes courses: coming soon
                      My duty :Good:



                      Niko wants you in the team Guest

                      Community manager and Administrator at Forumattivo.com

                      socke
                      • **


                          Reputation : 1
                          Registered on : 2012-04-09
                          Posts : 22
                        It´s great yes :Good:

                        LGforum
                        • Veteran staff member

                            Reputation : 19
                            Registered on : 2012-04-05
                            Posts : 77
                          You still need to fix the ID's. Read this: http://www.w3schools.com/tags/att_standard_id.asp

                          Your handing out invalid HTML to people who don't know how to fix it.

                          Cavour
                          • Administrator

                              Reputation : 21
                              Registered on : 2012-02-15
                              Posts : 179
                              Installing the new status system
                            Fixed! :)
                            //Mathias



                            Note: Please contact Niko for forum problems   yes 

                            - editboard@fmcodes.com
                            Niko
                            • Administrator

                                Reputation : 319
                                Registered on : 2012-02-22
                                Posts : 2366
                                School of codes courses: coming soon
                              @LGforum wrote:You still need to fix the ID's. Read this: http://www.w3schools.com/tags/att_standard_id.asp

                              Your handing out invalid HTML to people who don't know how to fix it.
                              Thanks :zen:



                              Niko wants you in the team Guest

                              Community manager and Administrator at Forumattivo.com

                              LGforum
                              • Veteran staff member

                                  Reputation : 19
                                  Registered on : 2012-04-05
                                  Posts : 77
                                Much better. Now its great ;)

                                Niko
                                • Administrator

                                    Reputation : 319
                                    Registered on : 2012-02-22
                                    Posts : 2366
                                    School of codes courses: coming soon
                                  @LGforum wrote:Much better. Now its great ;)
                                  Thanks to you!



                                  Niko wants you in the team Guest

                                  Community manager and Administrator at Forumattivo.com

                                  socke
                                  • **


                                      Reputation : 1
                                      Registered on : 2012-04-09
                                      Posts : 22
                                    I've followed all these steps but it doesn´t work :pensiero:

                                    Nick
                                    • Manager

                                        Reputation : 20
                                        Registered on : 2012-04-01
                                        Posts : 407
                                      @scoke - Can you open a new topic in the support section and submit a screen shot?



                                      How to create an original top navbar 15px10
                                      ellette.*
                                      • I'm a new member :)


                                          Reputation : 0
                                          Registered on : 2012-04-28
                                          Posts : 5
                                        this is simply amazing(:
                                        love it :Good:
                                        thanks <3

                                        Chris Dans
                                        • Veteran staff member

                                            Reputation : 1
                                            Registered on : 2012-04-27
                                            Posts : 39
                                          This was one of the tutorials of the year

                                          Niko
                                          • Administrator

                                              Reputation : 319
                                              Registered on : 2012-02-22
                                              Posts : 2366
                                              School of codes courses: coming soon
                                            really? Why? :D



                                            Niko wants you in the team Guest

                                            Community manager and Administrator at Forumattivo.com

                                            Pixielisje
                                            • I'm a new member :)


                                                Reputation : 0
                                                Registered on : 2012-11-23
                                                Posts : 1
                                              How do you get Mailbox to change when you have '1 new message' ? (:

                                              Lovely tutorial btw!

                                              greetings

                                              Sabin ;x
                                              • **


                                                  Reputation : 1
                                                  Registered on : 2012-04-02
                                                  Posts : 18
                                                very nice tutorial (sabin from romania)

                                                abo_shab
                                                • I'm a new member :)


                                                    Reputation : 0
                                                    Registered on : 2013-06-22
                                                    Posts : 8
                                                  thank

                                                  gamingdrew
                                                  • ***


                                                      Reputation : 0
                                                      Registered on : 2013-06-11
                                                      Posts : 33
                                                    /*Copyright www.fmcodes.com*/ .... Btw thanks for this!

                                                    Sabin ;x
                                                    • **


                                                        Reputation : 1
                                                        Registered on : 2012-04-02
                                                        Posts : 18
                                                      super tutorial