HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  




    • You are not connected. Please login or register

    FMCodes » Tutorials & Codes » Management Guidelines » Tuto: in progress » Completely remove a button from the navigation bar


    Completely remove a button from the navigation bar

    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 on 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 on 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 on Sun Apr 08, 2012 11:10 am
          Niko
          • Administrator

              Reputation : 317
              Registered on : 2012-02-22
              Posts : 2362
              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 on 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 on 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 on 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 on 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 on Mon Apr 09, 2012 6:50 pm
                    BlackNite
                    • ***


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

                      #9 - Posted on 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 on 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 on Tue May 29, 2012 10:23 am
                          hoanglongnhatbao
                          • ****


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

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

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