Dawn Theme - Change color of text in Discord Gate Block

[HALFL1FE]

I recently added the Discord Gate app to my Shopify store and loaded it onto my product page in a block. There were options to change some of the text colors in the block, but not all. I'm trying to change the text on the product page:

"ATTENTION ROAD RATS!" to be the color #00FF42

"Become a Citizen to unlock discounts!" to be the color #00A13C

"OR" to be the color #00A13C

and the separating lines next to "OR" to be the color "#00FF42

And I would also like the button "Login to Discord" to have a green outline similar to the way the "Add To Cart" button looks.

Thanks in advance for any help!

 

Store: www.halfl1feband.com
Product Page: https://halfl1feband.com/products/all-hail-the-atom-holographic-stickers 

[Moeed · Accepted solution]

Hey @HALFL1FE 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
div#lg-sbc-title-container h2 {
    color: #00FF42 !important;
}
div#lg-sbc-subtitle-container span {
    color: #00A13C !important;
}
span.sbc-m-0.sbc-font-body-sm.sbc-text-body-sm.sbc-leading-body-sm.sbc-text-primary {
    color: #00A13C !important;
}
span.sbc-h-px.sbc-flex-1.sbc-bg-divider {
    background: #00FF42 !important;
}
button.discord-login-button {
    border: solid 1px #00FF42 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[HALFL1FE]

This worked perfectly. Thank you!

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Made4uo-Ribe]

Hi @HALFL1FE 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
h2.sbc-m-0.sbc-font-heading-md.sbc-text-heading-md.sbc-leading-heading-md.sbc-text-primary {
    color: #00FF42;
}
 div#lg-sbc-subtitle-container span, span.sbc-m-0.sbc-font-body-sm.sbc-text-body-sm.sbc-leading-body-sm.sbc-text-primary {
     color: #00A13C;
 }
span.sbc-h-px.sbc-flex-1.sbc-bg-divider {
    background: #00FF42;
}

.sbc-w-full .wallet-buttons-container {
    box-shadow: 0 0 5px 2px rgba(0, 255, 66, 0.55), 0 0 10px rgba(0, 0, 0, 1);
    transition: box-shadow 1s ease;
}

</style>

And Save. 

result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Emilymilley34]

Hi there,

I can help you with the text color changes and the button styling on your product page.

To change the text colors for:

• "ATTENTION ROAD RATS!" to #00FF42
• "Become a Citizen to unlock discounts!" and "OR" to #00A13C
• The separating lines next to "OR" to #00FF42

You can usually do this with custom CSS. For the "Login to Discord" button, I can guide you on how to add a green outline similar to the "Add To Cart" button.

Please let me know if you have access to your theme’s CSS, and I can provide you with the specific code you need!

Best,