Hat Santa in username

[Manoel J?nior]

Does anyone know make this change to put a hat on the user's name?

https://vborg.vbsupport.ru/external/2015/12/29.png

[Dave]

It's just a matter of setting a background image.
Something like: background: url(urltosantahat.png) no-repeat 1px;

[Cody.9791]

It's just a matter of setting a background image.
Something like: background: url(urltosantahat.png) no-repeat 1px;

I was browsing this site and came across this thread and that's something that I'd like to do with my site as well. What would need modified for something like that to appear on the site by the usernames? I'm assuming in the template area?

[MarkFL]

I was browsing this site and came across this thread and that's something that I'd like to do with my site as well. What would need modified for something like that to appear on the site by the usernames? I'm assuming in the template area?

I'm thinking it would be easier to do with plugins (one for each area in which the image is to be added). The existing usernames could be then wrapped with the appropriate HTML. :)

[Dave]

It's done by an addition to the additional.css template.
I can't tell you the exact CSS code for it since each style is different, I need a URL to the forum for that.

[Manoel J?nior]

I'm trying to do but to no avail, something like a plugin with Mark said would exelente. It would be possible?

[MarkFL]

I'm trying to do but to no avail, something like a plugin with Mark said would exelente. It would be possible?

It would likely be more efficient to use CSS as Dave suggested, using CSS class selectors. If you wish to upload an image, I would be willing to give it a shot later tonight. I am about to log off for a few hours now. :D

[Manoel J?nior]

Of course my friend :D

https://vborg.vbsupport.ru/external/2015/12/26.png

Lol waiting for this :)

[MarkFL]

Of course my friend :D

https://vborg.vbsupport.ru/external/2015/12/26.png

Lol waiting for this :)

Okay, I have it working, so just let me know all of the places you want the hat to appear...on my local dev site, I have it working in postbits, profile page and visitor messages...but it's just a matter of adding the classes to the selector. :)

[Manoel J?nior]

Okay, I have it working, so just let me know all of the places you want the hat to appear...on my local dev site, I have it working in postbits, profile page and visitor messages...but it's just a matter of adding the classes to the selector. :)
These you have commented was excellent !!

[MarkFL]

These you have commented was excellent !!

Okay...I uploaded the image to "images/misc" and then in the "additional.css" template, added:

.username_container .username::before, .member_username::before, .member_blockrow .floatleft .username::before, .postbithead .username::before {
content: url("images/misc/username_hat.png");
position: relative;
top: -3px;
left: 18px;
margin-left: -18px;
}

This will put the hat on names in social groups too. Let me know how that works for you. :)

[Manoel J?nior]

Thank you friend, it was really cool !!!

I'll have to get a picture in which the hat do a little curca because the way it is for those who have the name started capitalized overrides the hat the letter of the first name.

Thank you!!!

[MarkFL]

Thank you friend, it was really cool !!!

I'll have to get a picture in which the hat do a little curca because the way it is for those who have the name started capitalized overrides the hat the letter of the first name.

Thank you!!!

On my local dev site, it sits right on top of the uppercase first letter of a username:

https://vborg.vbsupport.ru/attachment.php?attachmentid=153803&stc=1&d=1449977247

If you need to move the image up though, adjust the "top" attribute of the CSS selector I posted. For example, to move it 2px further up, change the value from "-3px" to "-5px"...if you want to post a link to your site (to a page where a name is being obscured), then I can determine the value you need by editing the page HTML with Firebug. :)

[Stratis]

Here a test by me, with an other image that has angle to the left side.
153844

I added code according to Marks code:
/***** Santa's hat *****/
.username_container .username::before, .member_username::before, .member_blockrow .floatleft .username::before, .postbithead .username::before {
content: url("images/misc/username_hat3.png");
position: relative;
top: -3px;
left: 12px;
margin-left: -12px;
}

153845
:p

[shimei]

Any idea how to get this to work with VB5? Should I start a new thread under VB5 programming? If so, could someone help out?

[MarkFL]

Any idea how to get this to work with VB5? Should I start a new thread under VB5 programming? If so, could someone help out?

All that would really need to be done is to replace the class names with the appropriate vB5 counterparts. If you would like for me to do this at your site, please PM me the following:


Link to your site
Admin login credentials
Path to image file.


I would be able to get to this tonight. :)

[shimei]

Thanks Mark!