how to change header icon colours
# 🤝helpj
jolly-translator-89976
08/30/2023, 5:21 AMthe code is this
/* Changes the fill color of the header icons to white */
.bpw-header-icon,
.bpw-header-icon svg,
.bpw-header-icon svg path {
fill: #000000 !important;
}
how do i change it so its black? i put it as 000000 but its not working for some reason
f
fresh-fireman-491
08/30/2023, 5:43 AM/* This block of CSS code styles a header icon element */
.bpw-header-icon {
/* Remove border */
border: none;
/* Remove background color */
background: none;
/* Remove padding */
padding: 0;
/* Remove margin */
margin: 0;
/* Set text color to a variable named shark */
color: var(--shark);
/* Set line-height to zero */
line-height: 0;
/* Set left margin to a variable named spacing-large */
margin-left: var(--spacing-large);
/* Align text to the right */
text-align: right;
/* Align element vertically in the middle */
vertical-align: middle;
/* Set cursor to a pointer */
cursor: pointer;
/* Set fill color to a variable named shark */
fill: var(--shark);
/* Set width to 16 pixels */
width: 16px;
/* Set height to 16 pixels */
height: 16px;
/* Set fill transition duration to 0.3 seconds */
transition: fill 0.3s;
}
/* Apply the same fill color and fill transition to the icon's SVG and path elements */
.bpw-header-icon svg,
.bpw-header-icon svg path {
/* Set fill color to a variable named shark */
fill: var(--shark);
/* Set fill transition duration to 0.3 seconds */
transition: fill 0.3s;
}
/* When the icon is hovered over, change the fill color to a variable named reef for the icon, SVG and path elements */
.bpw-header-icon:hover,
.bpw-header-icon:hover svg,
.bpw-header-icon:hover svg path {
fill: var(--reef);
}
fresh-fireman-491
08/30/2023, 5:44 AMThat is what you can do
fresh-fireman-491
08/30/2023, 5:44 AMj
jolly-translator-89976
08/30/2023, 9:13 PMdo i just replace that code?
jolly-translator-89976
08/30/2023, 9:13 PMor is there something specific i ned to do sry?
jolly-translator-89976
08/30/2023, 9:41 PMwhat does shark mean
jolly-translator-89976
08/30/2023, 9:41 PMi want to turn it into black
jolly-translator-89976
08/30/2023, 9:41 PMi saw the website but it doenst explain what shark and reef are and how u can turn them black ig
jolly-translator-89976
08/30/2023, 9:53 PMi meant colour of the header menu items
jolly-translator-89976
08/30/2023, 9:53 PMis that possible to change?
jolly-translator-89976
08/30/2023, 9:53 PM@fresh-fireman-491
jolly-translator-89976
08/30/2023, 10:00 PMeven once replacing its not working
f
fresh-fireman-491
08/31/2023, 6:36 AMYou don't replace it. That code just contains the thing you can customize about your header icon
fresh-fireman-491
08/31/2023, 8:06 AMYou can add the parts that you want
j
jolly-translator-89976
08/31/2023, 8:22 AMwhen i mean header icons, i am refering to the "X" button and the other buttons on the right of the chatbot
jolly-translator-89976
08/31/2023, 8:22 AMhow would you make that black
jolly-translator-89976
08/31/2023, 8:22 AMcoz all botpress chatbots have that white button
jolly-translator-89976
08/31/2023, 8:22 AMi want it to be black
f
fresh-fireman-491
08/31/2023, 8:25 AMCould you send me a picture of what you are trying to change the color of
j
jolly-translator-89976
09/01/2023, 5:16 AMhttps://cdn.discordapp.com/attachments/1146313779701882890/1147037173955166258/image.png▾
jolly-translator-89976
09/01/2023, 5:16 AMdo u know how to turn this X into black
jolly-translator-89976
09/01/2023, 5:16 AMif thats possible
f
fresh-fireman-491
09/02/2023, 9:48 PMSo sorry for the late response.
At first it didnt think we could do this but i figured it out
fresh-fireman-491
09/02/2023, 9:48 PM.bpw-header-icon-close{
/* to black */
filter: invert(1);
}
fresh-fireman-491
09/02/2023, 9:48 PMThat is the code
fresh-fireman-491
09/02/2023, 9:48 PMPut that in the advanced styler
fresh-fireman-491
09/02/2023, 9:48 PMhttps://cdn.discordapp.com/attachments/1146313779701882890/1147649328819744788/image.png▾
fresh-fireman-491
09/02/2023, 9:50 PMIf you also want the delete button to be black
fresh-fireman-491
09/02/2023, 9:50 PMRun this code
fresh-fireman-491
09/02/2023, 9:50 PM.bpw-header-icon{
/* to black */
filter: invert(1);
}
fresh-fireman-491
09/02/2023, 9:51 PMInstead of the other one