Turn Your Status and Mood Into Image Badges

3 days ago — by Kayla⟡ — Text & Name Effects — used 2 times

Turn your status and mood into cute badges with tiny images beside the text. Replace the two image URLs with your own. Change 23px to resize the images. To move them to the right, change:

background-position: right 8px center !important;
padding: 8px 38px 8px 12px !important;

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<style>
/* Style both badges */
.general-about .details p:nth-of-type(2),
.profile .mood,
p.profile-mood {
  display: block !important;
  width: fit-content !important;
  margin: 10px auto !important;

  padding: 8px 12px 8px 38px !important;

  background-color: #fff0f8 !important;
  background-repeat: no-repeat !important;
  background-position: left 8px center !important;
  background-size: 23px auto !important;

  border: 1px solid #e3a8c8 !important;
  border-radius: 999px !important;

  color: #7e5b79 !important;
  text-align: center !important;
}

/* Status image */
.general-about .details p:nth-of-type(2) {
  background-image: url("STATUS-IMAGE-URL-HERE") !important;
}

/* Mood image */
.profile .mood,
p.profile-mood {
  background-image: url("MOOD-IMAGE-URL-HERE") !important;
}
</style>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Text & Name Effects

« Back to Text & Name Effects | « All Profile Elements