By Randall McCallum on Thursday, 09 January 2014
Posted in Technical Issues
Replies 5
Likes 0
Views 1K
Votes 0
I added the EasyDiscuss Leaderboard module to a sidebar position on a RT template (Rockettheme and the user avatar icon as way to big. I am trying to match the theme used in EasyDiscuss and I would like to be able to match the size of the theme avatar, and if possible make it circular to match the theme.

Here is an image showing the Leaderboard user avatar size issue:


Any assistance appreciated.

Randall
Hey Randall,

I don't work here but I actually styled my plugins myself. I use this plugin and you cannot use your own advanced module extensions from your template or they will override/conflict with the original style of the leaderboard module. I know this because I tried using styles in my leaderboard via the module manager in Joomla and I had the same problem. I actually download the recent answers module and it did not have the clock image or the image folder in it! So , I just went into the php and added inline styles and classes to suit my taste like:

discuss-avatar

avatar-medium (48px)

border -radius:"50%" (creates circular image)

border: 1px #d7d7d7 solid (creates border like in zinc but you have to ad padding I believe)


I actually had this problem in my templates and had to change the image size/style on the profile page as 160px was overflowing out of the div container.
·
Thursday, 09 January 2014 09:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks Frederick,

I appreciate the assistance here. I found out why the avatars where so large. Had to make a setting change in EasyDiscuss. > Layout > Large Thumbnail size - It was set to 400 x 400 by default and I had to change it to 160 x 160. I can change the rectangle to circular later.

I might have to ash where and how to do this, but for now the size and shape of the avatar is fine.

Thanks again.

Randall
·
Thursday, 09 January 2014 11:26
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Randall,

Glad that your issue is solved. You can try this codes
.discuss-mod.discuss-leaderboardicon-trophy .avatar {
border-radius: 50%;
}

to make the avatar round. Hope this helps.

Thanks!
·
Thursday, 09 January 2014 12:54
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you very much Adelene,

I will add this in the morning.

I bought a good book on HTML 5 and CSS today. HTML5 and CSS3 Responsive Web Design Cookbook - I plan to learn as much as I can about HTML and CSS in 2014 so I can make the modifications to my site that I have planned. I so much appreciate all the help and wonderful assistance here.
·
Thursday, 09 January 2014 13:02
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Randall,

No problems! Glad to be of help!

Thanks!
·
Thursday, 09 January 2014 13:21
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post