Sorry, but where do you want to add social buttons? You want to add new ones in the footer?Overmaster wrote:Karl, please give the code and css for social buttons in the latest version for about x3 thx)
X3 Photo Gallery Support Forums
Sorry, but where do you want to add social buttons? You want to add new ones in the footer?Overmaster wrote:Karl, please give the code and css for social buttons in the latest version for about x3 thx)
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:Overmaster wrote:https://mjau-mjau.com/about/
<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>
.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;
}