# FAQ
**URL:** https://community.elfsight.com/c/css-codes/faq/171.md
[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)
---
## [Change color category titles](https://community.elfsight.com/t/change-color-category-titles/25050)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 2\
**Last updated:** [May 6, 2026, 10:36am UTC](https://community.elfsight.com/t/change-color-category-titles/25050 "2026-05-06T10:36:13Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-title-text{ color: rgba(14, 193, 47, 0.89); }
---
## [Change background color of section with questions and answers](https://community.elfsight.com/t/change-background-color-of-section-with-questions-and-answers/140212)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 1, 2025, 5:18pm UTC](https://community.elfsight.com/t/change-background-color-of-section-with-questions-and-answers/140212 "2025-10-01T17:18:56Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item-answer { background-color: #9da088!important; } .eapps-faq-content-category-item-question { bac…
---
## [Change color and opacity of category icons](https://community.elfsight.com/t/change-color-and-opacity-of-category-icons/140211)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 1, 2025, 5:15pm UTC](https://community.elfsight.com/t/change-color-and-opacity-of-category-icons/140211 "2025-10-01T17:15:42Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-title-icon { fill:red!important; /\* opacity:1!important; \*/ }
---
## [Align category titles to center](https://community.elfsight.com/t/align-category-titles-to-center/140208)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 1, 2025, 5:04pm UTC](https://community.elfsight.com/t/align-category-titles-to-center/140208 "2025-10-01T17:04:59Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-title { justify-content: center; }
---
## [Change border width and color for categories](https://community.elfsight.com/t/change-border-width-and-color-for-categories/25042)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 11:16am UTC](https://community.elfsight.com/t/change-border-width-and-color-for-categories/25042 "2023-11-09T11:16:50Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-items { border: 1px solid red; }
---
## [Change color of search border](https://community.elfsight.com/t/change-color-of-search-border/90302)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 7:01pm UTC](https://community.elfsight.com/t/change-color-of-search-border/90302 "2024-12-18T19:01:47Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .global-styles, #eapps-faq-1 .eapps-faq-search-bar-input { border-color: gray; }
---
## [Replace "No search results found" when used Search Bar](https://community.elfsight.com/t/replace-no-search-results-found-when-used-search-bar/123628)
**Author:** [@Sina](https://community.elfsight.com/u/Sina)\
**Replies:** 0\
**Last updated:** [May 30, 2025, 6:27pm UTC](https://community.elfsight.com/t/replace-no-search-results-found-when-used-search-bar/123628 "2025-05-30T18:27:00Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: \[class\*="eapps-faq-search-bar-no-results"\] { font-size: 0 !important; } \[class\*="eapps-faq-search-bar-no-results"\]:after { c…
---
## [Change color of "Search" text in the Search Bar placeholder](https://community.elfsight.com/t/change-color-of-search-text-in-the-search-bar-placeholder/90304)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 7:03pm UTC](https://community.elfsight.com/t/change-color-of-search-text-in-the-search-bar-placeholder/90304 "2024-12-18T19:03:44Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-search-bar-container input::placeholder { color: red; }
---
## [Change border radius of the Search Bar](https://community.elfsight.com/t/change-border-radius-of-the-search-bar/90303)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 7:02pm UTC](https://community.elfsight.com/t/change-border-radius-of-the-search-bar/90303 "2024-12-18T19:02:41Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .global-styles, .eapps-faq-layout-accordion .eapps-faq-search-bar-input { border-radius: 40px; }
---
## [Change widget's height](https://community.elfsight.com/t/change-widgets-height/90301)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 7:00pm UTC](https://community.elfsight.com/t/change-widgets-height/90301 "2024-12-18T19:00:12Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-inner { max-height: 350px; overflow-y: auto; }
---
## [Custom icon next to questions instead of Plus/Arrow](https://community.elfsight.com/t/custom-icon-next-to-questions-instead-of-plus-arrow/90300)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 6:59pm UTC](https://community.elfsight.com/t/custom-icon-next-to-questions-instead-of-plus-arrow/90300 "2024-12-18T18:59:09Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item-question-icon:after { display: none; } .eapps-faq-content-category-item-question-icon:before { …
---
## [Remove yellow highlighting of the found content when searching](https://community.elfsight.com/t/remove-yellow-highlighting-of-the-found-content-when-searching/90299)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [December 18, 2024, 6:55pm UTC](https://community.elfsight.com/t/remove-yellow-highlighting-of-the-found-content-when-searching/90299 "2024-12-18T18:55:58Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item-found-text { background: inherit!important; }
---
## [Add shadow to all items](https://community.elfsight.com/t/add-shadow-to-all-items/24964)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:50pm UTC](https://community.elfsight.com/t/add-shadow-to-all-items/24964 "2023-11-08T18:50:32Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item { box-shadow: 0 10px 20px rgb(0 79 120 / 8%); }
---
## [Change the color of the separator between questions and arrows](https://community.elfsight.com/t/change-the-color-of-the-separator-between-questions-and-arrows/58626)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 25, 2024, 2:12pm UTC](https://community.elfsight.com/t/change-the-color-of-the-separator-between-questions-and-arrows/58626 "2024-06-25T14:12:47Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item:before { background-color: red !important; opacity: 1; } .eapps-faq-content-category-item:a…
---
## [Change the color of Accordion Icon (Arrow or Plus)](https://community.elfsight.com/t/change-the-color-of-accordion-icon-arrow-or-plus/24948)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 5:55pm UTC](https://community.elfsight.com/t/change-the-color-of-accordion-icon-arrow-or-plus/24948 "2023-11-08T17:55:38Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item-question-icon:before { background-color: red!important; } .eapps-faq-content-category-item-q…
---
## [Add frame for videos](https://community.elfsight.com/t/add-frame-for-videos/58627)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 25, 2024, 2:14pm UTC](https://community.elfsight.com/t/add-frame-for-videos/58627 "2024-06-25T14:14:22Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-container .eapps-faq-content-category-item-answer-video-wrapper { border: 1px solid #fff; } Guys, if this code was…
---
## [Remove icons of the category titles](https://community.elfsight.com/t/remove-icons-of-the-category-titles/58625)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 25, 2024, 2:10pm UTC](https://community.elfsight.com/t/remove-icons-of-the-category-titles/58625 "2024-06-25T14:10:10Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-title-icon { display: none } Guys, if this code was helpful to you, please let us know in the com…
---
## [Change color of the links](https://community.elfsight.com/t/change-color-of-the-links/58624)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 25, 2024, 2:05pm UTC](https://community.elfsight.com/t/change-color-of-the-links/58624 "2024-06-25T14:05:34Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item-answer-text a { color: rgb(17, 17, 17); } Guys, if this code was helpful to you, let us know…
---
## [Add custom icon to all questions](https://community.elfsight.com/t/add-custom-icon-to-all-questions/58622)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 25, 2024, 2:03pm UTC](https://community.elfsight.com/t/add-custom-icon-to-all-questions/58622 "2024-06-25T14:03:27Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item-question-text:before { content: ''; background-image: url("https://www.svgrepo.com/show/86025/d…
---
## [Add custom icon to a specific question](https://community.elfsight.com/t/add-custom-icon-to-a-specific-question/58619)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [June 25, 2024, 1:50pm UTC](https://community.elfsight.com/t/add-custom-icon-to-a-specific-question/58619 "2024-06-25T13:50:52Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item:nth-child(1) .eapps-faq-content-category-item-question-text:before { content: ''; background-im…
---
## [Change font of all elements](https://community.elfsight.com/t/change-font-of-all-elements/24950)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:00pm UTC](https://community.elfsight.com/t/change-font-of-all-elements/24950 "2023-11-08T18:00:02Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq { font-family: Roboto !important; } You’re welcome to set any other font, providing it is supported by your browse…
---
## [Change font size of all elements](https://community.elfsight.com/t/change-font-size-of-all-elements/24952)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:04pm UTC](https://community.elfsight.com/t/change-font-size-of-all-elements/24952 "2023-11-08T18:04:22Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: /\* FAQ title font and size \*/ .eui-widget-title{ font-size: 24px !important; } /\* FAQ category title font and size \*/ .eapp…
---
## [Enable RTL Mode](https://community.elfsight.com/t/enable-rtl-mode/24954)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:19pm UTC](https://community.elfsight.com/t/enable-rtl-mode/24954 "2023-11-08T18:19:31Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-container{ direction: rtl; }
---
## [Change background color of active section](https://community.elfsight.com/t/change-background-color-of-active-section/24956)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:30pm UTC](https://community.elfsight.com/t/change-background-color-of-active-section/24956 "2023-11-08T18:30:16Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item-active .eapps-faq-content-category-item-question{ background: green; }.eapps-faq-content-ca…
---
## [Change widget width](https://community.elfsight.com/t/change-widget-width/24961)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:42pm UTC](https://community.elfsight.com/t/change-widget-width/24961 "2023-11-08T18:42:14Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-container { max-width: 800px; margin: 0 auto; }
---
## [Change background color of the widget container](https://community.elfsight.com/t/change-background-color-of-the-widget-container/24962)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:46pm UTC](https://community.elfsight.com/t/change-background-color-of-the-widget-container/24962 "2023-11-08T18:46:10Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-container { background-color: #FBCEB1; }
---
## [Change the spacing between items](https://community.elfsight.com/t/change-the-spacing-between-items/24953)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:17pm UTC](https://community.elfsight.com/t/change-the-spacing-between-items/24953 "2023-11-08T18:17:53Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eui-widget-title{margin-bottom: 32px;} .eapps-faq-content-category-title{margin-top: 32px; margin-bottom: 16px;} .eapps-faq-con…
---
## [Change border radius of the items](https://community.elfsight.com/t/change-border-radius-of-the-items/24965)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:53pm UTC](https://community.elfsight.com/t/change-border-radius-of-the-items/24965 "2023-11-08T18:53:13Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-category-item { border-radius: 4px; }
---
## [Align text to the center](https://community.elfsight.com/t/align-text-to-the-center/24966)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:55pm UTC](https://community.elfsight.com/t/align-text-to-the-center/24966 "2023-11-08T18:55:46Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings: .eapps-faq-content-items { text-align : center!important; }
---
## [Detailed font customization for all elements](https://community.elfsight.com/t/detailed-font-customization-for-all-elements/24967)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 8, 2023, 6:58pm UTC](https://community.elfsight.com/t/detailed-font-customization-for-all-elements/24967 "2023-11-08T18:58:11Z")
Add this code to the Custom CSS field on the Appearance tab of your FAQ widget’s settings .global-styles, .eapps-faq-container \* { font-family: "Lora"; font-size: 20px; line-height: normal; font-weight: …
[Next page](https://community.elfsight.com/c/css-codes/faq/171.md?page=1)