Jump to content

Search the Community

Showing results for tags 'social icons'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome
    • Announcements & News
    • New Arrivals
  • Web Development
    • Programming
    • Database Development
    • Server Administration
    • Hosting & Domains
    • Frameworks
  • Web Design
    • HTML & CSS
    • Graphics & Multimedia
  • Desktop Discussion
    • Linux Development
    • Windows Development
    • Mac/Apple Development
    • Hardware Discussion
  • Marketing & Business
    • Advertising, Marketing, Monetization & Social Media
    • Search Engine Optimization & Traffic Building
    • Buy, Sell or Trade
  • Prodjex Web Development Applications, Tools and Plugins
    • IP.Board Applications and Plugins
    • Web Tools
  • The Developer Dump
    • General Chat

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. 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.
×
×
  • Create New...