avatar
  • Administrator

      Reputation : 315
      Registered on : 2012-02-22
      Posts : 2362
      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

    avatar
    • Veteran staff member

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

      avatar
      • Administrator

          Reputation : 315
          Registered on : 2012-02-22
          Posts : 2362
          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?

          • Co-Founder

              Reputation : 39
              Registered on : 2012-02-26
              Posts : 284
            @Verrell123 wrote:How to make this not fly?
            Change position:fixed to position:absolute inside the #account tag. :)

            avatar
            • Manager

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



              avatar
              • 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.

                avatar
                • Manager

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



                  avatar
                  • Administrator

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



                    Niko wants you in the team Guest

                    Community manager and Administrator at Forumattivo.com

                    avatar
                    • **


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

                      avatar
                      • 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.

                        avatar
                        • Administrator

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



                          Note: Please contact Niko for forum problems   yes 

                          - editboard@fmcodes.com
                          avatar
                          • Administrator

                              Reputation : 315
                              Registered on : 2012-02-22
                              Posts : 2362
                              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

                            avatar
                            • Veteran staff member

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

                              avatar
                              • Administrator

                                  Reputation : 315
                                  Registered on : 2012-02-22
                                  Posts : 2362
                                  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

                                avatar
                                • **


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

                                  avatar
                                  • 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?



                                    avatar
                                    • I'm a new member :)


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

                                      avatar
                                      • Veteran staff member

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

                                        avatar
                                        • Administrator

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



                                          Niko wants you in the team Guest

                                          Community manager and Administrator at Forumattivo.com

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

                                            avatar
                                            • **


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

                                              avatar
                                              • I'm a new member :)


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

                                                avatar
                                                • ***


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

                                                  avatar
                                                  • **


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