# Top contributors sidebar Backgound **URL:** https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499 **Category:** Development **Tags:** top-contributors-sidebar **Created:** [June 4, 2024, 11:22am UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499 "2024-06-04T11:22:01Z") **Posts on this page:** 17 **Page:** 1
### Author: ![Nestor\_Matias](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nestor_matias/32/393562_2.png) [@Nestor\_Matias](https://meta.discourse.org/u/Nestor_Matias) #### Post date: [June 4, 2024, 11:22am UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/1 "2024-06-04T11:22:01Z")
Hi Discourse i need some help i added this Top-contributor-sidebar theme to my Foum but i want to know how can i add or change the backgound of it? is there any way to custom the style. ---
### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej) #### Post date: [June 4, 2024, 1:11pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/2 "2024-06-04T13:11:40Z")
Welcome @Nestor_Matias! 😃 > [@Nestor\_Matias](#): > > change the backgound Do you mean the background colour or? If its something relatively easy you may find this guide below helpful 😉 > [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6): > > bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics CSS
 ---
### Author: ![Nestor\_Matias](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nestor_matias/32/393562_2.png) [@Nestor\_Matias](https://meta.discourse.org/u/Nestor_Matias) #### Post date: [June 4, 2024, 1:43pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/3 "2024-06-04T13:43:21Z")
thanks @ondrej but i need to change the background of this TOP CONTRIBUTORS theme only. if you can see it looks white like the general theme Top contributors i want to customize it? ![image](https://global.discourse-cdn.com/meta/original/4X/b/7/1/b71314bae52e8b01c4dd01b43a63bbd96213e87c.png) ---
### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787) #### Post date: [June 4, 2024, 1:44pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/4 "2024-06-04T13:44:55Z")
Send forum url i will help you ---
### Author: ![Nestor\_Matias](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nestor_matias/32/393562_2.png) [@Nestor\_Matias](https://meta.discourse.org/u/Nestor_Matias) #### Post date: [June 4, 2024, 2:48pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/5 "2024-06-04T14:48:38Z")
hi @ogulcan1787 i only testing on my Localhost:4200 but also i need some help i’m using Sublime theme but why my category’s boxes don’t change color can you help me please? ![image](https://global.discourse-cdn.com/meta/original/4X/8/f/b/8fbde1013ab1634ffa51bd98a8c0a5422c0b37a1.jpeg) ---
### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787) #### Post date: [June 4, 2024, 3:10pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/6 "2024-06-04T15:10:14Z")
You can edit very easy. While on the page, press the F12 key on the keyboard. ![Ekran görĂŒntĂŒsĂŒ 2024-06-04 175439](https://global.discourse-cdn.com/meta/original/4X/d/2/3/d23b3e3c02868fd97fcef7042edf0374234ba59c.jpeg) Click this icon at the top left of the console. ![Ekran görĂŒntĂŒsĂŒ 2024-06-04 175605](https://global.discourse-cdn.com/meta/original/4X/0/e/7/0e70ecbbe345285bfc4d8a2a3138d2453a3c93b9.png) Then select the area you will edit. ![Ekran görĂŒntĂŒsĂŒ 2024-06-04 175808](https://global.discourse-cdn.com/meta/original/4X/5/c/5/5c5b3888e686d5e2a457b0ebc6cb773df32a5708.png) Try changing the codes on the right. ![Ekran görĂŒntĂŒsĂŒ 2024-06-04 175948](https://global.discourse-cdn.com/meta/original/4X/8/9/7/897af3a7b9bfd2b5eb60e2e96e8d4ba1f6a9f0a3.png) Once it’s the way you want it, copy the codes. ![Ekran görĂŒntĂŒsĂŒ 2024-06-04 180123](https://global.discourse-cdn.com/meta/original/4X/6/a/3/6a323fc0474516e37573a03f9c08a4133e72ede3.png) Admin **\>** Customize **\>** themes and click EDIT CSS HTML **\>** Desktop Paste and Save. You can instantly see what you saved on the site. You can find the codes you are looking for on the internet. For example, if you want to change the background color, search on Google for “Background change code CSS”. The codes you will find are “background-color: #fff” You can give the background color you want by adding the code you found to the edited field. Since your native language is English, you can find resources much more easily. I edited the site in my profile without any coding knowledge. You can do it too. Good luck. ---
### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly) #### Post date: [June 4, 2024, 3:24pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/7 "2024-06-04T15:24:06Z")
Nice work and great post with the screenshots 👍 🙂 ---
### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787) #### Post date: [June 4, 2024, 3:29pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/8 "2024-06-04T15:29:29Z")
Thank you Lilly. I hope I helped. đŸ€— ---
### Author: ![Nestor\_Matias](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nestor_matias/32/393562_2.png) [@Nestor\_Matias](https://meta.discourse.org/u/Nestor_Matias) #### Post date: [June 4, 2024, 3:38pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/9 "2024-06-04T15:38:49Z")
hi @ogulcan1787 thanks but i don’t think you understood my question i use sublime theme there’s no edit css option on this theme. i’m not using Default theme btw. ![image](https://global.discourse-cdn.com/meta/original/4X/4/e/9/4e993780658852b332e5bad422eabfe4ca41ca39.png) i hope i explained myself more clear​😊 ---
### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin) #### Post date: [June 4, 2024, 3:42pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/10 "2024-06-04T15:42:36Z")
You don’t have to edit the css of that theme. You can create your own theme component and add that to your theme > [@Open the login popup Or trigger event when button is pressed](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/7): > > You can create a new Theme component and attach it to your theme. Go to Admin → Customize Click on Install button Then attach it to your theme and click on Edit CSS/HTML button You add code in Head section: Hope that helps. +1 ---
### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787) #### Post date: [June 4, 2024, 3:49pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/11 "2024-06-04T15:49:04Z")
_Maybe_ you can do it this way. ![111](https://global.discourse-cdn.com/meta/original/4X/3/a/6/3a60e6a7e8131f14d25214e231df29b745458a26.png) ![222](https://global.discourse-cdn.com/meta/original/4X/a/3/0/a308f3fbe2e3751a8894d421add8e86b0b673a59.png) ![333](https://global.discourse-cdn.com/meta/original/4X/5/8/5/585cb1b60028141a15e8f9b1cbf206a38e1aa589.png) ![444](https://global.discourse-cdn.com/meta/original/4X/1/6/3/1637abe034d0dac37a156a3f8a56aeabf1fd9709.png) ![555](https://global.discourse-cdn.com/meta/original/4X/9/f/7/9f7edc7b1cb4df1f9d43b4b08220f4b067e6bd63.png) I think the best thing is to make your own design. It’s really not that difficult. ---
### Author: ![Nestor\_Matias](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nestor_matias/32/393562_2.png) [@Nestor\_Matias](https://meta.discourse.org/u/Nestor_Matias) #### Post date: [June 5, 2024, 2:35pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/12 "2024-06-05T14:35:50Z")
hi @ogulcan1787 thank you so much it helped. but this is not working for category’s box. they have different color if you can see on the inspection it shows they are dynamic but those colors are not showing or working i don’t how to fix this ? can you help pls ![image](https://global.discourse-cdn.com/meta/original/4X/3/d/0/3d020e03513973e1b55877bbd47eb6089ef63aca.png) i want it like this can anyone help please? ![image](https://global.discourse-cdn.com/meta/original/4X/c/b/f/cbfd5b2c2e5889bdbe3bfbf7d3b2f9d7756f7a32.jpeg) ---
### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin) #### Post date: [June 5, 2024, 2:43pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/13 "2024-06-05T14:43:29Z")
You can change the category-badge-color in the category’s settings. ![image](https://global.discourse-cdn.com/meta/original/4X/1/5/3/1534b0e3808a005a5582c9a482a73793aec4a8e2.png) Just visit the category, click the wrench and choose a different background color. ---
### Author: ![Nestor\_Matias](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nestor_matias/32/393562_2.png) [@Nestor\_Matias](https://meta.discourse.org/u/Nestor_Matias) #### Post date: [June 5, 2024, 2:52pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/14 "2024-06-05T14:52:19Z")
@Moin of course that is the first thing i did, then i tried to do it manually but the css is dynamic as you can see? can anyone help here? pls ---
### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787) #### Post date: [June 5, 2024, 3:18pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/15 "2024-06-05T15:18:34Z")
`.categor-boxes .category-box border-top: 2px solid #colorcode;` These codes will give them all a single color. But I think, You’d better do as @Moin says. ---
### Author: ![Nestor\_Matias](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nestor_matias/32/393562_2.png) [@Nestor\_Matias](https://meta.discourse.org/u/Nestor_Matias) #### Post date: [June 5, 2024, 3:37pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/16 "2024-06-05T15:37:12Z")
@ogulcan1787 i already tried this of course but it’s not working i don’t know what else to do ---
### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system) #### Post date: [July 5, 2024, 3:37pm UTC](https://meta.discourse.org/t/top-contributors-sidebar-backgound/310499/17 "2024-07-05T15:37:59Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.