sastavangogh

June 17, 2021

On 5/12/2020 at 5:54 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>

Hi @tuanphan! I am trying to achieve a similar effect with a separate social link block, I have a personal plan as well so I tried this code but I need to use it for my Behance and Vimeo accounts - how can I include the social icons for these two platforms?

June 17, 2021

14 hours ago, tuanphan said:
Don't remove any code. Add this to Design > Custom CSS
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1623169941989_2417 {
    width: 10%;
    margin: 0 auto;
}
}

Amazing, thank you that really worked!! Is there any way I can remove the word "Top" and just have it just be the arrow for the scroll up?

June 16, 2021

On 6/4/2021 at 11:21 AM, sastavangogh said:

Hi, I tried a similar code and it works! But the problem is that the footer's overall height increases a lot when I put this code. Any chance I can avoid/fix the height of the footer to normal?

Hi @tuanphan! The centre-alignment helped, but now there is a lot of empty space under the footer that I cannot seem to get rid of. I had changed the position property of the text to relative to get the placement correct, perhaps that has created an issue? Sharing code below:

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
.t-top {
font-weight: 300;
letter-spacing: 3px;
font-size: 14px;
text-transform: none;
text-align: center;
line-height: 1.6;
padding-left: 4px;
padding-top: 4px;
position: relative;
bottom: 10px;
height: 10px;
z-index: 999;
background-color: transparent;
color: #000;
}
.t-top .arrow:before {
font-family: 'squarespace-ui-font';
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\e02d";
text-align: center;
display: block;
vertical-align: middle;
transform: rotate(-90deg);
cursor: pointer;
margin-left: -4px;
}
.t-top .arrow {display:inline;
}
</style>

In order to fix this, I am looking to reduce the footer height by half at least (without moving the centre aligned position of the 'back to top' button)

I dont mind removing the text altogether and only keeping the arrow scrolling back to the top of the page, would that help the situation?

Please help me figure this out, I have tried all possible codes I've found across on similar threads but none seem to help 😕

PW tester

June 16, 2021

23 hours ago, tuanphan said:
Don't remove any code in your current code.

Add this to Design > Custom CSS
h2.hover-text a {
    position: relative;
}

Amazing, this solved my issue!! Thanks 🙂

June 15, 2021

On 6/10/2021 at 1:27 PM, sastavangogh said:

Thanks for the code! I followed all the steps you mentioned above. However, the black background applies to the full body of text too, thus making it invisible. It only needs to apply to just the anchor link text, how can I fix that please? Screenshot attached.

Could you help me fix this glitch please @tuanphan? Thanks so much

June 10, 2021

7 hours ago, tuanphan said:

Hi,

Remove above code & follow these steps

Step 1. Add a Code Block >> Paste this code


<h2 class="hover-text">Aditya is an <a href="#photographer"><span>independent photographer</span><span class="thover"></span></a> and <a href="#writer"><span>writer</span><span class="thover"></span></a> with a focus on documenting culture and identity, often through the lens of nostalgia.</h2>

Step 2. Add this to Design > Custom CSS


/* hover text */
.thover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    left: 0;
    top: 0;
    z-index: 10;
}
h2>a:hover>span:first-child {
    position: relative;
    z-index: 9999;
    color: white !important;
}
.thover {
    position: absolute;
    width: 0;
    height: 100%;
    background: black;
    left: 0;
    top: 0;
    z-index: 10;
    transition: all 0.3s;
}
h2 a:hover .thover {
    width: 100%;
    transition: all 0.3s;
}

Thanks for the code! I followed all the steps you mentioned above. However, the black background applies to the full body of text too, thus making it invisible. It only needs to apply to just the anchor link text, how can I fix that please? Screenshot attached.

June 8, 2021

22 minutes ago, tuanphan said:

Try adding to Design > Custom CSS



/* text hover */
div#block-741f115989846a393cb1 a:after {
    display: inline-block;
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 50px;
    background: green;
    left: 0;
    z-index: 990;
    transition: all 0.3s;
}
div#block-741f115989846a393cb1 a {
    position: relative;
    z-index: 9999;
}
div#block-741f115989846a393cb1 a:hover:after {
    width: 100%;
    transition: all 0.3s;
    z-index: 1000;
}

Hi this works for the LTR transition when I change the background to black! But the text colour wont change to white even when I add "color: #ffffff!important;"? How can I bring the text on top of the black background in the colour white (on hover)?

June 7, 2021

1 hour ago, tuanphan said:

