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.

View previous topic View next topic 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

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.

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

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.

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".

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.

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

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.

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


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.

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

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

YoshiGM
Forumember

Male Posts : 512
Reputation : 76
Language : Spanish & English
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.

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.





APE
Manager
Manager

Male Posts : 8339
Reputation : 718
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!

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





APE
Manager
Manager

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

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

Back to top Go down

View previous topic View next topic Back to top


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