ip.board Adding Custom Social Buttons To IPS Focus Themes

[Nathan]

Today I was on the forum and wanted to add in a link to our GitHub and GitLab accounts next to the social icons.  We use a theme from IPS Focus created by Ehren for IP.Board are by far the best out there.  Out of the box they include all of the mainstream social icons for inclusion, but not GitHub or GitLab.  The good news is the theme library is pulling these from FontAwesome so we just need to add a little CSS.

Jump into your custom.css file, make sure you go into custom.css as then you’re CSS will not be overwritten during theme upgrades.

Here’s the code I dropped in for GitHub and GitLab.  You can set the background color to whatever you like, the gradient I’d leave as it’s the effect you see when hovering any of your social icons.  Just update the name of the element from “sGitLab” to whatever you like in the three lines of code.  Below I’ve added 2, one for GitHub and one for GitLab.

a.ipsfocus_sGitlab:before{ content: "\f296"; }
.ipsfocus_social .ipsfocus_sGitlab{ background: #fd7e14; }
.focus-social-gradient .ipsfocus_sGitlab{ background-image: linear-gradient(to bottom, #4c71b0 0%, #304c87 100%); }
a.ipsfocus_sGithub:before{ content: "\f09b"; }
.ipsfocus_social .ipsfocus_sGithub{ background: #495057; }
.focus-social-gradient .ipsfocus_sGithub{ background-image: linear-gradient(to bottom, #4c71b0 0%, #304c87 100%); }

You can get the unicode for the content element from the FontAwesome website itself when you click into an icon.

Now your CSS is ready, time to add it to the social icons html of the theme.  Jump back to your list of themes and click the edit button this time, then click the “Social Icons” tab.

In here you can drop in your HTML following the syntax I’ll paste below.  Make sure to use your new class name, mine are sGitLab and sGitHub.

<li><a href="https://www.facebook.com/prodjexapp" class="ipsfocus_sFacebook" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/ProdjexApp" class="ipsfocus_sTwitter" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/company/25049182/" class="ipsfocus_sLinkedin" target="_blank">LinkedIn</a></li>
<li><a href="https://github.com/nrileykc" class="ipsfocus_sGithub" target="_blank">Github</a></li>
<li><a href="https://gitlab.com/gallitin" class="ipsfocus_sGitlab" target="_blank">GitLab</a></li>

That’s it you’re all set just save and reload your site to see the changes.  You can see our's here on the boards in the header and footer.  

View the how to article on our web development blog.