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 : 1, 2  Next

    avatar
    • Administrator

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

                                                      Go to page : 1, 2  Next


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