Streamline by Archtype - how do I change font colour on expandable boxes?

Solved
Highlighted
New Member
4 0 0

We recently switched over to a new theme - Streamline by Archtype. I am trying to figure out how to make my "expandable boxes" a different font or colour than the rest of the body. The expandable boxes are technically a page that I've taken the handle and input it as a tag in my products to make the expandable boxes show up. Here is the information on the expandable boxes. https://archetypethemes.co/blogs/streamline/how-do-i-add-custom-product-page-tabs

As you can see on that page, the header and body fonts are the same - I want the "description/sizing/shipping" to be a different font or colour. I would appreciate any help!! 

Thank you

image.png

0 Likes
Highlighted
Shopify Partner
3141 686 839

@Sweetness 

Please share your product page URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
4 0 0

Hi! 

 

It is on all of my product pages. Here is one as an example 

https://bysweetness.com/collections/macaron/products/autumn-macaron-collection

0 Likes
Highlighted
Shopify Partner
3141 686 839

@Sweetness 

Please add the following code at the bottom of your assets/theme.css file.

For background color:

.collapsible-content__inner.rte{
background-color: #dfdfdf;
}

 

For changing the font of the header:

.collapsibles-wrapper.collapsibles-wrapper--border-bottom button {
    font-family: 'Lato';
}

 You can change the font family above as per your need.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
4 0 0

@dmwwebartisan thank you so much, you have no idea how much this has helped!

If I wanted to change the colour of not the background of the collapsable content but rather the title "description" "macaron freshness & allergens" etc. What code would I input there? Is there a way to make the background colour of the headers a different colour too?

https://bysweetness.com/collections/branded-sweets/products/mini-macaron-tower-diy

0 Likes
Highlighted
Shopify Partner
3141 686 839

@Sweetness 

You mean you want to change:

collapsable content = > text color

Title "description" "macaron freshness & allergens"  => background and text color ?

 

Let me know if I am correct so I will provide code accordingly.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
4 0 0

@dmwwebartisan 

collapsable content = > text color

Title "description" "macaron freshness & allergens"  => background and text color ?

Yes! Thank you 

0 Likes
Highlighted
Shopify Partner
3141 686 839

This is an accepted solution.

@Sweetness 

Please add the following code at the bottom of your assets/theme.css file

.collapsible-content__inner.rte {
    color: red !important;
}

.collapsibles-wrapper.collapsibles-wrapper--border-bottom button{
    background-color: #f0d2cd !important;
    color: #000 !important;
    padding-left: 20px;
}

 

Above I have given red color to the text you can replace your color code from there. Hope this helps.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like