Home
by E.rr0r November 22nd 2012, 6:49 amHello 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.
3 posters
Sparkling Username with Icon
E.rr0r- Forumember
Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Hi,
I believe your forum version is PhpBB2
Add this following code within your CSS.
For posts.
Chatbox.
Homepage.
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".
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
Were will I paste the Code?
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
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.
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.
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
Thanks. But the one that I like is changing the whole username like the STAFF's in DevBest, get it?
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
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.
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
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.
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
I know, have you tried the codes I gave you above? Those should work?
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
It worked but were can I find different colors of those, and I wan't those with Icons at left.
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
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.
But I don't know about the glittery images. I don't know if they're copyrighted.
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
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
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
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
https://help.forumotion.com/f6-graphic-design-section
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
How do I add the Icon?
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
By replacing this from the code provided; imagedirectlink to the icons' URL.
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
.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");}
padding-left: 13px;
background: url(imagedirectlink) no-repeat left;
background: url("https://i.servimg.com/u/f47/17/47/06/15/medal-10.png");}
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
No,
Just replace the part that says "imagedirectlink." in the third column.
Also, # with the user's number.
Just replace the part that says "imagedirectlink." in the third column.
Also, # with the user's number.
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
How about the changing of the color of the name?
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
That'll be automatic when creating a usergroup.
The following links might help:
https://help.forumotion.com/t10988-organizing-groups-colors-in-legend
https://help.forumotion.com/t16012-designate-moderators
https://help.forumotion.com/t57913-auto-subscribe-to-groups
https://help.forumotion.com/t10773-guide-to-mod-tools
The following links might help:
https://help.forumotion.com/t10988-organizing-groups-colors-in-legend
https://help.forumotion.com/t16012-designate-moderators
https://help.forumotion.com/t57913-auto-subscribe-to-groups
https://help.forumotion.com/t10773-guide-to-mod-tools
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
My only problem now is the Icon, and the sparkling thingy.
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Here insert this inside your CSS. (ACP >> Display >> Colors >> CSS)
u1 - is usually the founder.
This image: is placed in the third column.
http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/medal-bronze-1-icon.png
- 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.
http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/medal-bronze-1-icon.png
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
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.
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Can you please provide your forum's URL ? Thank you.
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
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
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
Done, I solved it instead of 13px I change it to 20px
Sir Chivas™- Helper
- Posts : 6980
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
•_• I didn't see that. Wow, I need some rest. Anything else? Or is this solved?
E.rr0r- Forumember
- Posts : 49
Reputation : 1
Language : CSS, HTML, Javascript, English, Tagalog
Location : Philippines
Yup, I think it's solve.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
| Topic Solved & Locked |