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

• 8 buttons, 1 page, 8 different button colors

Question

Site URL: https://jackshugruedesign.com

Hi everyone- I'm hoping someone can help me with my website. 

I am using the SUHAMA template, and on my Home page I have 8 individual buttons that link to their own particular work page. I want to customize the button colors to match the most prominent color of the work it corresponds with. For instance, I want the "Hoops" button on the Home page to be the same orange as the basketball thumbnail that pops up when you hover with your cursor over "Hoops" from the Work page. 

 

So, I want all buttons to have their own color! I can provide HEX color codes or any other pertinent information to make this work!

Thanks everyone!

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0
Posted (edited)
#block-yui_3_17_2_1_1591046471157_19938 .sqs-block-button-element {
    background-color: green;
}

#block-yui_3_17_2_1_1591052092299_24639 .sqs-block-button-element {
    background-color: red;
}

#block-yui_3_17_2_1_1591052494308_19109 .sqs-block-button-element {
    background-color: blue;
}

#block-yui_3_17_2_1_1591052092299_27864 .sqs-block-button-element {
    background-color: yellow;
}

#block-yui_3_17_2_1_1591052092299_31447 .sqs-block-button-element {
    background-color: pink;
}

#block-yui_3_17_2_1_1591575769482_11090 .sqs-block-button-element {
    background-color: purple;
}

#block-yui_3_17_2_1_1591052494308_16927 .sqs-block-button-element {
    background-color: orange;
}

#block-yui_3_17_2_1_1591081825106_10092 .sqs-block-button-element {
    background-color: gray;
}

That's in order down the page, change the color to the hex code you want. IE change gray; to #cccccc;

Dont forget the semicolon. If you want to change the font color, add a new line that says

color: black;

right under the blackground color line.

Edited by rwp

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Hey I'm having a similar issue with changing a button color. On the hover its just black and can't see the text I've tried for hours and nothing. 

my site is https://www.tribeandsol.com I have custom coding for a megamenu (not sure if that's the problem) I want it to look like the other button on my sites homepage except black and when you hover its solid black with white text on help us bloom. Thanks

Screen Shot 2020-07-08 at 4.58.44 PM.png

Screen Shot 2020-07-08 at 4.58.57 PM.png

Share this post


Link to post
  • 0
.no-touch .primary-button-style-outline .white .sqs-block-button-element--small:hover {
    background-color: red !important;
}

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
2 hours ago, rwp said:

.no-touch .primary-button-style-outline .white .sqs-block-button-element--small:hover {
    background-color: red !important;
}

 

It worked, thank you so very much!

Share this post


Link to post
  • 0

Change red to whatever you need, of course. I just use red because it stands out and is easy to type while testing.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

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...