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.

Avatar in quick reply

View previous topic View next topic Go down

Solved Avatar in quick reply

Post by PA on December 16th 2014, 5:48 am

Hey I came across a website that had this:



How do you get the avatar  next to the quick reply? How is it rounded?


Last edited by PA on December 19th 2014, 1:27 pm; edited 1 time in total

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Avatar in quick reply

Post by SarkZKalie on December 16th 2014, 6:52 am


SarkZKalie
Forumember

Male Posts : 448
Reputation : 78
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: Avatar in quick reply

Post by PA on December 16th 2014, 8:18 am

Thanks!
But how do I style it? As in, how do I give it a circular shape and the border?

Also, whats the avatar it is using??

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Avatar in quick reply

Post by Mati on December 16th 2014, 8:31 am

Add this in your CSS

Code:
#left img {
    border-radius: 50px;
    border: 1px solid #ccc;
    padding: 2px;
    background: #fff;
}

Mati
Active Poster

Posts : 1884
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Avatar in quick reply

Post by PA on December 16th 2014, 8:40 am

Thanks Mati! But that just changes the login widgets profile, the avatar next to quick reply is still a square

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Avatar in quick reply

Post by Ange Tuteur on December 16th 2014, 8:57 am

Hello @PA,

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In the topics
Paste the code below and submit :
Code:
$(function() {
  var q = document.getElementById('quick_reply'), img = document.createElement('IMG');
  if (!q) return;
  img.src = _userdata.avatar.replace(/.*?"(.*?)".*/,'$1'), img.className = 'qr-avatar';
  q.insertBefore(img,q.firstChild);
});

Then add this to your stylesheet :
Display > Colors > CSS stylesheet
Code:
#quick_reply { position:relative }
.qr-avatar {
  position:absolute;
  left:0;
  top:0;
}

You can style the image with the .qr-avatar classname.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Avatar in quick reply

Post by PA on December 16th 2014, 10:44 am

Thanks Ange! I swear you know everything..
Okay so I managed to resize it and style it. Buuut I can't move its position. How would I do that? I am editing it's absolute position..

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Avatar in quick reply

Post by Ange Tuteur on December 16th 2014, 11:37 pm

Have you replace the 0 in left and top with something like below ?
Code:
.qr-avatar {
  position:absolute;
  left:10px;
  top:50px;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Avatar in quick reply

Post by PA on December 17th 2014, 3:52 am

Oh, I don't know what I was doing before xD Works now! Sorry !

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Avatar in quick reply

Post by PA on December 19th 2014, 1:28 pm

Guys this is solved! You can move this to archives. Brilliant support as usual, thanks.

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Avatar in quick reply

Post by APE on December 19th 2014, 2:10 pm

Topic solved and archived





APE
Manager
Manager

Male Posts : 8636
Reputation : 756
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

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