FAQs custom code

Ask the Community Customization
1

Hello I wanted to change the style of the FAQ page on my website FAQs — mentorship studio
This is as I want it to blend better to the format/style of my website.
Please could the below made possible?:
-Unbold all the text (I do not want the text bold)
-have the text all grey even when the question is clicked on to see the answer response.
-have grey text background on the answers disappear or turn white.
-any other way to make it blend more naturally with my website.

I think my YouTube Videos tab is a good guide for how I want the widget to look as I have the youtube gallery widget on that page! So if you can get it all to match and look seamless that would be amazing!

Many thanks!

1 Like
3

Hi @Sorochi :wave:

Sure thing, we’ll be happy to help with your requests!

  • “have the text all grey even when the question is clicked on to see the answer response” - I’ve checked your widget and see that you’ve already chosen grey text color:

image
image1652×769 94.3 KB

If I misunderstood you, could you please elaborate on it?

  • have grey text background on the answers disappear or turn white - At the moment, I can see the grey background only for some answers. For example:

image
image1899×840 65.5 KB

If you want to remove this background, you just need to add the text without this background:

image
image543×679 47.7 KB
.

Please check it and let me know if it helped :slightly_smiling_face:

As for the making font non-bold, I’ve forwarded your request to our devs. We’ll get back to you a bit later!

6

Hi @Sorochi,

To make font in your widget non-bold, you can use the following code in your Custom CSS:

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

Let me know if you need any other customizations!

2 Likes
7

Great thanks!

Is there a way to make the search box identical to the one in my youtube gallery widget? YouTube Videos — mentorship studio

Also is there a way for the question to be bold when it is hovered over and then for it to be unlined (and not bold) when clicked on? Similar to what happens on the Youtube widget page where you hover over the playlist topics/click on the playlist topics?

Many thanks

8

great thanks!

10

To customize your search box, please try this code. I tried to make it as close as possible to the Youtube Gallery one but if there are any other aspects of it you’d like to customize, let me know please.

.eapps-faq-search-bar-input {
  border-radius: 12px;
  padding: 6px 11px;
  font-size: 13px;
  line-height: 1;
  color: #aaa;
  border: 1px solid rgba(175,175,175,.3);
  height: 32px;
}
.eapps-faq-search-bar-container {
  height: unset;
}

And you can try this for the question text:

.eapps-faq-content-category-item-question:hover .eapps-faq-content-category-item-question-text {
  font-weight: bold;
}
1 Like
11

Amazing thanks! Is there a way to move the search magnifying glass icon to the other side of the search box like in the Youtube videos widget?

Also, can there be a bold hover effect on the search bar like there is in the Youtube widget?

Also could the question be underlined when it is clicked on? Like it is on the widget playlist bar?

12

Here you go, I adjusted the code above to add these customizations, so you can just replace the previous one in Custom CSS. I also made the magnifying glass icon red on hover, like in the Youtube Gallery.

.eapps-faq-search-bar-input {
  border-radius: 12px;
  padding: 6px 11px;
  font-size: 13px;
  line-height: 1;
  color: #aaa;
  border: 1px solid rgba(175,175,175,.3);
  height: 32px;
  padding-left: 30px;
}
.eapps-faq-search-bar-container {
  height: unset;
}
.eapps-faq-search-bar-input:hover::placeholder {
  color: rgb(175, 175, 175);
  opacity: 1;
}
.eapps-faq-search-bar-input:hover {
  border: 1px solid rgba(175, 175, 175, 1);
}
.eapps-faq-content-category-item-question-text {
  font-weight: normal;
}
.eapps-faq-content-category-item-question:hover .eapps-faq-content-category-item-question-text {
  font-weight: bold;
}
.eapps-faq-content-category-item-active .eapps-faq-content-category-item-question-text {
  font-weight: normal !important;
  text-decoration: underline;
}
.eapps-faq-search-bar-icon {
  left: 0;
  padding: 10px;
  width: 32px;
}
.eapps-faq-search-bar-icon svg {
  height: 12px;
  width: 12px;
}
.eapps-faq-search-bar-icon:hover svg {
  fill: red;
}
13

amazing! is it possible to match the brightness of the search icon (magnifying glass) to match that on the youtube gallery widget? I noticed it is a lot more faint and less noticeable. Conversely could we remove the red hover effect on the youtube gallery so neither the FAQ nor the YouTube gallery have the red hover effect and they are more similar (or identical if possible!!!) to the search bar on the studio blog page? Studio Blog — mentorship studio

My ultimate objective is consistency!

Additionally, is it possible to reduce the opacity of the time stamps on the youtube videos that shows how long the video is. I want it to be semi see-through, kind of how it is like on YouTube.

Many thanks!

14

I’m not able to make the search icon in the FAQ widget look more similar to the one in the Youtube Gallery, but you can remove the red hover effect on both with the code below. This code will reduce the opacity of the time stamps as well.

.yottie-widget-feed-section-search-form-button:hover .yottie-widget-feed-section-search-form-button-icon {
  fill: rgba(175, 175, 175, .3);
}
.yottie-widget-video-preview-marker-duration {
  background: rgba(127, 127, 127, 0.7);
}
1 Like
16

thank you!

1 Like