Forumotion Network
Log in

I forgot my password
 
 
Or
 
ForumsClub
Customize your toolbar through CSS and Javascript! Logo-210

Discover ForumsClub.com the new Forumotion community site for building advanced collaborative communities


Latest Tutorials

Latest topics
Topic lists displayed as cards
Today at 2:08 pm
by TheCrow
Could not register new user
Today at 10:46 am
by Razor12345
How do I delete my form?
Today at 10:44 am
by Razor12345
Add a ranks to your forum automatically
Yesterday at 10:15 pm
by كونان2000
New form for Graphic Requests
Yesterday at 12:24 pm
by vocalkeny
Fgsuport - Your everyday help!
Yesterday at 1:40 am
by Mihai
Founder died, moderator can't secure forum
March 26th 2024, 5:59 pm
by skouliki
Links not clickable
March 26th 2024, 1:08 pm
by skouliki
Twitter embed no longer working on forum
March 26th 2024, 10:12 am
by poesia-verses
Favorite Games?
March 25th 2024, 12:23 am
by Narutoshokakgos
Posts on the right side of the forum
March 24th 2024, 2:45 pm
by skouliki
Members Introduction
March 23rd 2024, 6:52 am
by skouliki
Mozilla Firefox Latest Updates
March 22nd 2024, 11:23 pm
by SLGray
Multicolor description text
March 22nd 2024, 10:25 pm
by skouliki
RPG Roleplay
March 20th 2024, 2:33 pm
by skouliki
Who is online?
In total there are 340 users online :: 5 Registered, 0 Hidden and 335 Guests

Distorted Pixel, Merciful Flower, Niko, Razor12345, ThePumpkin

Most users ever online was 7008 on August 11th 2011, 5:09 am
  • About Forumotion

Customize your toolbar through CSS and Javascript!

February 12th 2013, 5:08 pm by Shadow

Customize your toolbar through CSS and Javascript!



Reminder
How to put CSS codes?
Go to
Administration Panel    Display [b] Colors & Pics Colors CSS Stylesheet [/b]

And paste your code.


How to put Javascript codes?
Go to
Administration Panel Modules HTML & Javascript Javascript codes management

And click on     "create a new javascript". Be sure that the Javascript are activated.





  • You can remove the search and share links by putting this in your CSS:
    Code:
    #fa_search, #fa_share {
    display: none !important;
    }


  • You can even change the toggle type to slide, fade, etc:
    Put this in your CSS StyleSheet:
    Code:
    #fa_right.welcome #fa_menu ul {
    display: none;
    }


  • And this in a JavaScript placed in all pages for the slide effect:
    Code:
    $(window).load(function () {
        $('#fa_welcome').click(function () {
            $('#fa_menulist').slideToggle();
        });
    });


  • Or this for a fade effect:
    Code:
    $(window).load(function () {
        $('#fa_welcome').click(function () {
            $('#fa_menulist').fadeToggle();
        });
    });


  • The personalization of the toolbar color is possible through the CSS stylesheet:

    - Case of a color as background for the toolbar:
    Code:
    #fa_toolbar, #fa_toolbar_hidden {background-color: #xxxxxx !important;}


    #xxxxxx is corresponding to the hexadecimal code of the color.

    - Using a background image as the background of the toolbar:
    Code:
    #fa_toolbar, #fa_toolbar_hidden {background: url('http://image_url');}


  • You can also hide the toolbar from members and guests:
    Code:
    $('head').append('<style id="toolbar_style" type="text/css">#fa_toolbar { display: none; }</style>');
    $(window).load(function () {
        if (_userdata.user_level == 0) $('#fa_toolbar').remove();
        else $('#toolbar_style').remove();
    });



  • Here's a function that can replace the user profile list text:
    Code:
    function changeToolbar(word, replacement) {
        for (var name in word) {
            document.getElementById('fa_menulist').innerHTML = document.getElementById('fa_menulist').innerHTML.replace(RegExp(name, 'g'), word[name]);
        }
    }

    $(window).load(function () {
        changeToolbar({
            'All my Messages': 'Messages',
            'All my Topics': 'Topics'
        });
    });


  • You can add on to the list by following the syntax:

    For just "All My Messages" it would be:
    Code:
    function changeToolbar(word, replacement) {
        for (var name in word) {
            document.getElementById('fa_menulist').innerHTML = document.getElementById('fa_menulist').innerHTML.replace(RegExp(name, 'g'), word[name]);
        }
    }

    $(window).load(function () {
        changeToolbar({
            'All my Messages': 'Messages'
        });
    });



Notice the use of the comma when specifying multiple strings.





Comments: 0