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.

Sparkling Username with Icon

View previous topic View next topic Go down

Solved Sparkling Username with Icon

Post by E.rr0r on 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
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™ on 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".



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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

Were will I paste the Code?

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™ on 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.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r on 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
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™ on 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.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r on 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
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™ on November 22nd 2012, 7:56 am

I know, have you tried the codes I gave you above? Those should work?



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r on 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
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™ on 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.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r on 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
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™ on 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?
http://help.forumotion.com/f6-graphic-design-section



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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

How do I add the Icon?

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™ on November 22nd 2012, 8:16 am

By replacing this from the code provided; imagedirectlink to the icons' URL.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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

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

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™ on November 22nd 2012, 8:22 am

No,

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



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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

How about the changing of the color of the name?

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™ on November 22nd 2012, 8:34 am




Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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

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

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™ on 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.
http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/medal-bronze-1-icon.png

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

Post by E.rr0r on 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
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™ on November 22nd 2012, 9:18 am

Can you please provide your forum's URL ? Thank you.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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


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™ on 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™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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

Done, I solved it instead of 13px I change it to 20px

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™ on November 22nd 2012, 9:33 am

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



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sparkling Username with Icon

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

Yup, I think it's solve.

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 on November 22nd 2012, 12:32 pm

Topic Solved & Locked

Sanket
ForumGuru

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

http://webartzforum.com

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