# Blog **URL:** https://community.elfsight.com/c/css-codes/blog/221.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Change background color of category dropdown on mobile](https://community.elfsight.com/t/change-background-color-of-category-dropdown-on-mobile/174197)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [September 14, 2026, 11:52am UTC](https://community.elfsight.com/t/change-background-color-of-category-dropdown-on-mobile/174197 "2026-09-14T11:52:45Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: @media (max-width: 500px) { \[class\*="Dropdown\_\_DropdownContainer-sc"\]:not(.es-category-list-item) { background-color: #f3e8… --- ## [Change font of all elements (Blog)](https://community.elfsight.com/t/change-font-of-all-elements-blog/76018)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [June 18, 2026, 6:36am UTC](https://community.elfsight.com/t/change-font-of-all-elements-blog/76018 "2026-06-18T06:36:46Z")
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 this code to the Custom CSS field on the Settings tab of your Blog widget’s sett… --- ## [Reduce image size of the featured image](https://community.elfsight.com/t/reduce-image-size-of-the-featured-image/151737)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 1, 2026, 11:19am UTC](https://community.elfsight.com/t/reduce-image-size-of-the-featured-image/151737 "2026-04-01T11:19:47Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="featured-card\_\_Container-sc"\] \[class\*="card-media-image\_\_CardMediaImage-sc"\] { flex-basis: 25%; } --- ## [Add borders to images in popup](https://community.elfsight.com/t/add-borders-to-images-in-popup/129172)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 3, 2025, 6:20pm UTC](https://community.elfsight.com/t/add-borders-to-images-in-popup/129172 "2025-07-03T18:20:40Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="post\_\_FeaturedImage-sc"\], .es-post-img-wrapper img { border-width: 2px; border-style: solid; border-color: red; border-r… --- ## [Change font size (Blog)](https://community.elfsight.com/t/change-font-size-blog/76021)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 3\ **Last updated:** [May 27, 2025, 7:45am UTC](https://community.elfsight.com/t/change-font-size-blog/76021 "2025-05-27T07:45:37Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: /\* Paragraph \*/ .es-post-content p { font-size: 14px; } /\* List \*/ .es-post-content ul { font-size: 14px; } /\* Heading 2 \*/ .es… --- ## [Move Date/Author under Title](https://community.elfsight.com/t/move-date-author-under-title/83981)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 19, 2024, 1:00pm UTC](https://community.elfsight.com/t/move-date-author-under-title/83981 "2024-11-19T13:00:39Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: /\* date - author \*/ \[class\*="card-content"\]\>div:nth-child(3) { order: 2; } /\* excerpt \*/ \[class\*="card-content"\]\>div:nth-chil… --- ## [Align Date/Title center in Individual Posts](https://community.elfsight.com/t/align-date-title-center-in-individual-posts/84411)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 21, 2024, 2:13pm UTC](https://community.elfsight.com/t/align-date-title-center-in-individual-posts/84411 "2024-11-21T14:13:48Z")
You can use this code to Custom CSS box \[class\*="post\_\_Date"\] { justify-content: center; } \[class\*="post\_\_Title"\] { text-align: center; } Result: --- ## [Remove Date in Individual Posts](https://community.elfsight.com/t/remove-date-in-individual-posts/84413)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 21, 2024, 2:15pm UTC](https://community.elfsight.com/t/remove-date-in-individual-posts/84413 "2024-11-21T14:15:03Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="post\_\_Date"\] { display: none; } --- ## [Add "Read More" under Blog Excerpt](https://community.elfsight.com/t/add-read-more-under-blog-excerpt/84416)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 21, 2024, 2:18pm UTC](https://community.elfsight.com/t/add-read-more-under-blog-excerpt/84416 "2024-11-21T14:18:52Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: .es-card-content-info::after { content: 'Read More'; font-size: 12px; width: 100%; text-decoration: underline; transiti… --- ## [Add a credit text over Blog Image](https://community.elfsight.com/t/add-a-credit-text-over-blog-image/84592)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 22, 2024, 10:58am UTC](https://community.elfsight.com/t/add-a-credit-text-over-blog-image/84592 "2024-11-22T10:58:53Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="MediaImage\_\_Container"\]:before { content: "Photo by Elfsight"; position: absolute; bottom: 10px; right: … --- ## [Change Color of Blog Title/Excerpt/Date/Author](https://community.elfsight.com/t/change-color-of-blog-title-excerpt-date-author/84593)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 22, 2024, 11:00am UTC](https://community.elfsight.com/t/change-color-of-blog-title-excerpt-date-author/84593 "2024-11-22T11:00:08Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: /\* Title \*/ \[class\*="card-content\_\_CardContentTitle"\] { color: #f1f; } /\* Excerpt \*/ \[class\*="card-content\_\_CardContentTitle"… --- ## [Move Meta (Date/Author) above Title](https://community.elfsight.com/t/move-meta-date-author-above-title/84897)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 24, 2024, 10:51am UTC](https://community.elfsight.com/t/move-meta-date-author-above-title/84897 "2024-11-24T10:51:24Z")
If you want to move Date/Author above Blog Title, add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: /\* date - author \*/ \[class\*="card-content"\]\>div:nth-child(3) { order: 1; } … --- ## [Rotate Blog image on hover](https://community.elfsight.com/t/rotate-blog-image-on-hover/84898)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 24, 2024, 10:52am UTC](https://community.elfsight.com/t/rotate-blog-image-on-hover/84898 "2024-11-24T10:52:26Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: a:hover div\[class\*="card-media-image"\]:hover img { transform: rotate(180deg); transition: all 0.3s ease; } --- ## [Add a Dark overlay over image on Hover](https://community.elfsight.com/t/add-a-dark-overlay-over-image-on-hover/84899)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 24, 2024, 10:53am UTC](https://community.elfsight.com/t/add-a-dark-overlay-over-image-on-hover/84899 "2024-11-24T10:53:34Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="MediaImage\_\_Container"\]:before { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top… --- ## [Move Author next to Date in individual posts](https://community.elfsight.com/t/move-author-next-to-date-in-individual-posts/85513)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 27, 2024, 3:04am UTC](https://community.elfsight.com/t/move-author-next-to-date-in-individual-posts/85513 "2024-11-27T03:04:36Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="post\_\_Author"\] { position: absolute; left: 150px; top: 0; } \[class\*="post\_\_Header"\] { position: relative… --- ## [Remove Author in Individual Posts](https://community.elfsight.com/t/remove-author-in-individual-posts/85514)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 27, 2024, 3:05am UTC](https://community.elfsight.com/t/remove-author-in-individual-posts/85514 "2024-11-27T03:05:11Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="post\_\_Author"\] { display: none; } --- ## [Change opacity of title on hover](https://community.elfsight.com/t/change-opacity-of-title-on-hover/85517)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 27, 2024, 3:07am UTC](https://community.elfsight.com/t/change-opacity-of-title-on-hover/85517 "2024-11-27T03:07:58Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="card-content\_\_CardContentTitle"\]:hover { opacity: 0.5; } --- ## [Disable blog image hover effect](https://community.elfsight.com/t/disable-blog-image-hover-effect/85772)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 28, 2024, 2:35am UTC](https://community.elfsight.com/t/disable-blog-image-hover-effect/85772 "2024-11-28T02:35:02Z")
When you hover blog item \>\> image will be bigger a bit. To disable this effect, add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="MediaImage\_\_Container"\] img { transf… --- ## [Blog title gradient color](https://community.elfsight.com/t/blog-title-gradient-color/85774)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 28, 2024, 2:36am UTC](https://community.elfsight.com/t/blog-title-gradient-color/85774 "2024-11-28T02:36:20Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="card-content\_\_CardContentTitle"\] { background: linear-gradient(to right, #30CFD0 0%, #330867 100%); -webkit-b… --- ## [Change blog to 2 columns on mobile](https://community.elfsight.com/t/change-blog-to-2-columns-on-mobile/86329)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [December 1, 2024, 1:17am UTC](https://community.elfsight.com/t/change-blog-to-2-columns-on-mobile/86329 "2024-12-01T01:17:04Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: @media screen and (max-width:767px) { div\[class\*="layout\_\_List"\] { display: grid; grid-template-columns: repeat(2,1fr); … --- ## [Add a border to the blog popup](https://community.elfsight.com/t/add-a-border-to-the-blog-popup/87696)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [December 9, 2024, 12:20am UTC](https://community.elfsight.com/t/add-a-border-to-the-blog-popup/87696 "2024-12-09T00:20:23Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="popup\_\_Content"\] { border: 5px solid #f1f; } Result: --- ## [Change color of the cross in the popup close button](https://community.elfsight.com/t/change-color-of-the-cross-in-the-popup-close-button/84410)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 21, 2024, 2:12pm UTC](https://community.elfsight.com/t/change-color-of-the-cross-in-the-popup-close-button/84410 "2024-11-21T14:12:24Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="Popup"\] svg { fill: #f1f; } \[class\*="Popup"\] button\[class\*="PopupClose"\] { background-color: #000 !important; } … --- ## [Change blog popup x to custom icon](https://community.elfsight.com/t/change-blog-popup-x-to-custom-icon/85511)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 27, 2024, 3:03am UTC](https://community.elfsight.com/t/change-blog-popup-x-to-custom-icon/85511 "2024-11-27T03:03:09Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="Popup"\] svg { visibility: hidden; } \[class\*="Popup"\] button\[class\*="PopupClose"\] { background-image: url(https:/… --- ## [Change blog popup x to word "Close"](https://community.elfsight.com/t/change-blog-popup-x-to-word-close/85512)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 27, 2024, 3:03am UTC](https://community.elfsight.com/t/change-blog-popup-x-to-word-close/85512 "2024-11-27T03:03:54Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="Popup"\] svg { visibility: hidden; } \[class\*="Popup"\] button\[class\*="PopupClose"\] { background-color: transparent… --- ## [Change blog popup background color](https://community.elfsight.com/t/change-blog-popup-background-color/85515)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 27, 2024, 3:06am UTC](https://community.elfsight.com/t/change-blog-popup-background-color/85515 "2024-11-27T03:06:10Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="popup\_\_Content"\] { background-color: #f1f !important; } Result: --- ## [Round corners of images in blog popup](https://community.elfsight.com/t/round-corners-of-images-in-blog-popup/85516)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 27, 2024, 3:07am UTC](https://community.elfsight.com/t/round-corners-of-images-in-blog-popup/85516 "2024-11-27T03:07:13Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="popup\_\_Content"\] img { border-radius: 30px; } Result --- ## [Add dropshadow around blog item](https://community.elfsight.com/t/add-dropshadow-around-blog-item/85773)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [November 28, 2024, 2:35am UTC](https://community.elfsight.com/t/add-dropshadow-around-blog-item/85773 "2024-11-28T02:35:43Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="layout\_\_"\]\>div { box-shadow: 3px 5px 7px rgba(0,0,0,0.5); padding: 5px; } Result --- ## [Add background color behind blog item](https://community.elfsight.com/t/add-background-color-behind-blog-item/86326)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [December 1, 2024, 1:14am UTC](https://community.elfsight.com/t/add-background-color-behind-blog-item/86326 "2024-12-01T01:14:48Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="layout\_\_List"\]\>div { background-color: #ececec; border-radius: 10px; } Result --- ## [Change layout: left image/right text - left text/right image](https://community.elfsight.com/t/change-layout-left-image-right-text-left-text-right-image/86328)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [December 1, 2024, 1:16am UTC](https://community.elfsight.com/t/change-layout-left-image-right-text-left-text-right-image/86328 "2024-12-01T01:16:13Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: \[class\*="layout\_\_List"\]\>:nth-child(odd)\>a { flex-direction: row-reverse; } --- ## [Reduce blog image size on mobile](https://community.elfsight.com/t/reduce-blog-image-size-on-mobile/86330)
**Author:** [@tuanphan](https://community.elfsight.com/u/tuanphan)\ **Replies:** 0\ **Last updated:** [December 1, 2024, 1:17am UTC](https://community.elfsight.com/t/reduce-blog-image-size-on-mobile/86330 "2024-12-01T01:17:43Z")
Add this code to the Custom CSS field on the Settings tab of your Blog widget’s settings: @media screen and (max-width:767px) { \[class\*="card-media-image"\] { max-width: 100px; margin: 0 auto; } } [Next page](https://community.elfsight.com/c/css-codes/blog/221.md?page=1)