https://discord.gg/botpress logo
#🤝help
Stop botpress using default css
# 🤝help
s

salmon-midnight-96260

07/24/2023, 4:13 AM
Hey, I've setup a configurable bot on my site connected to a spreadsheet hosted on my server. If I don't put !important next to tags though, the code is overwritten by botpress default css. Is there a way to disable botpress-default.css
b
a

acceptable-kangaroo-64719

07/24/2023, 12:42 PM
are you passing the CSS file as a
customStylesheet
in the init() function?
s

salmon-midnight-96260

07/27/2023, 6:09 AM
no just a "stylesheet":
added customStylesheet into the init and still being overwritten by botpress-default.css
a

acceptable-kangaroo-64719

07/27/2023, 10:33 AM
can you share the init() code that you're using on your website?
s

salmon-midnight-96260

07/27/2023, 10:55 PM
window.botpressWebChat.init({ "composerPlaceholder": "Chat with WomBot", "botId": "cf667a02-130c-4abc-8720-50ad042b1d8b", "hostUrl": "https://cdn.botpress.cloud/webchat/v0", "messagingUrl": "https://messaging.botpress.cloud", "clientId": "cf667a02-130c-4abc-8720-50ad042b1d8b", "botName": "WomBot", "avatarUrl": "https://uploads-ssl.webflow.com/6494eeb6582cc5cfa3ded133/6494f20dc495522f94af042e_Screen%20Shot%202023-06-19%20at%2012.36.53%20pm%20(1).png", "stylesheet": "https://assets.digitalnative.com.au/wombot/css/WOMBOTStylesheet.css", "useSessionStorage": true, "enableConversationDeletion": true });
if i dont use !important on some elements it will revert back to botpress-default.css or occasionally inject.css?
There are many elements that work fine however others not so much. for examples i would attempt to set responsive heights for bpw-layout however without an !important the height will be overtaken by botpress-default and with !important i cant make it responsive so let me know! thank u
a

acceptable-kangaroo-64719

07/28/2023, 10:49 AM
@bright-magazine-792 do you have any tips?
s

salmon-midnight-96260

07/30/2023, 3:34 AM
@bright-magazine-792 please let me know if you do as it would be greatly appreciated
I've learnt that using min-width causes all the css in the {} to be ignored while max-width does work. Wierdly though, if I set a max-width:767px for mobile, the page is still using the max-width:767px figures for desktop sizes