Jump to content

Using image for button in Image block

Recommended Posts

Hello, 

I am wondering how to get my button block to be transparent here. I can see my image underneath but can not get the button to be transparent. It worked for my medium buttons and large buttons, but this one is in am image block. Please help. 

 

Screen Shot 2020-10-12 at 9.04.25 AM.png

Screen Shot 2020-10-12 at 9.04.34 AM.png

Screen Shot 2020-10-12 at 9.04.57 AM.png

Screen Shot 2020-10-12 at 9.09.47 AM.png

Link to comment
  • Replies 12
  • Views 2.9k
  • Created
  • Last Reply

First remove or comment out the following CSS. Make a copy for safe keeping if removing

.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.

.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 10/13/2020 at 8:30 PM, creedon said:

First remove or comment out the following CSS. Make a copy for safe keeping if removing


.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.


.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Hello Thomas, 

It still does not have a transparent background. It is hidden behind the color. 

 

Screen Shot 2020-10-15 at 3.20.29 PM.png

Link to comment
2 hours ago, Karen8392 said:

It still does not have a transparent background. It is hidden behind the color. 

Did you add the code to Design > Custom CSS?

Here what my code looks like here.

1337823491_ScreenShot2020-10-15at4_51_43PM.thumb.png.018e5944bdfe394b74b4b8952ed48c98.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Well I'm a bit stumped at this point. I do see a problem on line 39 on your pic. "https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png" is repeated twice. I think that issue would only prevent the pic from showing up.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 weeks later...
On 10/13/2020 at 8:30 PM, creedon said:

First remove or comment out the following CSS. Make a copy for safe keeping if removing


.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.


.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Hey Thomas! With your code and a little playing around I got it to work. Also needed to change background color in the section themes to get the background to go away! Thanks for all your help! Here is the code that worked: 

 

//Button in Image Block 
.image-button-inner {text-align: left
 !important;
padding-left: 19px;}

.image-button .image-button-inner {background-image: url( "https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f9cf356ff6048551e2f02da/1604121430733/Logos+FINAL+v3-53.png");
  background-size: 20px;
  background-repeat: no-repeat;}

.image-button.sqs-dynamic-text {font-family: Modernline;}

Screen Shot 2020-10-31 at 8.20.53 PM.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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