Redge
  • Veteran staff member

      Reputation : 8
      Registered on : 2012-03-24
      Posts : 30
    Completely remove a button from the navbar

    Description


    This tutorial will show you how to completly remove a useless button (text or/and image) from the navigation bar with Javascript.

    Set up


    In first, you need to know the ID (#) of the button that you want to remove. To help you, here is a table with buttons, descriptions and ids:

    ID (#)DescriptionID (#)Description
    Completely remove a button from the navigation bar Icon_home#i_icon_mini_indexID of the image IndexCompletely remove a button from the navigation bar Icon_c10#i_icon_mini_calendarID of the image Calendar
    Completely remove a button from the navigation bar Empty#i_icon_mini_portalID of the image PortalCompletely remove a button from the navigation bar Icon_faq#i_icon_mini_faqID of the image FAQ
    Completely remove a button from the navigation bar Icon_search#i_icon_mini_searchID of the image SearchCompletely remove a button from the navigation bar Icon_members#i_icon_mini_membersID of the image Members
    Completely remove a button from the navigation bar Icon_groups#i_icon_mini_groupsID of the image GroupsCompletely remove a button from the navigation bar Icon_ucp#i_icon_mini_profileID of the image Profile
    Completely remove a button from the navigation bar Icon_message#i_icon_mini_messageID of the image PMCompletely remove a button from the navigation bar Icon_message#i_icon_mini_new_messageID of the image New PM
    Completely remove a button from the navigation bar Icon_logout#i_icon_mini_logoutID of the image Log outCompletely remove a button from the navigation bar Icon_logout#i_icon_mini_loginID of the image Log in
    Completely remove a button from the navigation bar Icon_register#i_icon_mini_registerID of the image Register

    Once you have found the ID of the image you want to remove, create a new Javascript code by going in your administration panel like this:
    > ACP | Modules | HTML & JAVASCRIPT | Javascript codes management | Create a new Javascript

    Insert this code in all the pages:
    Code:
    <!--- Subject: "Remove buttons on pages" - 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---!>
    $(document).ready(function(){$('#ID).parent().hide();});

    You have to remplace #ID by the ID of the image that you want to remove.

    After this, a space will probably be created instead of the button. To remove it, insert this code in your CSS:
    Code:
    #ID {
    margin-left: -9px;
    }

    Here, you need to rempalce #ID by the ID of the image who is at the left of the button that you removed.

    Demonstration


    Completely remove a button from the navigation bar Captur58
    As you can see, the image "Groups" and the text are removed.

    Technical problems


    The code was tested on all versions and works with all browsers; 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 segnalation.

    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.

    #1 - Posted Sat Mar 24, 2012 9:31 pm
    MartinoPio
    • Veteran staff member

        Reputation : 14
        Registered on : 2012-02-25
        Posts : 98
      Very useful: D. You are great!

      #2 - Posted Sun Apr 08, 2012 11:00 am
      FastCode
      • ***


          Reputation : 5
          Registered on : 2012-03-23
          Posts : 36
        Useless. Why use javascript to remove the icons, when you can delete them from image administration?

        #3 - Posted Sun Apr 08, 2012 11:10 am
        Niko
        • Administrator

            Reputation : 320
            Registered on : 2012-02-22
            Posts : 2366
            School of codes courses: coming soon
          @FastCode wrote:Useless. Why use javascript to remove the icons, when you can delete them from image administration?
          Ahahah you're right... But it is a good tutorial (:



          Niko wants you in the team Guest

          Community manager and Administrator at Forumattivo.com

          #4 - Posted Sun Apr 08, 2012 12:10 pm
          sivastar
          • ***


              Reputation : 0
              Registered on : 2012-03-26
              Posts : 49
            Yes, useless for remove only icons. This script help to change the navbar text.

            Code:
            document.getElementById('i_icon_mini_groups').parentNode.innerHTML="Groups";
            document.getElementById('i_icon_mini_members').parentNode.innerHTML="Members";

            #5 - Posted Sun Apr 08, 2012 1:38 pm
            Nick
            • Manager

                Reputation : 20
                Registered on : 2012-04-01
                Posts : 407
              Yes, I assume it's pretty neat. :)



              Completely remove a button from the navigation bar 15px10
              #6 - Posted Sun Apr 08, 2012 6:06 pm
              Redge
              • Veteran staff member

                  Reputation : 8
                  Registered on : 2012-03-24
                  Posts : 30
                Hi,

                This tutorial allows to to COMPLETLY remove the button. You can't to this in the administration control panel. ;)

                #7 - Posted Mon Apr 09, 2012 6:47 pm
                FastCode
                • ***


                    Reputation : 5
                    Registered on : 2012-03-23
                    Posts : 36
                  @Redge wrote:Hi,

                  This tutorial allows to to COMPLETLY remove the button. You can't to this in the administration control panel. ;)
                  You can do his with css. ;)

                  #8 - Posted Mon Apr 09, 2012 6:50 pm
                  BlackNite
                  • ***


                      Reputation : 5
                      Registered on : 2012-04-07
                      Posts : 43
                    not working

                    #9 - Posted Fri May 25, 2012 8:25 am
                    Nick
                    • Manager

                        Reputation : 20
                        Registered on : 2012-04-01
                        Posts : 407
                      @BlackNight - This tutorial does work, please have another go at this. Don't forget to add the ID's.



                      Completely remove a button from the navigation bar 15px10
                      #10 - Posted Fri May 25, 2012 2:53 pm
                      BlackNite
                      • ***


                          Reputation : 5
                          Registered on : 2012-04-07
                          Posts : 43
                        I try and try but still the same result.

                        #11 - Posted Tue May 29, 2012 10:23 am
                        hoanglongnhatbao
                        • ****


                            Reputation : 3
                            Registered on : 2012-03-22
                            Posts : 60
                          hihiihi

                          #12 - Posted Wed Oct 10, 2012 7:09 am

                              #13 - Posted