How to add grey back ground color of my FAQ's table?

[Jim3]

I want to add background color behind all the questions as this one on the screenshot and if possible the arrow to become in black circle when we are on the specific question..

My website link: Cignella Crane™ Shoes – Melanth
The liquid of my present table is called: faq-accordation.liquid

[Laza_Binaery]

Hi @Jim3

Same process, try to add to that Faq section CustomCSS block following code:

.faq-title {
    text-transform: uppercase;
}

.faq-list {
    background: #f3f3f3 !important;
    padding: 20px 30px;
    border-radius: 16px;
}

.faq-item {
    border: none !important;
    border-bottom: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.faq-item:last-of-type {
  border-bottom: none !important
}

.faq-icon {
    background: #fff;
    border-radius: 50%;
    padding: 4px;
}

.faq-question {
    font-weight: 700;
    border: none;
}

.faq-question:hover {
    background-color:#f3f3f3 !important;
}
 
.faq-question:hover .faq-icon {
    background: #000;
}

.faq-question:hover .faq-icon path {
    stroke: #fff;
}
  

I did make the title uppercase, but if you do not need that, remove the first CSS rule

[Jim3]

I added here and it does not work

[Laza_Binaery]

Wel if you want to add it to.liquid file you need to wrap it with style tag,so

<style>
.faq-title {
    text-transform: uppercase;
}

.faq-list {
    background: #f3f3f3 !important;
    padding: 20px 30px;
    border-radius: 16px;
}

.faq-item {
    border: none !important;
    border-bottom: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.faq-item:last-of-type {
  border-bottom: none !important
}

.faq-icon {
    background: #fff;
    border-radius: 50%;
    padding: 4px;
}

.faq-question {
    font-weight: 700;
    border: none;
}

.faq-question:hover {
    background-color:#f3f3f3 !important;
}
 
.faq-question:hover .faq-icon {
    background: #000;
}

.faq-question:hover .faq-icon path {
    stroke: #fff;
}
</style

[Jim3]

Wow man! I thank you so much because you actually made it!
There just a little bit left to keep the design sleek. I made two screenshots to explain. So their table is slightly wider and also the space in the box of the question and between the questions is less. Can we do that as well??

[Laza_Binaery]

Try to add this code before closing style tag, and I just now noticed it is missing >
So it should be

.faq-section {
    max-width: 1000px !important;
}

.faq-question {
    padding: 13px 20px;
}

</style>

And adjust to your liking, that 1000 max width, or padding top/bottom , I set 13px.

[Jim3]

It is amazing! Thank you so much!
I just noticed something showed up here and idk from where it came? Can we remove it?

[Laza_Binaery]

That should be after </style> tag and probably some leftover so you can delete it.

[Jim3]

Btw the font of this table is different from the font used in my body text which is Sans-serif. Can we please change the fonts in the faqs section to sans-serif as well?

[Jim3]

Btw the font of this table is different from the font used in my body text which is Sans-serif. Can we please change the fonts in the faqs section to sans-serif as well?

[Jim3]

Do you know how can we understand the fonts which this website is using for this faqs questions? Because they are very nice. I want to try them

High Waist Denim Balloon Jeans

[Laza_Binaery]

They are using Instrument Sans

Instrument Sans - Google Fonts

Note, just you do not want too many fonts in different sections. One for all is good, one for headings and one for other text is also mostly used. Third font in some specific cases.

[Jim3]

You are absolutely right. I want to use only 2 Fonts. One for headings/navigation and one for Body texts. So do you know in my case when I am using Shopify Impulse theme, can I use this same Instrument Sans font of Google Fonts ? If yes, How can I?

[Laza_Binaery]

Yeah you can, just choose in your theme settings > typography > headings and body font.