Make a simple "Top Friend" feature for your profile

For a working example you can see one on my page.

Yesterday the thought occurred to me that you can copy the HTML for a specific person and put it in your about me section or some place like that; as it would have that person's ID in the URL.. So I thought bingo! Top friend! Let's make a cool graphic for it too!

I wanted to use a cool graphic to show the top friend as an award or honor (image above). So away I went with photoshop to make this feature so everyone can use it.

If you have any questions feel free to ask me!

Goals

Something easy for people to use. No messy code, make it simple and neat.
Make the top friend pic circular to fit the design.
So a bit of CSS, but only one wrapper DIV in the HTML!

How it works

Copy the HTML of the friend you want to nominate. Just go to your friends list, and search for the friend, then copy their HTML. Make sure to get all of the person wrapper.
Paste the HTML into the top_friend DIV below. Everything must always be nested!
Copy the CSS below and paste it to your CSS styles.
Copy the HTML we created and paste it to your "Who I'd like to meet" section.
Save.

You now have a Top Friend! It's that simple!

The HTML

<div class="top_friend">
Paste your friend HTML here
</div>

The CSS

div.top_friend {
   display:block;
   width:150px;
   height:150px;
   margin:50px auto 12px auto;
   border:0px;
   padding:0px;
   background-image:url('https://foreigncontaminantradio.com/extras/spacehey/images/top_friend_bg_02.png');
   background-repeat:no-repeat;
}

div.top_friend::after {
   content:"";
   display:block;
   position:relative;
   left:0px;
   top:0px;
   width:150px;
   height:150px;
   margin:0px;
   border:0px;
   padding:0px;
   background-image:url('https://foreigncontaminantradio.com/extras/spacehey/images/top_friend_fg_02.png');
   background-repeat:no-repeat;
   pointer-events:none;
}

div.top_friend .person {
   display:block;
   width:150px;
   height:150px;
   margin:0px 0px -150px 0px;
   border:0px;
   padding:0px;
}

div.top_friend .person a:first-child {
   display:block;
   position:relative;
   top:-4px;
   width:150px;
   height:27px;
   line-height:20px;
   margin:0px;
   border:0px;
   padding:0px;
   text-align:center;
}

div.top_friend .person a:first-child p {
   margin:0px;
   border:0px;
   padding:0px;
   font-size:16px;
}

div.top_friend .person a:last-child, div.top_friend .person img {
   display:block;
   width:96px;
   height:96px;
   margin:0px auto 0px auto;
   border:0px;
   border-radius:50%;
   padding:0px;
}

4 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )