Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12249
Joined: 30 Sep 2006, 03:37

Re: Social Media Sharing in X3

07 Jan 2016, 10:08

Overmaster wrote:Karl, please give the code and css for social buttons in the latest version for about x3 thx)
Sorry, but where do you want to add social buttons? You want to add new ones in the footer?
 
User avatar
Overmaster
Experienced
Posts: 51
Joined: 21 Jan 2011, 05:54

Re: Social Media Sharing in X3

07 Jan 2016, 15:46

 
User avatar
mjau-mjau
X3 Wizard
Posts: 12249
Joined: 30 Sep 2006, 03:37

Re: Social Media Sharing in X3

07 Jan 2016, 21:45

Ok, but this is not an official tutorial. It requires tweaks to the code based on the amount of icons you want to display, and adjustments of the size in CSS ... The below is the code used in the link above:

HTML
Add to your content, change links, adjust small-block-grid-NUMBER to the amount of icons:
Code
<ul class="about-icons small-block-grid-7">
  <li>
    <a href="https://www.facebook.com/mjaumjauweb" class=" fa fa-facebook" title="Facebook" target="_blank" rel="external"></a>
  </li>
  <li>
    <a href="https://plus.google.com/+Mjaumjauweb" class="fa fa-google-plus" title="Google" target="_blank" rel="external"></a>
  </li>
  <li>
    <a href="http://no.linkedin.com/in/mjaumjau" class="fa fa-linkedin" title="Linkedin" target="_blank" rel="external"></a>
  </li>
  <li>
    <a href="https://twitter.com/mjaumjauweb" class="fa fa-twitter" title="Twitter" target="_blank" rel="external"></a>
  </li>
  <li>
    <a href="https://github.com/mjau-mjau" class="fa fa-github" title="Github" target="_blank" rel="external"></a>
  </li>
  <li>
    <a href="http://codepen.io/mjau-mjau/" class="fa fa-codepen" title="Codepen" target="_blank" rel="external"></a>
  </li>
  <li>
    <a href="/contact/" class="fa fa-envelope" style="background:#FFC000" title="Email"></a>
  </li>
</ul>
CSS
Add the following to your settings->custom->custom CSS:
Code
.about-icons {
    margin: .8rem -.1rem 0 -.1rem;
    width: 100%;
}
.about-icons a {
    font-size: 1.3em;
    width: 100%;
    padding: 0!important;
    padding-bottom: 100%!important;
    color: #FFF;
    border-radius: 1000px;
    position: relative;
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.about-icons a:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.about-icons li {
    padding: 4px;
}
.about-icons a:hover {
    transform: scale(1.4);
    z-index: 2;
}
.about-icons a.fa-facebook {
    background: #3b5998 !important;
}
.about-icons a.fa-twitter {
    background: rgb(0, 172, 237) !important;
}
.about-icons a.fa-google-plus {
    background: #dd4b39 !important;
}
.about-icons a.fa-linkedin {
    background: #007bb6 !important;
}
.about-icons a.fa-github {
    background: #333 !important;
}
.about-icons a.fa-codepen {
    background: #333 !important;
}