# Job Board

**URL:** https://community.elfsight.com/c/css-codes/job-board/172.md

[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)

---

## [Change popup width](https://community.elfsight.com/t/change-popup-width/141338)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 11, 2025, 5:23pm UTC](https://community.elfsight.com/t/change-popup-width/141338 "2025-11-11T17:23:41Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class\*="Popup\_\_PopupContent-sc"\] { width: 900px !important; } Shoutout to @Info\_at\_BEST for inspiring us to include this into the C…

---

## [Change color of the navigation arrow icon](https://community.elfsight.com/t/change-color-of-the-navigation-arrow-icon/139374)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [September 5, 2025, 6:14pm UTC](https://community.elfsight.com/t/change-color-of-the-navigation-arrow-icon/139374 "2025-09-05T18:14:04Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class\*="ArrowControl\_\_ArrowControlIcon"\] svg { fill: #FA0D7F }

---

## [Display certain number of lines in description](https://community.elfsight.com/t/display-certain-number-of-lines-in-description/25209)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 4\
**Last updated:** [February 5, 2025, 1:06pm UTC](https://community.elfsight.com/t/display-certain-number-of-lines-in-description/25209 "2025-02-05T13:06:24Z")

</div>

Add this code to the Custom CSS field on the Style tab of your Job Board widget’s settings: @external { :widget { --description-rows: 4; } } \[class^='Description\_\_Text-sc'\] { -webkit-line-clamp: var(--description-rows)…

---

## [Set custom font for all elements](https://community.elfsight.com/t/set-custom-font-for-all-elements/25052)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:02pm UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements/25052 "2023-11-09T12:02:09Z")

</div>

Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Job Board widget’s Appearance tab: .…

---

## [Change font color for a separate field (Company, Department, Location, Type of Contract)](https://community.elfsight.com/t/change-font-color-for-a-separate-field-company-department-location-type-of-contract/76487)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 8:41am UTC](https://community.elfsight.com/t/change-font-color-for-a-separate-field-company-department-location-type-of-contract/76487 "2024-10-18T08:41:34Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class\*="TitleBlock\_\_InfoItem-sc"\]:nth-child(1) { color: blue !important; } Replace the number in the 1st line of the code with the numbe…

---

## [Change job title color](https://community.elfsight.com/t/change-job-title-color/76485)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 8:24am UTC](https://community.elfsight.com/t/change-job-title-color/76485 "2024-10-18T08:24:53Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class\*="TitleBlock\_\_Title-sc"\] { color: green !important; }

---

## [Change text color in the Salary field](https://community.elfsight.com/t/change-text-color-in-the-salary-field/76484)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 8:23am UTC](https://community.elfsight.com/t/change-text-color-in-the-salary-field/76484 "2024-10-18T08:23:21Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class\*="TitleBlock\_\_Salary-sc"\] { color: yellow !important; }

---

## [Change description text color](https://community.elfsight.com/t/change-description-text-color/76482)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 8:21am UTC](https://community.elfsight.com/t/change-description-text-color/76482 "2024-10-18T08:21:37Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class\*="Description\_\_Text-sc"\] { color: gray !important; }

---

## [Change text in buttons](https://community.elfsight.com/t/change-text-in-buttons/62817)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 24, 2024, 6:11pm UTC](https://community.elfsight.com/t/change-text-in-buttons/62817 "2024-07-24T18:11:20Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class^="ButtonBase\_\_Overlay"\] span { display: none; } \[class^="ButtonBase\_\_Overlay"\]::after { content: 'Apply now New Text'; } \[class^=…

---

## [Hide Overview in popup](https://community.elfsight.com/t/hide-overview-in-popup/25053)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:07pm UTC](https://community.elfsight.com/t/hide-overview-in-popup/25053 "2023-11-09T12:07:26Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: .global-styles, \[class\*="Popup\_\_PopupContainer"\] \[class\*="Description\_\_Title"\] { display: none!important; }

---

## [Make job titles blurred](https://community.elfsight.com/t/make-job-titles-blurred/25056)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:10pm UTC](https://community.elfsight.com/t/make-job-titles-blurred/25056 "2023-11-09T12:10:14Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: \[class^='TitleBlock\_\_Title-sc'\]{ filter: blur(5px) }

---

## [Make widget popup wider on mobile](https://community.elfsight.com/t/make-widget-popup-wider-on-mobile/25057)

<div class="topic-metadata">

**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 9, 2023, 12:13pm UTC](https://community.elfsight.com/t/make-widget-popup-wider-on-mobile/25057 "2023-11-09T12:13:34Z")

</div>

Add this code to the Custom CSS field on your Job Board widget’s Appearance tab: .global-styles, \[class^="Popup\_\_PopupInner"\] { padding: 0 !important; }
