Jump to content

Asiya

Member
 View Profile  See their activity

  • Posts

    65

  • Joined

  • Last visited

 Content Type 

Posts posted by Asiya

    Clickable image in list content item

    in Customize with code

    Posted

    8 hours ago, Asiya said:

    Hi, how to add a text link to dscription?

    here is my website link:

    https://flower-toucan-p5d7.squarespace.com/

    I ahve my lists on first page with section titles as services. I added your code which removed the buttons. I am unable to understand how to add text links to descriptions. can you please help?

    Thank you

    image.thumb.png.7c34143b1b3dbd51f5931aadf21360e6.pngAfter I add a text link in descrition my text disappears. every thing is linked now but the text does not shows up.

    Clickable image in list content item

    in Customize with code

    Posted

    On 12/25/2021 at 7:50 AM, tuanphan said:

    This code will remove butotn & pass button link to image link.

    If you want image clickable + Keep button, you can add a text link in Description, then we will give the code to pass link from description to image.

    Hi, how to add a text link to dscription?

    here is my website link:

    https://flower-toucan-p5d7.squarespace.com/

    I ahve my lists on first page with section titles as services. I added your code which removed the buttons. I am unable to understand how to add text links to descriptions. can you please help?

    Thank you

    Social links for team members

    in Customize with code

    Posted

    On 3/26/2022 at 11:37 AM, tuanphan said:

    Don't remove any code in your current code. Add this to bottom of Code Block 

    <style>
  ul.t-social a[href*="opensea"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/03/16/06/18/bird-7071662__480.jpg);
}
</style>

    replace pixabay url with pink icon url

    thank you so much

    Social links for team members

    in Customize with code

    Posted

    10 hours ago, tuanphan said:

    Edit this code 

    .t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
}

    to this code 

    .t-social {
    display: flex;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
    justify-content: center;
    align-items: center;
}
ul.t-social a[href*="opensea"] {
    display: block;
    position: relative;
    top: 2px;
}

     

    Thank you once again. I am unable to add hiver effect to the opesea icon. can you help in it?

    Social links for team members

    in Customize with code

    Posted

    2 hours ago, tuanphan said:

    Hi. To use custom image icon, use this new code 

    <ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-spotify"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-apple"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-podcast"></i>
  </a>
</li>
  <li>
    <a href="https://opensea.com">
      <img src="https://cdn.pixabay.com/photo/2017/06/05/07/58/butterfly-2373175__340.png" width="30px"/>
    </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: 20px;
    padding-bottom: 40px;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: left;
  padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0px;
   
  }
  .t-social .fa {
    font-size: 37px;
    margin: 0 20px;
    color: #ffffff;
}
  .t-social .fa:hover {color:#CCCCCC;}
</style>

    I added this code into above code 

    <li>
    <a href="https://opensea.com">
      <img src="https://cdn.pixabay.com/photo/2017/06/05/07/58/butterfly-2373175__340.png" width="30px"/>
    </a>
  </li>

     

    Thank you so much for your response. the opensea icon is not aligned with the others on my site. can you check that.

    Social links for team members

    in Customize with code

    Posted

    On 12/9/2020 at 4:06 PM, tuanphan said:

    Add a Code Block > add this code. You can change link for your icons 

    <ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-spotify"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-apple"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-podcast"></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: 20px;
    padding-bottom: 40px;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: left;
  padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0px;
   
  }
  .t-social .fa {
    font-size: 37px;
    margin: 0 20px;
    color: #ffffff;
}
  .t-social .fa:hover {color:#CCCCCC;}
</style>

     

    Hi @tuanphan how should I connect an opensea account. It does not have a font awsome icon and I have an image for it so how can i add it along with my other social link accounts when adding for individual members.here is the url: 

    https://www.jellyc.io/

    Thank you

    Looking for help adding text below add to cart button

    in Setting up your store

    Posted

    On 9/19/2021 at 5:04 AM, tuanphan said:

    Add to Design > Custom CSS 

    /*
- Add text under add to cart button
- Run on Lab tag only
*/
.tag-lab .sqs-add-to-cart-button-wrapper:after {
    content: "Please specify your ring size upon adding item to cart.";
    font-size: 14px;
    margin-top: 5px !important;
    display: block;
}

     

    Hi, @tuanphan how can I link this text to some other link/page.  I am adding shipping policies here which needs to be linked to policies page.

    Thanks in advance

    Removing Auto Hyphen from mobile view

    in Customize with code

    Posted

    On 10/21/2019 at 9:09 PM, colin.irwin said:

    Try adding this to the custom css area, after any other code that may be there. Also remove your code.

      

    @media only screen and (max-width: 768px) {
	body {
		h1,h2,h3,p,li,a,em,i,strong {  
			-webkit-hyphens: none !important;
			hyphens: none !important;	
		}
		.page-desc p {
			-webkit-hyphens: none !important;
			hyphens: none !important;
		}
	}
}

     

    Hi, the hypenation code does not work for me. can you please help. heres my client's website e mail:

    https://www.thetutoress.com/

     

    IMG_4011.png

    IMG_4012.png

    IMG_4013.png

    Scroll Arrow Indicator

    in Customize with code

    Posted

    On 7/22/2020 at 5:45 PM, tuanphan said:

    Add to Code Block 

    <div class="scroll-down"></div>
<style>
  .scroll-down {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  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; }
}
</style>

     

    Hi @tuanphan , I used the above code but I am unable to scroll to the next section using this arrow. 

    here's the url:

    https://www.divyachunduru.me/

     

     

    Blank space on the right side of my website shows up on larger desktops?

    in Customize with code

    Posted

    On 11/6/2020 at 6:42 PM, tuanphan said:

    Add to Home > Design > Custom CSS 

    /* Nav one line */
.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

     

     

    On 12/8/2020 at 6:50 AM, bangank36 said:

    it was the max width set up, try this custom css 

    #canvasWrapper {
	max-wdith: initial;
}

    image.png.5a731e5d7d92afb277e945e5cfff0729.png

    Hi, on my client website I see some white spaces on right in my  tablet. can you help me fix that. here's the website link:

    https://dogfish-chinchilla-8h83.squarespace.com/

    password: sse2020

     

     

     

    1.PNG

    Adjusting the image size in an "Image Block: Card" (FlatIron)

    in Fonts, colors and images

    Posted

    On 11/25/2019 at 10:45 AM, tuanphan said:

    You can use CSS query max-width for only image

    If you share link to your site, i can take a look.

    Hi, @tuanphan I need help with my card image block 's image size. I want it to be aligned with the text.

    here's the url:

    https://www.gi-cognition.com/services

    I want the image and text to be aligned properly.

    Thanks in advance for your reply:)

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources