Customize your toolbar through CSS and Javascript!

by **Shadow** February 12th 2013, 5: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  "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.