Table of Contents
How to make avatars larger?
| Note: You are doing any custom design changes at your own risk. Make sure to check your site thoroughly after applying them. Given recommendations might need to be adjusted depending on the used template |
General information
Width and height of avatars in widgets are defined by following global classes in CSS:
.ow_avatar { } .ow_avatar img { } .ow_lp_avatars img {}
. By default those classes assign 40×40 px size for avatars displayed in widgets site wide.
To set custom avatar size for one particular widgets or several of them you will need to specify each widget's class + global class and assign custom properties to them.
Width and height of avatar on the user profile page is defined by
.ow_profile_gallery_avatar_image {}
class. Default value being 161X161px.
Index page: Users widget
To increase the size of avatars used in Users widget add following custom CSS in Admin area > Appearance > Customize > CSS tab > Edit CSS box:
.index-BASE_CMP_UserListWidget .ow_avatar {
height: 70px;
width: 70px;
}
.index-BASE_CMP_UserListWidget .ow_avatar img {
height: 70px;
width: 70px;
}
.index-BASE_CMP_UserListWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
Where 70px is desired avatar size.
Index: My Profile widget
To increase the size of avatar used in My Profile widget page add following custom CSS in Admin area > Appearance > Customize > CSS tab > Edit CSS box:
.index-BASE_CMP_MyAvatarWidget .ow_avatar {
height: 70px;
width: 70px;
}
.index-BASE_CMP_MyAvatarWidget .ow_avatar img {
height: 70px;
width:70px;
}
.index-BASE_CMP_MyAvatarWidgett .ow_lp_avatars img{
height: 70px;
width: 70px;
}
Where 70px is desired avatar size.
Dashboard: Hot List widget
To increase the size of avatars used in Hot List widget add following custom CSS in Admin area > Appearance > Customize > CSS tab > Edit CSS box:
.dashboard-HOTLIST_CMP_IndexWidget .ow_avatar {
height: 70px;
width: 70px;
}
.dashboard-HOTLIST_CMP_IndexWidget .ow_avatar img {
height: 70px;
}
.dashboard-HOTLIST_CMP_IndexWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
Where 70px is desired avatar size.
Dashboard: Recently viewed me widget
To increase the size of avatars used in the Recently viewed me widget add following custom CSS in Admin area > Appearance > Customize > CSS tab > Edit CSS box:
.dashboard-OCSGUESTS_CMP_MyGuestsWidget .ow_avatar {
height: 70px;
width: 70px;
}
.dashboard-OCSGUESTS_CMP_MyGuestsWidget .ow_avatar img {
height: 70px;
width: 70px;
}
.dashboard-OCSGUESTS_CMP_MyGuestsWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
Where 70px is desired avatar size.
Dashboard: Bookmarks widget
To increase the size of avatars used in the Bookmarks widget add following custom CSS in Admin area > Appearance > Customize > CSS tab > Edit CSS box:
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar {
height: 70px;
width: 70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar img {
height: 70px;
width:70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
Where 70px is desired avatar size.
Dashboard: My matches widget
To increase the size of avatars used in the My Matches widget add following custom CSS in Admin area > Appearance > Customize > CSS tab > Edit CSS box:
.dashboard-MATCHMAKING_CMP_MatchesWidget .ow_avatar {
height: 70px;
width: 70px;
}
.dashboard-MATCHMAKING_CMP_MatchesWidget .ow_avatar img {
height: 70px;
width:70px;
}
.dashboard-MATCHMAKING_CMP_MatchesWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
Where 70px is desired avatar size.
Profile page: My avatar
To increase the size of avatar used on My Profile page add following custom CSS in Admin area > Appearance > Customize > CSS tab > Edit CSS box:
.ow_profile_gallery_avatar_image {
background: none no-repeat scroll center center transparent;
height: 180px;
width: 180px;
}
Where 180px is desired avatar size.
Results
This screen shot demonstrates the result you will achieve after adding custom CSS from above. Bookmarks widget is using 70x70px custom size, My Matches widget is using default 40x40px size:
Avatar background/border image
After adding custom CSS you will notice small square image behind every avatar. This image is called Avatar background and has default 50Xx50px size.
Avatar background is used to create a border around avatars. After increasing the avatar size you should increase the size of the background image or completely remove it.
How to keep and adjust the avatar background image
- Create the avatar background image with desired border using any photo editor. You can edit the default image by downloading the original ow_themes/your_theme_name/images/avatar_bg.png graphics. Make sure that your custom avatar background image is 10px larger the the custom avatar size set via CSS. Example: if custom avatar size is 100x100px, avatar background image must be 110x110px.
- Upload custom avatar background image in Admin area > Appearance > Customize > Graphics tab
- Copy URL of uploaded image.
- Set avatar background image using following custom CSS:
.widget_class_here .ow_avatar {
background-image: url("http://www.skadate.com/xdemo/ow_userfiles/themes/theme_image_1.png");
...
..
}
Where http://www.skadate.com/xdemo/ow_userfiles/themes/theme_image_1.png is URL of avatar background image copied earlier.
Sample avatar background-image of 110x110px size you can use (right mouse click > save image):
Example:
1. Custom CSS added to increase avatar size for the Bookmarks widget:
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar {
height: 70px;
width: 70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar img {
height: 70px;
width:70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
2. Final custom custom CSS that needs be added to increase avatar size for Bookmarks widget + enlarged avatar background:
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar {
background-image: url("http://www.skadate.com/xdemo/ow_userfiles/themes/theme_image_1.png");
height: 70px;
width: 70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar img {
height: 70px;
width:70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
How to completely remove the avatar background image
To remove the background/border image add display:none property to .widget_class_here .ow_avatar {} class:
.widget_class_here .ow_avatar {
background-image:none;
...
..
}
Example:
1. Custom CSS added to increase avatar size for the Bookmarks widget:
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar {
height: 70px;
width: 70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar img {
height: 70px;
width:70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}
2. Final custom custom CSS that needs be added to increase avatar size for Bookmarks widget + remove avatar background:
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar {
background-image:none;
height: 70px;
width: 70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_avatar img {
height: 70px;
width:70px;
}
.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_lp_avatars img{
height: 70px;
width: 70px;
}