Skip to main content

Custom Profile Badge 2 inspired by Linked In

Image
By
Previously we had made a multi-profile badge which you can find here.

Now comes the version two of this badge. Which is nothing but the same badge with a cover background. Honestly it's just a rip off of LinkedIn profile badges. But since they are limited to LinkedIn, you can use this profile badge to meet your need.

Output of this post will be a profile badge that looks something like this,



Since this is basically a modified version of the previous profile badge we are going to reuse the same code.

Step 1. Define the CSS for circular image, then a CSS for list of links, and then the badge border and a background cover which is nothing but a background image positioned properly.

.profileBadge img {
  1. border-radius: 50%;
  2. width: 150px;
  3. height: 150px;
  4. margin: auto;
  5. display: block;
  6. padding: 5px;
  7. text-align: center;
}
.profileBadge li {
  1. text-transform: uppercase;
  2. list-style: none;
  3. line-heigth: 1.4px;
  4. text-align: center;
  5. padding: 5px;
}
.profileBadge {
  1. border: 1px solid #ddd;
  2. border-radius: 4px;
  3. padding: 5px;
  4. background-repeat: no-repeat;
  5. background-image: url(http://yourCoverImageUrl.com/image.jpg);
  6. background-size: 100%;
  7. background-position: 0% -20%;
}

Step 2. This badge uses font awesome, include following link to font awesome css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"/>

If you are not sure how to use font awesome further, go here.

Step 3. Go to page layout and add a gadget of HTML/Javascript. If you're on WordPress you need to create a Text Widget and add the following.


<div class="profileBadge">
<img src="YOUR_PROFILE_PICTURE.png" alt="profile_picture" width="200" height="200" />
<p align='center'>Whatever you want to say goes here..</p>
<li><i class='fa fa-google-plus'></i> <a href="http://plus.google.com/u/0/+YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-instagram'></i> <a href="http://instagram.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-facebook'></i> <a href="http://facebook.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
</div>
With a little modification to the code above you can also make it look like this,
What I did was just included the icon and link in the same link row. 
That's it.


And in case you are wondering what is that image I am using as cover. It's Blink from X-men Days of Future Past fighting the Sentinels.

I'm using a smaller version of this image, just to reduce the load on my visitors. Let me know your thoughts.

Labels:

Comments

Post a Comment

Popular posts from this blog

Unity Mobile Game Optimization Checklist

By
- On Image and Text components that aren’t interacted with you can uncheck “Raycast Target” on it, as it will remove them from any Raycast calculus. - Click on your textures in your “Project” window. Click on the “Advanced” arrow, and now check “Generate Mip Maps”, Unity especially recommends it for faster texture loading time and a lower rendering time. - Set the “Shadow Cascades” to “No Cascades” (Quality settings) - If you have dynamic UI elements like a Scroll Rect with a lot of elements to visualize, a good practice is to turn off the pixel perfect check box on the canvas that contains the list and disable the items that aren’t visible on the screen. - Set all non moving objects to "Static" - Above Unity3d 2017.2 you should turn off "autoSyncTransforms" on the Physics tab - Always use Crunch Compression Low on textures - Try to keep the “Collision Detection Mode” on “Discrete” if possible, as “Dynamic” demands more performance. - You can go to the TimeManager w...
Post a Comment
Read more

How to make RPC in Unreal Engine Steam Online Subsystem and EOS

By
Remote Procedure Calls, also known as RPCs, are a way to call something on any other instance.  In the Unreal Engine, RPCs are used to ship events from the patron to the server, the server to the customer, or from the server to a specific group. It's important to word that RPCs cannot have a return cost. If you want to return something, you'll ought to use a seconds RPC within the contrary path. There are precise policies that RPCs observe, which are unique in the official Documentation. Some of these regulations encompass wherein the RPC must be run, such as the server instance of an Actor, on the owner of the Actor, or on all instances of the Actor. There are some necessities for RPCs. First, they must be referred to as on Actors or replicated Subobjects. The Actor (and component) have to additionally be replicated. If the server is looking an RPC to be executed on a customer, handiest the patron who owns that Actor will execute the function. Similarly, if a client is calling...
Post a Comment
Read more

How to fix clothes flickering in Unreal Engine 5.

By
 This issue can be noticed some of the character clothes when using Paragon Characters in UE5. To fix the flickering issue, Use Self Collisions checkbox in collisions properties under the Static Mesh option of your character. Open the character model go to   Asset Details > Clothing Properties - Cloth Config - ChaosClothConfig - Collision Properties - Use Self Collisions > False
Post a Comment
Read more