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

    Niko
    • Administrator

        Reputation : 317
        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

      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 : 317
            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

          Verrell123
          • ****


              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.



                  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



                      Niko
                      • Administrator

                          Reputation : 317
                          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

                        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 : 178
                                Installing the new status system
                              Fixed! :)
                              //Mathias



                              Note: Please contact Niko for forum problems   yes 

                              - editboard@fmcodes.com
                              Niko
                              • Administrator

                                  Reputation : 317
                                  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

                                LGforum
                                • Veteran staff member

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

                                  Niko
                                  • Administrator

                                      Reputation : 317
                                      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

                                    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?



                                        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 : 317
                                                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

                                              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

                                                        Go to page : 1, 2  Next


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