Can you share link to page where you use anchor links?

https://www.aditya-sinha.com/

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links' font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

Yeah sure! Its on the homepage, right under the opening slideshow - I want to add a couple more anchor links in this section once the LTR transition works. Screenshot attached for reference.

PW tester

June 7, 2021

On 6/1/2021 at 3:11 PM, sastavangogh said:

Hey, a follow up question: I am trying to apply a similar hover animation to anchor links on the homepage, where in when you hover on the links, the background color changes as a transition from left to right.

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links' font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

*Code for the above:

h2

a {

   text-decoration: none!important;

   background: #f6ffed;

   padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

}

h2 a:hover{

background: #000000!important;

color: #ffffff!important;

padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

}

Hi I am still looking for an answer to this, if anyone could help me out with the CSS for this that would be really great. Thanks!

June 5, 2021

On 3/3/2021 at 9:28 PM, CAKelly said:

Site URL: https://courtneykellywrites.com

Hello! I am completely baffled-- the anchor links that I use in my top nav to create a single scroll website with Squarespace 7.1 are jumping to the wrong sections of my site on mobile. They work perfectly on desktop, but on mobile, the links to latter parts of my page are off by as much as 1,000px. Can anyone help me figure out what's going on? Thank you so much in advance!

Hi! Could you please share how you fixed the anchor links on mobile view? I have the exact same issue with my homepage anchor links!

June 4, 2021

On 6/1/2021 at 3:11 PM, sastavangogh said:

Hey, a follow up question: I am trying to apply a similar hover animation to anchor links on the homepage, where in when you hover on the links, the background color changes as a transition from left to right.

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links' font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

*Code for the above:

h2

a {

   text-decoration: none!important;

   background: #f6ffed;

   padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

}

h2 a:hover{

background: #000000!important;

color: #ffffff!important;

padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

}

@bangank36, hi - wanted to check with you if you could help me out with this? Any help would be appreciated, thanks!

June 4, 2021

20 hours ago, tuanphan said:
Add to Design > Custom CSS
/* align center back to top */
a.t-top {
    text-align: center;
    display: block;
    width: 100%;
}

Hi, I tried a similar code and it works! But the problem is that the footer's overall height increases a lot when I put this code. Any chance I can avoid/fix the height of the footer to normal?

June 4, 2021

14 hours ago, tuanphan said:

Looks fine here. Can you explain clearly?

Hi @tuanphanit is a little to the right if you look closely, any way to center it to the screen properly?

I've attached a screenshot for better clarity.

June 2, 2021

On 4/28/2021 at 7:38 AM, tuanphan said:

Hi. Add to Design > Custom CSS


body.homepage article section:first-child:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
    -webkit-animation: fade_move_down 4s ease-in-out infinite;
    -moz-animation:    fade_move_down 4s ease-in-out infinite;
    animation:         fade_move_down 4s ease-in-out infinite;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}

Hi @tuanphan, thanks for helping me out with the scroll down indicator a couple months ago (and since!). But I've just come to realise that the arrow is not center aligned on mobile. I've tried numerous codes from similarly answered questions on the forum, but none have seemed to work.

Would you know how to center align the indicator on mobile devices as well? Thanks.

PW tester

June 2, 2021

14 hours ago, tuanphan said:

Hi. What is password?

Hey the password is tester. Thanks!

June 1, 2021

2 hours ago, tuanphan said:

Hi. Add to Design > Custom CSS



/* link hover */
.header-nav-item a, .header-nav-item {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
    border: none !Important;
}
.header-nav-item a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.header-nav-item a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

Hey, a follow up question: I am trying to apply a similar hover animation to anchor links on the homepage, where in when you hover on the links, the background color changes as a transition from left to right.

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links' font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

*Code for the above:

h2

a {

text-decoration: none!important;

background: #f6ffed;

padding-left: 3px;

padding-right: 3px;

padding-bottom:1px;

}

h2 a:hover{

background: #000000!important;

color: #ffffff!important;

padding-left: 3px;

padding-right: 3px;

padding-bottom:1px;

}

June 1, 2021

34 minutes ago, tuanphan said:

Hi. Add to Design > Custom CSS


/* link hover */
.header-nav-item a, .header-nav-item {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
    border: none !Important;
}
.header-nav-item a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.header-nav-item a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

Thank you once again Tuanphan, your help is very much appreciated!

May 31, 2021

On 5/30/2021 at 1:17 PM, sastavangogh said:

Site URL: https://www.aditya-sinha.com/

