The forum of the forums
Welcome on the Forumotion Support Forum.

To take full advantage of everything offered by our forum, please log in if you are already a member or join our community if you're not yet....



Create a free forum like this one.
Customize your toolbar through CSS and Javascript! 5 5 5

Customize your toolbar through CSS and Javascript!

View previous topic View next topic Go down

Customize your toolbar through CSS and Javascript!

Post by Buttercup on February 12th 2013, 4:08 pm

Customize your toolbar through CSS and Javascript!


Reminder

How to put CSS codes?
Go to
Administration Panel Display Colors & Pics Colors CSS Stylesheet
And paste your code.


How to put Javascript codes?
Go to
Administration Panel Modules HTML & Javascript Javascript codes management
And click on Add "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.



Tutorial created by : The Forumotion Staff. Based on the codes created by Rideem3 - 02.12.13
CopyrightŠ FORUMOTION.COM

Buttercup
Administrator
Administrator

Female
Posts: 8474
Language: French, English
Points: 8618
Join date: 2007-09-04

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum