Hi,
Im trying to find code to increase the size of the button on a custom content box - any ideas?
Thanks in advance :)
Hi,
Im trying to find code to increase the size of the button on a custom content box - any ideas?
Thanks in advance :)
You need to find the code for the exact widget you are targeting. I recommend doing this in Chrome.
You should get something that looks like this...
#doc-widget-497 > custom-content-box-widget > div > div > div > div.button-container > custom-content-box-button > button
Add this to the custom stylings on the Configure Brand and Look page.
#doc-widget-497 > custom-content-box-widget > div > div > div > div.button-container > custom-content-box-button > button {
height: 250px;
width: 250px;
}
You can adjust the height and width as needed.
This is perfect and instructions so clear - thank you!!! Do you have code to also change the text within the box?
Just a note, while the above is technically correct, it relies on many layers of a precise order of structure to exist and remain the same, which moves this into the more risky territory for me in terms of maintenance. If Docebo eliminates a layer, adds a new one, transforms a layer type at any of the 7 levels, it will stop working (and they do do this without notice)
You can simplify this down a bit to just:
#doc-widget-431 .mdl-button {
width: 200px !important;
height: 200px !important;
}
Change the widget ID for your pages as you did above.
In terms of text in ‘the box’ which text are you referring to, custom boxes have Name, Title, Subtitle, Button Text. Also, what are you trying to change about the text? Font, style, size, etc...
On the train, but should work by just adding border radius CSS, so like: border-radius: 30px;
That should go as just another attribute in the same grouping shown above. There’s a more ways to define the specifics of the border radius to, info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
On the train, but should work by just adding border radius CSS, so like: border-radius: 30px;
That should go as just another attribute in the same grouping shown above. There’s a more ways to define the specifics of the border radius to, info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
Thank you!
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.