Hi @tuanphan, I followed your link (https://beaverhero.com/back-to-top-squarespace/) to create a back to top arrow on my page. However, it does not seem to centre align properly. I've added <center></center> to the code as well and here is the customized CSS I put into the Design tab:
/* Back to Top */
.t-top {
font-weight: 300;
letter-spacing: 3px;
font-size: 14px;
text-transform: none;
text-align: center;
line-height: 1.6;
padding-left: 4px;
padding-top: 4px;
position: fixed;
bottom: -10px;
width: 100px;
height: 40px;
z-index: 999;
background-color: transparent;
color: #000;
}
.t-top .arrow:before {
font-family: 'squarespace-ui-font';
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\e02d";
text-align: center;
display: block;
vertical-align: middle;
transform: rotate(-90deg);
cursor: pointer;
margin-left: -4px;
}
.t-top .arrow {display:inline;
}

Every time i change the position to static, the height of the footer increases. Could you help make the back to top button center aligned and not affect the height of the footer? Thanks!

Hi @bangank36, could you help me centre-align the 'Back to Top' arrow in a way that the footer height does not increase beyond the default? Thank you

May 31, 2021

On 5/30/2021 at 5:30 PM, bangank36 said:

I think it would require code injection

Alright, thank you for letting me know! :)

May 30, 2021

On 5/29/2021 at 2:44 AM, sastavangogh said:

Site URL: https://www.aditya-sinha.com/

Hi, I am looking to make the text on a blog page sticky, in order for it to stay on top of the page and serve as a sub-navigation for the blog posts below. I'm trying to achieve a similar Work page as is here: http://www.lauramccluskey.com/, with the categories/tags at the bottom of the page. Is there any method through Custom CSS and not Code Injection to possible achieve this?

Password: tester

@bangank36 Hi! Any chance you could help out with this please? Would it be possible to do so via CSS and code (not code injection)?

May 30, 2021

Site URL: https://www.aditya-sinha.com/

Hi @tuanphan, I followed your link (https://beaverhero.com/back-to-top-squarespace/) to create a back to top arrow on my page. However, it does not seem to centre align properly. I've added <center></center> to the code as well and here is the customized CSS I put into the Design tab:
/* Back to Top */
.t-top {
font-weight: 300;
letter-spacing: 3px;
font-size: 14px;
text-transform: none;
text-align: center;
line-height: 1.6;
padding-left: 4px;
padding-top: 4px;
position: fixed;
bottom: -10px;
width: 100px;
height: 40px;
z-index: 999;
background-color: transparent;
color: #000;
}
.t-top .arrow:before {
font-family: 'squarespace-ui-font';
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\e02d";
text-align: center;
display: block;
vertical-align: middle;
transform: rotate(-90deg);
cursor: pointer;
margin-left: -4px;
}
.t-top .arrow {display:inline;
}

Every time i change the position to static, the height of the footer increases. Could you help make the back to top button center aligned and not affect the height of the footer? Thanks!

May 29, 2021

15 hours ago, tuanphan said:

You mean make underline effect run from left to right?

yes!

May 28, 2021

Site URL: https://www.aditya-sinha.com/

Hi, I am looking to make the text on a blog page sticky, in order for it to stay on top of the page and serve as a sub-navigation for the blog posts below. I'm trying to achieve a similar Work page as is here: http://www.lauramccluskey.com/, with the categories/tags at the bottom of the page. Is there any method through Custom CSS and not Code Injection to possible achieve this?

Password: tester

May 28, 2021

4 hours ago, tuanphan said:

use this


/* nav underline */
.header-nav-item a {
	transition: all 0.3s;
}
body.homepage .header-nav-item a:hover {
    border-bottom: 1px solid white;
	transition: all 0.3s;
}
body:not(.homepage) .header-nav-item a:hover {
    border-bottom: 1px solid black !important;
	transition: all 0.3s;
}

Thanks! However, I meant a transition delay in terms of animation of the bottom border (left to right). Sorry it if wasn't clearer in the previous response! Any way to do that?

May 26, 2021

11 hours ago, tuanphan said:

@sastavangogh Add this new code



/* nav underline */
body.homepage .header-nav-item a:hover {
    border-bottom: 1px solid white;
}
body:not(.homepage) .header-nav-item a:hover {
    border-bottom: 1px solid black !important;
}

Thans once again, @tuanphan! This has solved my issue 🙂 I was wondering how to edit this code to include a transition delay in the hover as well. Would that be possible?

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by sastavangogh

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources