Jcshugrue Posted July 1, 2020 Share Posted July 1, 2020 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! Link to comment
rwp Posted July 1, 2020 Share Posted July 1, 2020 (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 July 1, 2020 by rwp jennypetit 1 Link to comment
MoonMama Posted July 8, 2020 Share Posted July 8, 2020 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 Link to comment
rwp Posted July 9, 2020 Share Posted July 9, 2020 .no-touch .primary-button-style-outline .white .sqs-block-button-element--small:hover { background-color: red !important; } Link to comment
MoonMama Posted July 9, 2020 Share Posted July 9, 2020 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! rwp 1 Link to comment
rwp Posted July 9, 2020 Share Posted July 9, 2020 Change red to whatever you need, of course. I just use red because it stands out and is easy to type while testing. MoonMama 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment