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.

Sparkling Username with Icon

3 posters

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

Go down

Solved Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 6:49 am

Hello staff's, member I wonder how can I do sparkling Username with Icons like this -> http://devbest.com/XenStaff/ just look at the staff's username's, I wish you can help me.
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 7:06 am

Hi,

I believe your forum version is PhpBB2

Add this following code within your CSS.

For posts.
Code:
.name strong a[href="/u#"]{
    padding-left: 13px;
    background: url(imagedirectlink) no-repeat left;
background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");}

Chatbox.
Code:
#chatbox_members a[href="/u#"]{
    padding-left: 13px;
    background: url(imagedirectlink) no-repeat left;
background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");}

Homepage.
Code:
.gensmall a[href="/u#"]{
    padding-left: 13px;
    background: url(imagedirectlink) no-repeat left;
    background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");}

Once you have chosen the codes you want, please change the "#" character next to /u according to what user you want the icon to appear before. To find out the "#" to replace, go to that user's forum profile, and copy the number after "/u".
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 7:26 am

Were will I paste the Code?
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 7:31 am

Sorry, should've had mentioned that. Follow the steps below:

1. Open your admin panel.
2. Click on Display Tab.
3. Click on colors. Then, it'll be a tab that wats, "CSS stylesheet." place the code either at top or all the way at the bottom.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 7:42 am

Thanks. But the one that I like is changing the whole username like the STAFF's in DevBest, get it?
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 7:45 am

What exactly do you mean? If you want a code that changes the whole group member's is not possible. I don't fully understand you, please post a screenshot. Thank you.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 7:52 am

Check the name of RastaLulz here in devbest -> http://devbest.com/XenStaff/ I want my username to be like that, with a cool logo on it's left.
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 7:56 am

I know, have you tried the codes I gave you above? Those should work?
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 7:58 am

It worked but were can I find different colors of those, and I wan't those with Icons at left.
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 8:03 am

You can find the medals here: http://www.iconarchive.com/search?q=Medals

But I don't know about the glittery images. I don't know if they're copyrighted.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 8:10 am

Were did you get the sparkling stuff? How do I add the Icon?


Last edited by LighTninGx on November 22nd 2012, 8:13 am; edited 1 time in total
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 8:13 am

From a tutorial, but it's the only glittery image available. Maybe, if you can request some to be made down in the graphics section?
https://help.forumotion.com/f6-graphic-design-section
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 8:14 am

How do I add the Icon?
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 8:16 am

By replacing this from the code provided; imagedirectlink to the icons' URL.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 8:19 am

.imagedirectlink a[href="/u#"]{
padding-left: 13px;
background: url(imagedirectlink) no-repeat left;
background: url("https://i.servimg.com/u/f47/17/47/06/15/medal-10.png");}
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 8:22 am

No,

Just replace the part that says "imagedirectlink." in the third column.
Also, # with the user's number.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 8:31 am

How about the changing of the color of the name?
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 8:34 am

Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 8:56 am

My only problem now is the Icon, and the sparkling thingy.
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 9:03 am

Here insert this inside your CSS. (ACP >> Display >> Colors >> CSS)
Code:
.gensmall a[href="/u1"]{
    padding-left: 13px;
    background: url(http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/medal-bronze-1-icon.png) no-repeat left;
    background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");}

u1 - is usually the founder.

This image: is placed in the third column. Sparkling Username with Icon Medal-bronze-1-icon
http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/medal-bronze-1-icon.png
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 9:15 am

In icon how can I add 1 space cause the Icon and the username is so near apart, I want it to have 1 little space.
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 9:18 am

Can you please provide your forum's URL ? Thank you.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 9:24 am

E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 9:29 am

Try this:

Code:
.gensmall a[href="/u1"]{
    padding-left: 20px;
    background: url(http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/medal-bronze-1-icon.png) no-repeat left;
    background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");}


Last edited by Sir Chivas™ on November 22nd 2012, 9:34 am; edited 1 time in total
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 9:31 am

Done, I solved it instead of 13px I change it to 20px
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sir Chivas™ November 22nd 2012, 9:33 am

•_• I didn't see that. Wow, I need some rest. Anything else? Or is this solved?
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r November 22nd 2012, 11:19 am

Yup, I think it's solve.
E.rr0r
E.rr0r
Forumember

Male Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by Sanket November 22nd 2012, 12:32 pm

Topic Solved & Locked
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

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