Need CSS help for FAQ app

Ask the Community Customization
1

For the FAQ app:

  • I need to change the font family and size for the Questions, Answers and Title.
  • I need to change the color of the question and answer sections.

If any code exists, please let me know.

Thanks!

1 Like
2

I need the CSS code for the FAQ app as well…
-Font Family - Size

Thanks

3

І think you can inspect code (F12 button) in your browser and choose styles for yourself. I did that in my FAQ app https://opencartbot.com/en/xml-sitemap

1 Like
5

Hello @user544 and @DOMINICANCOD. Welcome to the best Community in the world :earth_asia: :metal:!

I am happy to provide you with a detailed CSS code that allows to change font size, family and color:

/* FAQ title font family, size and color */
.es-widget-title {
font-family: ‘Lora’, serif;
color: #009EE0;
font-size: 30px;
}

/* FAQ questions font family, size and color */
.eapps-faq-content-category-item-question-text {
font-family: ‘Lora’, serif;
color: #000;
font-size: 16px;
}

/* FAQ answers font family, size and color */
.eapps-faq-content-category-item-answer-text {
font-family: ‘Lora’, serif;
color: #000;
font-size: 16px;
}

Please add this code to the Custom CSS section on the Appearance tab in your widget’s settings and let me know if it helped.

@user544 I see that our support agent Natalia has already contacted you and our devs are in the process of creating a special CSS code for you. They’ll keep you updated :ok_hand:.

2 Likes
6

@Marksim Awesome, thanks for that info. I appreciate it

2 Likes
8

Hi there,

Are you able to assist me please by telling me what code I should put in to change the font on the FAQ widget?

Thankyou,
Lauren

1 Like
9

@user702, Hi Lauren, really happy to meet you in our community! :hugs:

I’ve moved your question to this topic, perhaps the answers in this thread will work for you, so feel free to check them out.

Please let me know if it helped or if you have other questions :slight_smile:

10

Hi Helga,

Thankyou for your assistance - much appreciated.

However, the code above is still not working for me. I am trying to change the font to ‘Roboto’ and when I replace ‘Lora’ with ‘Roboto’, it just turns everything to times new roman. Do you have any insight into what I might be doing wrong?

11

Hi @user702, thank you for your kind message!

Could you please send me the link to the widget in question? I’ll be happy to check what’s going wrong and provide a solution :slight_smile:

12

Hi Helga,

Thankyou for being so helpful.

This is the widget:
Elfsight Apps

Please let me know if you need any additional info

13

Sure thing! :slight_smile:

But unfortunately, I cannot get to your account via the link you provided as I don’t have your log in details.

But if you could send me your widget installation code, I’ll be able to find the widget itself right away :slight_smile: Don’t worry, I will hide the code after that so no one will have access to it.

14

I think this is the installation code you need:

15

@user702 thanks! We’ve added the following CSS code, could you please check and let me know if it worked for you?

.eapps-faq-header, .eapps-faq-content{
font-family: Roboto;
}
16

Hi Helga,

It’s added in Roboto however its in bold. What should I add beside it to make it not bold?

And if I wanted to change the heading to roboto-mono, can I just add that in place of Roboto?

17

Hi @user702!

We’ve altered the code so now it looks like this:

.eapps-faq-header{
  font-family: Roboto;
}

.eapps-faq-content {
  font-family: Roboto;
}

.eapps-faq-content-category-item-question-text {
  font-weight: normal;
}

You’re welcome to change the font for header and content separately, and you can always change ‘normal’ to ‘bold’ if needed.

Please let me know if it helped :slight_smile:

18

This is working now thankyou! :slight_smile:

I’m so sorry to be a pain (coding is not something I understand how to alter myself), but is it possible to make the header normal also (not bold) as well as change this to ‘Roboto-mono’?

Also, how do I change the size of the font?

19

@user702 no worries at all! :slight_smile:

We’ve corrected the CSS code and now it looks like this:

.eapps-faq-header{
  font-family: Roboto;
}

.es-widget-title {
  font-weight: normal;
  font-size: 30px;
}

.eapps-faq-content {
  font-family: Roboto;
}

.eapps-faq-content-category-item-question-text {
  font-size: 22px;
}

.eapps-faq-content-category-item-answer-text {
  font-size: 18px;
}

.eapps-faq-content-category-item-question-text {
  font-weight: normal;
}

Could you please check out the result, please? :slight_smile:

20

A post was split to a new topic: Hide the question in faq?

21

Hello - I am wanting to use the Raleway font for the questions (18px bold) and answers (16px normal) but inserting the data into your code above isn’t working. Is there something else I need to do to load up the Raleway font?

1 Like
22

Hi @Jason5, nice to see you on our forum, welcome! :hugs:

Did you try to add the following CSS code to your widget Custom CSS section?

.eapps-faq-content {
  font-family: Raleway;
}

If it didn’t work, could you please send me the link to the page with the widget in question? I’ll be happy to check things for you!