Skip to main content
Frank
Product Guru
Feb 5, 2018 1:53 PM UTC

How To Change The Color Scheme

Colors have a big impact on the look of your community - think vibrant flower power, washed retro or duo-tone minimalistic. Get groovy and change the color scheme of your community with just a few clicks.
 

How to change the color scheme of your community

  1. Sign in to a community account with user role Community Manager or Administrator
  2. Click the purple Theme button and select Colors 
  3. Find the color you want to change and click the input field.
  4. Provide a color in HEX (e.g. #2AAAE1) or RGBa (e.g. rgba(42,170,225,0.90)) format. You can also pick a color with the color picker.
  5. Click Publish

Preview: When the color mode is active you can browse around to other pages of your platform to see how they are affected by the changes.

 

Color scheme example:

fc35ade0-de60-4104-b803-3cb4d91fe029.jpg

13 replies

Pieter
Contributor ⭐️⭐️⭐️
Apr 17, 2020 12:55 PM UTC

I’m trying to edit the colors just for the quicklink titles. Which part should I change of the options above? 

Translate
People are strange
bjoern_schulze
Helper ⭐️⭐️⭐️
Apr 17, 2020 1:58 PM UTC

@Pieter The Quick Link titles use the “Text Color” (for whatever reason instead of “Heading Color”). But beware: If you change the text color, all your community texts will get the new color too!

Alternatively you could overwrite the default color for Quick Link titles with Custom CSS.

Translate
Contributor ⭐️⭐️
Apr 21, 2020 6:30 PM UTC

We’ve noticed that our poll buttons match the background. Does anyone know which of the controls modifies the poll radio buttons, and what else it controls?

Translate
Yoeri
Gainsight Employee ⭐️⭐️⭐️
Apr 30, 2020 12:35 PM UTC

We’ve noticed that our poll buttons match the background. Does anyone know which of the controls modifies the poll radio buttons, and what else it controls?

The radio button in its default state has a default grey color that can’t be customized.

Once a radio button is selected it will get your brand color. 

If you haven’t selected a poll option yet the Vote button will show an inactive state where the background color of the button uses the color that you’ve set for you border color.

Once a poll option is select the button will change to a toggle button

Hope this helps

  

Translate
Group Product Manager, Customer Communities
revote
VIP ⭐️⭐️⭐️⭐️⭐️
Jun 15, 2022 12:56 PM UTC

I got feedback from the users, they want, especially in mobile view, that these marked sets has their own background color. Not all sets but some of them should have their own background color.

This is important because it helps you to see what is the actual text (=content) and what are info about the user who posted the content.

The content is the most important part to see and it should be seen easily, rest (sets) comes after content.

Is this possible and if so how? With custom code?

 

Translate
Yoeri
Gainsight Employee ⭐️⭐️⭐️
Jun 15, 2022 9:00 PM UTC

Hey, this is possible using custom CSS.

You will have to find the block/area that you want to give a background color in the code and add background-color CSS attribute to it. Here’s an example where I added a green background color to the user-info panel:

 

Translate
Group Product Manager, Customer Communities
revote
VIP ⭐️⭐️⭐️⭐️⭐️
Jun 16, 2022 7:41 AM UTC

Hey, this is possible using custom CSS.

You will have to find the block/area that you want to give a background color in the code and add background-color CSS attribute to it. Here’s an example where I added a green background color to the user-info panel:

 

Awesome! I am not familiar with the CSS, can you share more detailed info about attribute you used with that example? Then I can start testing my own.

Translate
Yoeri
Gainsight Employee ⭐️⭐️⭐️
Jun 16, 2022 6:51 PM UTC

Hey Terore, if you’re not familiar with CSS then I highly recommend you to work with a developer to make custom CSS changes. inSided is not able to provide support with custom CSS requests as they are unique to your environment.

What you need to do is find the CSS class attribute of an element you want to change (you can do this with the inspect element tool of a browser) e.g.

CSS class for this button is .btn-primary

After you’ve found the CSS class you can use inSided custom css functionality to apply your own customisation to this element.

Translate
Group Product Manager, Customer Communities
revote
VIP ⭐️⭐️⭐️⭐️⭐️
Jun 17, 2022 8:05 AM UTC

Hey Terore, if you’re not familiar with CSS then I highly recommend you to work with a developer to make custom CSS changes. inSided is not able to provide support with custom CSS requests as they are unique to your environment.

Okay, thanks. I totally understand.

Translate
Blastoise186
Helper ⭐️⭐️⭐️
Jun 17, 2022 11:54 AM UTC

If you just need a quick fix for a little bit of custom CSS though, some of the folks on inSpired might be able to help you out. I seem to recall @SmartlyGreg being an absolute wizard at that stuff. :)

Translate
Bug blasting absolutely everything... The Blastoise Way