Recently Plurk made changes to their User Interface by enlarging several of the graphic elements within the dashboard area. This startled several members who immediately began looking for a way to resize the image to something slightly more manageable. During the incurring scramble to find a solution many users came up with creative ways of fixing the code. Thanks goes out to Plurk Layouts and Olivia Bell for first documenting the friends/fans elements so that a solution could be created. The first change was to the user's avatar image which increased in size by nearly 3 times. The second graphical change was in the Friends and Fans section. The user icons in those sections likewise received a size boost going from 25 pixels to 40 pixels. Users again were up in arms as the larger icons took up screen real estate. This tutorial has been written to provide you with the code necessary to change both of these image sizes as well as to center the icons within the Friends and Fans section.
As we always do we'll begin by providing all of the code to allow you to copy and paste it directly into your profile to begin using the new functionality immediately.
/* Center Friend Icons */
.friend_holder table {
margin-left: auto;
margin-right: auto;
}.friend_holder td {
padding: 5px 6px 5px 6px;
}
/* End Center Friend Icons *//* Change Friends/Fans Picture Size */
.friend_holder .user_link, .friend_holder .user_link img {
width: 25px !important;
height: 25px !important;
}
/* End Change Friends/Fans Picture Size *//* Change Personal Avatar Picture Size */
#profile_pic {
width: 87px;
height: 87px;
}#profile_pic:hover {
width: 195px;
height: 195px;
}
/* End Change Personal Avatar Picture Size */
We'll now follow up by discussing each line of code so that you will understand what each section does and why it is in the profile. As I always do, I strongly recommend documenting the code by making notes for yourself so that you can remember why you added the code. This is extremely important if you ever need to go back to your profile and troubleshoot or modify it.
To make the changes to the friends and fans icons there are several elements that need to be added or modified. We'll break it up to make it easier to explain. The values on the picture sizes are merely examples, you may set them to different sizes to meet your needs and more closely match your theme.
.friend_holder table {
margin-left: auto;
margin-right: auto;
}
The first section deals with the table that holds the friends and fans. In this section we are going to center the icons. We're doing this so that once we have resized the icons they will center within the box. To do this we will use a CSS sleight of hand by setting the left and right margins to automatically adjust according to the width of the table. This is done through the margin-left and margin-right commands. When margin-left and margin-right are both set to auto the block inside is centered to the edges of the container which in this case is the friends box or the fans box. If you have other margin values for .friend_holder table{} you must remove those otherwise your icons will not center.
.friend_holder td {
padding: 5px 6px 5px 6px;
}
The next section of code will modify the padding surrounding each individual icon. I've added this because once the icons have been reduced in size the white space between them feels too large. I am using the padding command and providing a value in pixels for the top, right, bottom, and left sides of the icon. In this case we are adding 5 pixels to the top and bottom and 6 pixels to the left and right of the friends and fans icons. This will move them up and in from what they were before.
.friend_holder .user_link, .friend_holder .user_link img {
width: 25px !important;
height: 25px !important;
}
This code segment will resize the actual icons themselves. We are actually working with two different elements, the .friend_holder .user_link and the image inside this container identified as .friend_holder .user_link img. Within this we use the width and height commands to define the new size. With the latest Plurk changes the icons went to 40 pixels by 40 pixels. Before they were 25 pixels. By setting width: 25px and height: 25px it will make the icons the same size as they were before. In order to override the image size you need to use the !important qualifier which tells the system to use these values no matter what the inheritance of the CSS says.
#profile_pic {
width: 87px;
height: 87px;
}
This section of code will focus on the user's profile avatar or picture. This too has been enlarged substantially. Before it was somewhere in the neighborhood of 50-60 pixels. After the latest changes that Plurk made this avatar ballooned to 195 pixels. For some that is too large. The container that controls this is #profile_pic. By modifying the width and height of this element you can resize the picture. I chose to use 87 pixels which is larger than before but roughly half the size of what Plurk has it set for.
#profile_pic:hover {
width: 195px;
height: 195px;
}
Before Plurk made these changes, the user's avatar would become larger when you ran your mouse over the graphic. When Plurk went to the larger profile picture this function was taken away. We'll re-introduce this using the :hover qualifier to the #profile_pic element. The :hover describes what should be done when a user "hovers" the mouse over an element. In our case we are telling the system to change the width and height of the image. In our case we are resizing the user's avatar to the 195 pixel size that Plurk is now defaulting to.
Well that's about all there is to resizing and repositioning the friends and fans icons and changing the size of your avatar that appears in the dashboard. After this tutorial you will have a customized Friends and Fans section as well as a user image that fits in with the rest of your theme. Hopefully you will find this useful. Good luck and be sure to let everyone know you found this on Plurk Skins.
:) A much more detailed post - excellent. Thank you for the link too - very kind :)