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

Recommended Posts

Site URL: https://www.therumkitchen.com/home-2-1

Hello there, 

I'm trying to edit button styles and I stuck - it seems like css code doesn't respond to color changes. I'm trying to edit text on yellow button from white to black. Here's the code:

 

  /**Button Small**/

.small-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small:hover {
    background-color: #fff;
    color: #fff;
}
.small-button-shape-pill .sqs-block-button .sqs-block-button-element--small, .medium-button-shape-pill .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-pill .sqs-block-button .sqs-block-button-element--large{
    border-radius: 0px;	
 	border-style:none;
    font-family: Signpainter;
}

.small-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small {
  background-colour: none !important;
}
.small-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--small:hover {
    background-color: transparent;
}
.small-button-style-outline .sqs-block-button .sqs-block-button-element--small{
	border-radius: 0px;	
 	border-style:none !important;
  	background-color: #000;
  	color: #000000;
    margin: 0 auto;
    margin-top: 15px;
    width: 200px;
    font-family: Signpainter;
    font-size: 18px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 15px;
    background: url(https://static1.squarespace.com/static/5d4bea07a49c3800010ddaf6/t/5d72757494c66e0001f1fc67/1567782260166/button-yellow.png);
        background-repeat: repeat;
        background-size: auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: none;
    border-style: none;
}
.small-button-style-outline .sqs-block-button .sqs-block-button-element--small:hover{
    display: block;
    margin: 0 auto;
    margin-top: 0px;
    margin-top: 15px;
    font-family: Signpainter;
    font-size: 18px;
    colour: #fff;
    height: 18px;
    width: 200px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 15px;
    background: url(https://static1.squarespace.com/static/5d4bea07a49c3800010ddaf6/t/5d7250a85d2fb30001f1ad37/1567772840707/button-black.png);
        background-repeat: repeat;
        background-size: auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: none !important;
  	border-style: none !important;
    text-align: center;
}

Will appreciate your help. 

Many thanks

Michal

Share this post


Link to post

Add to Home > Design > Custom CSS. Repeat for other buttons, replace with button block id

div#block-yui_3_17_2_1_1591015635370_11743 a {
    color: black;
}

Find Block ID with https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Hi @tuanphan

Thanks for your response. It worked! However, I wonder if it's possible to for the font colour to change while you hover? 

Many thanks

Michal

Share this post


Link to post
37 minutes ago, inks said:

Hi @tuanphan

Thanks for your response. It worked! However, I wonder if it's possible to for the font colour to change while you hover? 

Many thanks

Michal

div#block-yui_3_17_2_1_1591015635370_11743 a {
    color: black;
}
div#block-yui_3_17_2_1_1591015635370_11743 a:hover {
    color: white;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

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


×
×
  • Create New...