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.

Coding for avatar tool bar.

Go down

Solved Coding for avatar tool bar.

Post by Kamui on December 7th 2015, 4:08 pm

I like this forum's avatar toolbar. May I have the code for it please?



Last edited by Kamui on December 8th 2015, 12:51 am; edited 1 time in total
avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Ace on December 7th 2015, 4:25 pm

Hi,

Insert this in a JS page:

Code:
/*
 * Application: Toolbar with member avatar
 * Description: This application can displays the member avatar in Forumotion toolbar's!
 * Version: 1.08032014-jq1.9.1 - Keb (Horus)
 * Made and Optimizations by JScript - 2014/03/08
 * View more in: http://ajuda.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function() {
    isRead();

    function isRead() {
        if (jQuery('#fa_welcome').length) {
            jQuery('#fa_welcome').prepend(_userdata.avatar).children('img').css( {
                'border-radius' : '3px 3px 3px 3px',
                'height' : '25px',
                'margin-bottom' : '-10px',
                'margin-right' : '5px',
                'position' : 'relative',
                'top' : '-3px',
                'width' : '25px'
            });
        } else {
            setTimeout(isRead, 100);
        }
    }
});

Regards.
avatar
Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Kamui on December 7th 2015, 4:30 pm

The code isn't working @ace
avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Ace on December 7th 2015, 4:33 pm

Okay, old code probably. Razz

Apply this tutorial instead:

http://help.forumotion.com/t133635-#899374

Regards.
avatar
Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Kamui on December 7th 2015, 4:38 pm

@Ace well its not that the code doesn't work, I want it exactly like the one I showed. When my mouse hovers over "welcome kamui" or "notifications".
avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Ace on December 7th 2015, 4:44 pm

Hi,

Do you mean the transition? The blue color?

If so, apply the following CSS:

Code:
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #39C!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

Regards.
avatar
Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Kamui on December 7th 2015, 4:49 pm

well it came up, but it's not working correctly.
@ace
avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Ace on December 7th 2015, 4:51 pm

Hi,

What's your forum address and what doesn't work? Smile

Regards.
avatar
Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Kamui on December 7th 2015, 4:53 pm

avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Ace on December 7th 2015, 5:31 pm

Hi,

Sorry. Try this one (delete the old one):

Code:
#fa_right #fa_menu #fa_welcome,#fa_right #fa_notifications,#fa_right a.rightHeaderLink{background-color:transparent!important;border:1px solid #39C!important;border-radius:3px!important;color:#39C!important;font-size:11px!important;font-weight:700!important;line-height:22px!important;margin-top:3px!important;padding:0 6px!important;text-decoration:none!important;transition:200ms}#fa_right #fa_menu #fa_welcome:hover,#fa_right #fa_notifications:hover,#fa_right a.rightHeaderLink:hover,#fa_right.welcome #fa_menu #fa_welcome,#fa_toolbar > #fa_right.notification > #fa_notifications{background-color:#39C!important;border-color:#39C!important;color:#FFF!important}#fa_right #fa_hide{background-color:transparent!important;border:none!important;margin-top:0!important;padding:0!important;transition:none!important}

Regards.
avatar
Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Kamui on December 7th 2015, 11:43 pm

Thanks, you've been a big help Ace, one last thing. I'm trying to place in the code to show my avi picture on the tool-bar. The one you were previously giving me, how come it isn't showing? @ace
avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by YoshiGM on December 7th 2015, 11:54 pm

Hello @Kamui,
I use the same code provided and create by @JScript, so you should add the code:

Code:
/*
        * Application: Toolbar with member avatar
        * Description: This application displays the member avatar in Forumotion toolbar in a fastest way!
        * Version: 1.08032014-jq1.9.1 - Keb (Horus)
        * Made and Optimizations by JScript - 2014/03/08
        * Copyright (c) 2014 JScript <jscriptbrasil at live dot com>
        * This work is free. You can redistribute it and/or modify it
        * under the terms of the WTFPL, Version 2
        */
        jQuery(function() {
            JS_faIsRead();
       
            function JS_faIsRead() {
                if (jQuery('#fa_welcome').length) {
                    jQuery('#fa_welcome').prepend(_userdata.avatar).children('img').css( {
                        'border-radius' : '3px 3px 3px 3px',
                        'height' : '25px',
                        'margin-bottom' : '-10px',
                        'margin-right' : '5px',
                        'position' : 'relative',
                        'top' : '-3px',
                        'width' : '25px'
                    });
                } else {
                    setTimeout(JS_faIsRead, 100);
                }
            }
        });

ACP (Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management > Javascript codes management

Create new Javascript and place it in All Pages. Wink

Regards,
YoshiGM
avatar
YoshiGM
Forumember

Male Posts : 691
Reputation : 97
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Kamui on December 8th 2015, 12:33 am

Thanks @Yoshi

One last thing because the code did work. How do I move the picture to the left because it's sitting on top of the "welcome kamui" I want to move it over some.
avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by APE on December 8th 2015, 12:40 am

To move it look for this in the java code
Code:
margin-right' : '5px
Change the 5 to what is best for your forum.



avatar
APE
Manager
Manager

Male Posts : 11633
Reputation : 1134
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by Kamui on December 8th 2015, 12:51 am

Alright, thanks for the help everyone!
avatar
Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Coding for avatar tool bar.

Post by APE on December 8th 2015, 1:02 am

Your welcome.
Topic solved and archived



avatar
APE
Manager
Manager

Male Posts : 11633
Reputation : 1134
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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