Changing the background colour of Layout Config Button

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
yampan
Posts: 6
Joined: 09 Oct 2022, 16:26

02 Dec 2022, 22:13

Hi,

I would like to change the background colour of the Layout Config Button.

I want the background colour of the Layout Config Button to follow the rules below.

1) In Light Colour Scheme, the background colour should be the same as Menu Theme's colour
2) In Dim Colour Scheme, the background colour should be the same as the Component Theme's colour (lightness 10%)
3) In the Dark colour Scheme, the background colour should be the same as the Component Theme's colour (lightness -10%)

I look through _config.scss file (the public/assets/sass/layout/_config.scss) and try to change the variables under the ".layout-config-button.p-button" class without success
.layout-config-button.p-button {
position: fixed;
top: 80%;
right: 0;
width: 3.5rem;
height: 3.5rem;
text-align: center;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
overflow: hidden;
cursor: pointer;
z-index: 999;
box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
transition: background-color $transitionDuration;
background: $accentColor; /* try to change this to $primaryColor but unsuccessful */
color: $accentTextColor; /* also try to change this but unsuccessful */
border-right: none;

.p-button-icon {
font-size: 2.5rem;
line-height: inherit;
transform: rotate(0deg);
transition: transform 1s;
}
}
Would you be able to tell me how I should go about changing the background colour of the layout configuring button? Thanks!

habubey
Posts: 89
Joined: 24 Aug 2022, 13:17

05 Dec 2022, 08:23

Hey there!
Sure I will gladly help. Actually, you went on the right track.
After your changes, you have to write below this code block and run it on the terminal.

Code: Select all

sass --watch public/assets:public/assets --no-source-map
You might see the changes.
Best
Bugra Beyduz
PrimeReact Core Developer
Github profile: https://github.com/habubey

Post Reply

Return to “Diamond - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests