Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
CallumMcAllister

Is there a way to have social blocks link to different social media on different pages

Asked by CallumMcAllister

Question

CallumMcAllister    1

CallumMcAllister
Posted

Site URL: http://callummcallister.com/

Hey!

In short I want the social blocks to be able to link to personal social media on the whole site, except the page www.callummcallister.com/toodles where I want them to link to my band's social media. I also want the personal social media blocks to only have email, twitter and instagram, whereas I want the band social media to link to a variety of different social media accounts. 

Is there a way to do this? 

Share this post

Link to post

10 answers to this question

Recommended Posts

  • 0

tuanphan    8,029

tuanphan
Posted

Add Code Block > Insert this code > Replace with your social url 

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

CallumMcAllister    1

CallumMcAllister
Posted
On 5/12/2020 at 1:24 PM, tuanphan said:

Add Code Block > Insert this code > Replace with your social url 


<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

Thank you I'll give that a go! 

Cheers!

Share this post

Link to post
  • 0

CallumMcAllister    1

CallumMcAllister
Posted
10 minutes ago, CallumMcAllister said:

Hey @tuanphan sorry to bother again!

Where in the code do the social urls need to go? And also is there a way to add the icons for youtube and email as well?

Thanks in advance. This has been really helpful. 

Actually sorry @tuanphan I managed to figure that out. The last thing 2 things I'm trying to figure out are if it's possible to get the links to open a new tab. And also whether it's possible to set the other icons to change colour when you hover, but the icon hovered over to remain the same, as is the style on the in-built social blocks on the site? 

 

Thanks in advance for your help. 

Share this post

Link to post
  • 0

tuanphan    8,029

tuanphan
Posted
8 hours ago, CallumMcAllister said:

Actually sorry @tuanphan I managed to figure that out. The last thing 2 things I'm trying to figure out are if it's possible to get the links to open a new tab. And also whether it's possible to set the other icons to change colour when you hover, but the icon hovered over to remain the same, as is the style on the in-built social blocks on the site? 

 

Thanks in advance for your help. 

Which icons? Can you share link to page where you inserted icons?

With icon hover: You can use CSS

With open in new tab, above code, edit this code

Quote 

<li>
  <a href="#" target="_blank">
  <i class="fa fa-dribble"></i>
  </a>
</li>

target="_blank" mean open link in new tab

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

CallumMcAllister    1

CallumMcAllister
Posted
6 hours ago, tuanphan said:

Which icons? Can you share link to page where you inserted icons?

With icon hover: You can use CSS

http://callummcallister.com/toodles

I've left in the squarespace social block above the coded one to show the difference. 


image.thumb.png.7c80cc254a2cad6a5684820afad3b6bf.png
 

In the screenshot I am hovering over the twitter icon, which stays the same colour while the other two icons turns grey. 

 

Thanks again! this has been very helpful. The code for a new tab worked a treat. 

Share this post

Link to post
  • 0

tuanphan    8,029

tuanphan
Posted
2 hours ago, CallumMcAllister said:

http://callummcallister.com/toodles

I've left in the squarespace social block above the coded one to show the difference.  been very helpful. The code for a new tab worked a treat. 

Which plan do you use? Personal or Business?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

tuanphan    8,029

tuanphan
Posted
12 hours ago, kenners said:

@tuanphan Sorry to jump in on this- but @CallumMcAllister was able to figure out where to put the social URL. I am new to the coding portion, so I don't know where to put it! Help :) 

Insert Code Block > Paste this code 

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

CallumMcAllister    1

CallumMcAllister
Posted
19 hours ago, kenners said:

@tuanphan Sorry to jump in on this- but @CallumMcAllister was able to figure out where to put the social URL. I am new to the coding portion, so I don't know where to put it! Help 🙂

It's where it says href = "#" replace the # with the url. 

22 hours ago, tuanphan said:

Which plan do you use? Personal or Business?

@tuanphan It's a personal plan. 

kenners reacted to this

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources