How To Change The Color Scheme

  • 5 February 2018
  • 13 replies
  • 567 views

Userlevel 6
Badge +1
  • Product Guru
  • 26 replies posted

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

Userlevel 3

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

Userlevel 6
Badge +4

@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.

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?

Userlevel 7

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

  

Userlevel 3
Badge +1

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?

 

Userlevel 7

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:

 

Userlevel 3
Badge +1

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.

Userlevel 7

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. 

 

Userlevel 3
Badge +1

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.

Userlevel 6
Badge +3

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. :)

Userlevel 3
Badge +1

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. :)

Heh, of course I need help. Just to be able to test things, to see does the idea improve usability and so on :) I assume this is small thing for someone who breaths CSS, I dont :D

Userlevel 6
Badge +3

Hehehe, well I cannot say this next tip enough and I already know inSided will agree with me.

If you have access to a Staging Instance, by all means please feel free to use that to experiment with Custom CSS to your hearts content! If you cause it to go kaboom, no worries! It’s just a staging instance.

It’s available on all plans last time I checked and the Control URL for it should have been provided by inSided when you signed up. If you lost it, support can send it to you again.

If you don’t seem to have one set up yet, Support can probably fix that for you.

But whatever you do, please try to avoid testing experiments on the live community! Your users won’t like you if you do.

Userlevel 3
Badge +1

Yeah, I know, I can test things but in order to test things you have know what and how and where. We dont have live inSided community yet so I am free to test everything with no problem.

Reply