Change menu background color other than White / Black

[rm116]

Version

1.1.0

Reproduction link

https://jsbin.com/?html,output

Operating System

Windows 10

Device

PC

Browser & Version

Google Chrome

Steps to reproduce

Open dahboard

What is expected?

In Admin.jsx :

this.state = {
  backgroundColor: "#C0C0C0",
  activeColor: "info"
};

Change backgroundColor other than 'black' or 'white'

What is actually happening?

Any other color is not working other thank white and black.

I want to manipulate the backgroundColor and colors in general.

---

Solution

Additional comments

Thank you

[einazare]

Hello there, @rm116 ,

The backgroundColor and the activeColor need to have the words given to you, that is because the styles are applied from our scss, and they are not inline styles (#C0C0C0). I am sorry, but this is not a bug, it is actually and enhancement and it kind of falls into the custom development category. To change our colors you will need to pass to the Sidebar component a word

backgroundColor: "my-custom-background-color",

And then, add your css/scss something like:

.sidebar[data-color="my-custom-background-color"]{
       background-color: #C0C0C0;
}

That will do the trick.

Best, Manu

[rm116]

Hi Nazare,

For example, I added a component 'react-dropzone-component' to upload and drag filesto my view page, but it's not showing up.

Only a text is showing , how can I change the paper dashboard to make that component show ?

Thanks

---

From: Nazare Emanuel-Ioan notifications@github.com Sent: Friday, March 6, 2020 9:16 AM To: creativetimofficial/paper-dashboard-react paper-dashboard-react@noreply.github.com Cc: rm116 raed-moussaoui@hotmail.com; Mention mention@noreply.github.com Subject: Re: [creativetimofficial/paper-dashboard-react] Change menu background color other than White / Black (#10)

Hello there, @rm116https://github.com/rm116 ,

The backgroundColor and the activeColor need to have the words given to you, that is because the styles are applied from our scss, and they are not inline styles (#C0C0C0). I am sorry, but this is not a bug, it is actually and enhancement and it kind of falls into the custom development category. To change our colors you will need to pass to the Sidebar component a word

backgroundColor: "my-custom-background-color",

And then, add your css/scss something like:

.sidebar[data-color="my-custom-background-color"]{ background-color: #C0C0C0; }

That will do the trick.

Best, Manu

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/creativetimofficial/paper-dashboard-react/issues/10?email_source=notifications&email_token=AFZHCHUTLLP3E5ZES4MNPF3RGCWNJA5CNFSM4LCFWQCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEOAPNRY#issuecomment-595654343, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AFZHCHV3GYUFAICI6FXW6L3RGCWNJANCNFSM4LCFWQCA.

[einazare]

Hello there, @rm116 ,

We have this component implemented in one of our PRO products here: https://demos.creative-tim.com/argon-dashboard-pro-react/#/admin/components

Best, Manu

[rm116]

Hi Nazare,

I'm not asking about the implementation.

I want to know how to make the style of the design of that component show?

Thanks

---

From: Nazare Emanuel-Ioan notifications@github.com Sent: Friday, March 6, 2020 4:19 PM To: creativetimofficial/paper-dashboard-react paper-dashboard-react@noreply.github.com Cc: rm116 raed-moussaoui@hotmail.com; Mention mention@noreply.github.com Subject: Re: [creativetimofficial/paper-dashboard-react] Change menu background color other than White / Black (#10)

Hello there, @rm116https://github.com/rm116 ,

We have this component implemented in one of our PRO products here: https://demos.creative-tim.com/argon-dashboard-pro-react/#/admin/components

Best, Manu

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/creativetimofficial/paper-dashboard-react/issues/10?email_source=notifications&email_token=AFZHCHXPIP2GRA5F3MDAAQ3RGEIBZA5CNFSM4LCFWQCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEOBWV4I#issuecomment-595815153, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AFZHCHXDSQLJIAAKA3CPRTDRGEIBZANCNFSM4LCFWQCA.

[einazare]

Hello again, @rm116 ,

That should be explained in their docs. They should have an scss/css/less (or other types of style files), that you should import into your project.

Best, Manu