The forum of the forums
Welcome to the Official Support Forum of Forumotion!

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've not yet.



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

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 13th 2013, 2:08 am

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: 10157
Language: French, English
Points: 10025
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