Add a Flair to Your Pet's Headshot

Add a Flair to Your Pet's Headshot

Author: FallenSamurai
Last Update: Aug. 18 2018

Description:
With this code snippet you can add an flair to your pets. This guide will be set up in several sections: Using an image, text, and Font Awesome.

What you will need:
The IDs of the pets you want to add flairs to.

Recommended Code: Pet Widget Fix

IMPORTANT: NEVER REMOVE content:"";

---

Section 1: Finding Out Your Pet's ID
There are a few different ways to obtain your pet's ID.
a.) From the main Subeta menu view your pet's profile.
b.) Form your user profile using the pet widget view your pet's profile.

From this URL you can grab the ID. Write it down or copy it somewhere safe.

For each pet that you want to add an flair to, we will be using the following selector setup:

a[href='/petinfo.php?petid=ID_NUMBER'] div:after {


}


If you want to use multiple pets with the same flair, use the following setup

a[href='/petinfo.php?petid=ID_NUMBER_1'] div:after,
a[href='/petinfo.php?petid=ID_NUMBER_2'] div:after {


}


---

Section 2: Using an Image
If you want to use an image, you will treat it like a background image. Alternatively you can just a background color and if you want a small dash of color.

a[href='/petinfo.php?petid=ID_NUMBER'] div:after {

 content: "";  /* NEVER REMOVE */

 /* These codes modify the background image */
 background-image: url("https://img.subeta.net/items/item_lifetimeachievement_award_af.gif");
 background-position: center;
 background-size: contain;

 /* These codes modify the flair size*/
 width: 20px;
 height: 20px;

 /* These codes modify the flair's location */
 left: -31px;
 top: 47px;

 /* Probably don't want to mess with these either */
 display: inline-block;
 position: relative;
}

---

Section 3: Using Text
If you want to use text instead of of an image you, use the code below. You can modify the text as usual. Personally I would keep it short.


a[href='/petinfo.php?petid=ID_NUMBER'] div:after {
 /* Change Hi to what ever you want to say. */
 content: "Hi";  /* NEVER REMOVE */

 /* These change the appearance of the text */
 font-family: Impact;
 color: #fede6b !important;
 text-shadow: 0px 0px 2px black;
 font-size: 17px;
 text-decoration: none !important;
 text-align: center;

 /* These codes modify the flair location */
 left: -31px;
 top: 47px;

 /* Probably don't want to mess with these either */
 display: inline-block;
 position: relative;
}

---

Section 4: Using Font Awesome (More Advanced)
Font Awesome has a free CDN, which means we can use their hosted CSS to use their icons. Subeta does use Font Awesome on their website, however it is not set up on User Profiles. So this is a workaround.

Note that there are paid icons that are unavailable unless you have a license. However they are very nice and provide a filter so that you can only view the free goodies.

Step 1:  Font Awesome CSS
Navigate over to the Font Awesome website. From the main menu select How to Use. Look for directions for Getting Started on the Web. There will be a link that looks like:

<link rel="stylesheet" href="https://use.fontawesome.com/…..

We will be using the link to the CSS, so anything within the href=”URL” is what we want. They are regularly updating the library so this link can change.

Copy this link into @import url(URL HERE); and copy at the very top of your user profile code. Note that you cannot have multiple @imports in your stylesheet. You will have to nest them. For instance I have my Font Awesome @import in my main profile code and use the @import code for my user profile on Subeta.

Step 2: The Icon
Using the Font Awesome website select an icon that you wish to use. For this example I will be using the icon called Alternate Pencil. On the icon’s page there will a four digit Unicode. For Alternate Pencil this unicode is f303. 

We will be adding this unicode in the content: ""; property. However you will need to add a \ before the unicode, content: "\f303"; 

Also since Font Awesome is acting like a web font, we need to tell the browser what font it is. This is where the font-family comes in: font-family: "Font Awesome 5 Free";

Note: If you are using the free icons, the font-weight will need to be 900. If you are using a brand (Facebook, twitter, Amazon, e.t.c.) the font-weight needs to be 400.


a[href='/petinfo.php?petid=ID_NUMBER'] div:after {
 font-family: "Font Awesome 5 Free";
 content: "\f303"; /* NEVER REMOVE */
 font-weight: 900;
 
 /* These change the appearance of the text */
 color: #fede6b !important;
 text-shadow: 0px 0px 2px black;
 font-size: 17px;

 /* These codes modify the flair size, update the font size if necessary*/
 width: 20px;
 height: 20px;

 /* These codes modify the flair location */
 left: -31px;
 top: 47px;

 /* Probably don't want to mess with these either */
 display: inline-block;
 position: relative;
}