LinkedIn Post CSS/HTML Guide

by HeartAway

Summary:

CSS/HTML Guide for replicating LinkedIn posts on AO3 using work skins. Excellent for your business AUs.

Testy McTestface
Sales at Company
2h • 🌐
lets get into the grindset, boys

24 reactions · 3 comments · 1 repost

Like Comment Repost Send

---

This guide will allow you to recreated LinkedIn posts in your fic only using HTML codes. Like all other complicated HTML, you will need to create a workskin for your fic to enable this. There are more detailed guides to creating and using workskins in AO3, like this one. 

This guide will allow you to recreated LinkedIn posts that can (but do not have to) include an image, profile pic, and different reactions. 

If you want to switch out any of the six reactions LinkedIn has, the uploaded reaction pngs can be found here and will replace/augment the 'lk-reactions' code near the end: <span class="lk-reactions"> <img src="https://i.postimg.cc/wMh5fbRV/linkedin-like-reaction-icon.png" alt="Like" /> <img src="https://i.postimg.cc/KjHbWJX1/linkedin-celebrate-reaction-icon.png" alt="Celebrate" /> <img src="https://i.postimg.cc/FzBv6DtR/linkedin-funny-reaction-icon.png" alt="Laugh" />

I'll say that in my experimentation that the code gets a little glitchy if you use all of the reactions, particularly for mobile. 

• Like: https://i.postimg.cc/wMh5fbRV/linkedin-like-reaction-icon.png
• Celebrate: https://i.postimg.cc/KjHbWJX1/linkedin-celebrate-reaction-icon.png
• Laugh: https://i.postimg.cc/FzBv6DtR/linkedin-funny-reaction-icon.png
• Heart: https://i.postimg.cc/hv5nYpFG/linkedin-heart-reaction-icon.png
• Insightful: https://i.postimg.cc/ZnMmQVkC/linkedin-insightful-reaction-icon.png
• Support: https://i.postimg.cc/fyrsPB4R/linkedin-support-reaction-icon.png

AO3 will also sometimes lose the lk-divider code randomly. I haven't been able to figure out why, but the post should appear functional enough as is if it does get lost.

CSS

#workskin .lk-container {
  display: block;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

#workskin .lk-pfp {
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ccc;
  margin-right: 10px;
}

#workskin .lk-pfp img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

#workskin .lk-info {
  display: inline-block;
  vertical-align: top;
  width: auto;
  line-height: .5;
}

#workskin .lk-name {
  font-weight: bold;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0.5;
}

#workskin .lk-headline {
  display: block;
  font-size: 12px;
  color: #555;
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

#workskin .lk-meta {
  display: block;
  font-size: 12px;
  color: #777;
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

#workskin .lk-post {
  display: block;
  clear: both;
  margin-top: 2px;
  line-height: 1.25;
  font-size: 14px;
}

#workskin .lk-media {
  display: block;
  margin: 14px 0;
}

#workskin .lk-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

#workskin .lk-divider {
  display: block;
  height: 1px;
  background: #ddd;
  margin: 0px 0;
}

#workskin .lk-stats {
  display: block;
  margin-top: -4px;
  font-size: 12px;
  color: #666;
  overflow: hidden;
  line-height: 1;
}

#workskin .lk-reactions {
  float: left;
  margin-top: -10px;
  display: block;
  white-space: nowrap;
}

#workskin .lk-reactions img {
  width: 16px;
  height: 16px;
  margin-right: -4px;
  vertical-align: text-top;
}

#workskin .lk-reaction-count {
  margin-left: 6px;
  vertical-align: middle;
}

#workskin .lk-engagement span {
  margin-left: 6px;
}

#workskin .lk-actions {
  display: block;
  margin-top: 0px;
  text-align: center;
}

#workskin .lk-action {
  display: inline-block;
  width: 22%;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

#workskin .lk-action img {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto 2px auto;
}

#workskin .lk-action span {
  display: block;
  font-size: 11px;
  color: #666;
  line-height: 1;
}

HTML

<div class="lk-container">
<p><span class="lk-pfp"> <img src="PROFILE PIC URL" alt="Profile Picture ALT TEXT" /></span></p>
<p><span class="lk-info"><br /><span class="lk-name">NAME</span><br />
<span class="lk-headline">TITLE at WORKPLACE</span><br /><span class="lk-meta">2h &middot;🌐</span><br /></span></p>
<p><span class="lk-post"><br />YOUR POST TEXT<br />
<span class="lk-media"> <img src="IMAGE URL" alt="IMG ALT TEXT" /> </span> </span>
<span class="lk-divider"></span><br />
<span class="lk-reactions"> <img src="https://i.postimg.cc/wMh5fbRV/linkedin-like-reaction-icon.png" alt="Like" /> <img src="https://i.postimg.cc/KjHbWJX1/linkedin-celebrate-reaction-icon.png" alt="Celebrate" /> <img src="https://i.postimg.cc/FzBv6DtR/linkedin-funny-reaction-icon.png" alt="Laugh" /> <span class="lk-reaction-count">24 reactions &middot; 3 comments &middot; 1 repost </span> </span><br />
<span class="lk-divider"></span><br />
<span class="lk-actions"> <span class="lk-action"> <img src="https://i.postimg.cc/xCf6zQX4/linkedin-like.png" alt="Like" /> Like </span> <span class="lk-action"> <img src="https://i.postimg.cc/C1hcq0Rv/linkedin-comment.png" alt="Comment" /> Comment </span> <span class="lk-action"> <img src="https://i.postimg.cc/cHxFnWvk/linkedin-repost.png" alt="Repost" /> Repost </span> <span class="lk-action"> <img src="https://i.postimg.cc/rmVfrTDn/linkedin-share.png" alt="Send" /> Send </span> </span></p>
</div>