Changing the color of the "@" Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    Changing the color of the "@"

    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Changing the color of the "@"

    Post by CrystalSoul March 29th 2014, 11:36 pm

    Hey guys, So I searched a little bit about this but couldn't find anything related so I was wondering is it actually possible that I can change the "@" that appears beside my name in the chatbox without having to change the group main color? If anyone can actually help me with this code, I would be grateful

    Thanks in advance Smile


    Last edited by CrystalSoul on April 4th 2014, 9:57 pm; edited 1 time in total
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Changing the color of the "@"

    Post by Ange Tuteur March 30th 2014, 1:07 pm

    Hello CrystalSoul,

    You can try this however, I do not think that will help since the style is constantly refreshed.
    Display > Colors > CSS stylesheet
    Code:
    #chatbox_members span strong { color:red !important; }
    #chatbox_members a span strong { color:inherit !important; }
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul March 30th 2014, 3:54 pm

    Hmm Ange, Does this work for a certain member because I want to change it for only a member not for everyone in the chatbox members list
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Changing the color of the "@"

    Post by Ange Tuteur March 31st 2014, 1:12 pm

    That's for all members, I don't know if that would be possible.
    Pizza Boi
    Pizza Boi
    Hyperactive


    Male Posts : 2016
    Reputation : 160
    Language : French
    Location : Pizza Hut!

    Solved Re: Changing the color of the "@"

    Post by Pizza Boi March 31st 2014, 8:06 pm

    Ange Tuteur wrote:That's for all members, I don't know if that would be possible.

    Hi Very Happy

    Wouldn't it be possible with Javascript? Or like specifying the u# of the user?

    Regards,
    Pizza Boi
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul March 31st 2014, 10:33 pm

    Le Bump!

    Well Pizza Boi, I don't know how =(

    I would appreciate if someone could though
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 2:53 pm

    So, I tried to change it with HTML and when I previewed it, it looked perfectly fine but when I submitted it just looked the same as it was before...

    Any help from the staff here? Thanks Smile
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 978
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

    Solved Re: Changing the color of the "@"

    Post by Sir. Mayo April 4th 2014, 3:34 pm

    Yea can you post the code you had success with and i will try to help you. Smile
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 4:09 pm

    Code:
    <li><span style="color:#FFF07D"><strong>@</strong></span> <a href="/u1" oncontextmenu="return showMenu(1,'Dovahkiin',1,2,1,2,1,event,'?archives');" onclick="return copy_user_name('Dovahkiin');" target="_blank"><span style="color:#FFF07D"><strong>Dovahkiin</strong></span></a></li>

    When previewed, Changing the color of the "@" 0ONAgls

    When submitted,Changing the color of the "@" ADaDH6C

    ><
    Pizza Boi
    Pizza Boi
    Hyperactive


    Male Posts : 2016
    Reputation : 160
    Language : French
    Location : Pizza Hut!

    Solved Re: Changing the color of the "@"

    Post by Pizza Boi April 4th 2014, 4:17 pm

    Hi Very Happy

    Try changing @ to another symbol for awhile and see how that goes. Also, where did you put this code?

    Regards,
    Pizza Boi
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 4:19 pm

    How would the symbol actually matter? and I put it in HTML.
    Pizza Boi
    Pizza Boi
    Hyperactive


    Male Posts : 2016
    Reputation : 160
    Language : French
    Location : Pizza Hut!

    Solved Re: Changing the color of the "@"

    Post by Pizza Boi April 4th 2014, 4:22 pm

    Hi Very Happy

    Hmm... you can try changing the events and target. Anyway, if that still doesn't work, I'll try to look into it in a few days since I'm busy with stuff at the moment.

    Regards,
    Pizza Boi
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 978
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

    Solved Re: Changing the color of the "@"

    Post by Sir. Mayo April 4th 2014, 5:18 pm

    You would need to change the Visited link.
    Could you provide a Test account so i can better help you.
    Keep what you have and add this to your css
    Code:

    a:/u1:{color: #FFF07D; text-decoration: none; }
    a:/u1:active {color: #FFF07D; text-decoration: none; }
    a:/u1:visited {color: #FFF07D; text-decoration: none; }
    a:/u1:hover {color: #FFF07D; text-decoration: none; }
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 5:37 pm

    Didn't work =(
    I've sent you a private message.
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Changing the color of the "@"

    Post by Ange Tuteur April 4th 2014, 6:45 pm

    CrystalSoul,

    I have a few questions :

    1. ) Are you using the default chatbox, or different one ?
    2. ) What is the UID of the user you want to apply this to ?

    thanks :rose:
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 6:57 pm

    U1 and yes, it's the default chatbox.
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Changing the color of the "@"

    Post by Ange Tuteur April 4th 2014, 7:00 pm

    The default chatbox at the top or bottom of the page ?
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 7:05 pm

    Top of the page.
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Changing the color of the "@"

    Post by Ange Tuteur April 4th 2014, 7:44 pm

    Try this :

    Administration panel > modules > javascript codes management > create a new script

    title : what you wish
    placement : in the homepage
    paste the code below and save :
    Code:
    $(function() {
        if (document.getElementById('frame_chatbox')) {
           $('#frame_chatbox').before('<iframe id="frame_chatbox" width="100%" height="100%" style="border:none;" src="/chatbox/index.forum">').remove();
        }
        $('#frame_chatbox').load(function() {
            setInterval(function() {
               if ($('#frame_chatbox').contents().find('.chatMod').length) return;
               var memberList = $('#frame_chatbox').contents().find('#chatbox_members li:has(a[href="/u1"])');
               memberList.html(memberList.html().replace(/@/,'<span class="chatMod">@</span>'));
            },1000);
        });
    });

    Then use this CSS to style the @ :
    Code:
    .chatMod {
     color:red !important;
     text-shadow:0 0 6px red !important;
    }
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 7:55 pm

    http://prntscr.com/36ynez, As you can see, it's still white when posting but on the left it's appearing normally :O
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Changing the color of the "@"

    Post by Ange Tuteur April 4th 2014, 9:40 pm

    Replace your script by :
    Code:
    $(function() {
        if (document.getElementById('frame_chatbox')) {
          $('#frame_chatbox').before('<iframe id="frame_chatbox" width="100%" height="100%" style="border:none;" src="/chatbox/index.forum">').remove();
        }
        $('#frame_chatbox').load(function() {
            setInterval(function() {
              if ($('#frame_chatbox').contents().find('.chatMod').length) return;
              var user = $('#frame_chatbox').contents().find('#chatbox .user:has(a[href="/u1"]), #chatbox_members li:has(a[href="/u1"])');
              $(user).each(function() {
                  $(this).html($(this).html().replace(/@/,'<span class="chatMod">@</span>'));
              });
            },1000);
        });
    });
    avatar
    CrystalSoul
    Forumember


    Male Posts : 149
    Reputation : 1
    Language : English
    Location : Egypt

    Solved Re: Changing the color of the "@"

    Post by CrystalSoul April 4th 2014, 9:57 pm

    Thank you Ange, Marked as solved Wink
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Changing the color of the "@"

    Post by Ange Tuteur April 4th 2014, 9:58 pm

    You're welcome :rose:

    Topic solved and archived