Skip to main content
Answer

CSS it increase button size?

  • September 15, 2023
  • 6 replies
  • 180 views
K
Novice III
Forum|alt.badge.img

Hi, 

Im trying to find code to increase the size of the button on a custom content box - any ideas?  

Thanks in advance :) 

Best answer by IanMonk

You need to find the code for the exact widget you are targeting. I recommend doing this in Chrome.

  1. Navigate to the widget.
  2. Right-click the button and select inspect.
  3. The inspector will open directly to the button class.
  4. Right-click the class and select Copy > CSS selector.

 

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.

    S

    6 replies

    IanMonk
    Helper III
    Forum|alt.badge.img+2
    • IanMonk
    • Helper III
    • Answer
    • September 15, 2023

    You need to find the code for the exact widget you are targeting. I recommend doing this in Chrome.

    1. Navigate to the widget.
    2. Right-click the button and select inspect.
    3. The inspector will open directly to the button class.
    4. Right-click the class and select Copy > CSS selector.

     

    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.

    treedy
    S
    K
    Novice III
    Forum|alt.badge.img
    • Kelly
    • Author
    • Novice III
    • September 18, 2023

    This is perfect and instructions so clear - thank you!!! Do you have code to also change the text within the box? 

     

    Bfarkas
    Hero III
    Forum|alt.badge.img+6
    • Bfarkas
    • Hero III
    • November 11, 2023

    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...

    Betsysentamu
    Novice II
    • Betsysentamu
    • Novice II
    • January 18, 2024

    @Bfarkas I was looking for similar instructions, but I would like to change the shape of the button to be a more rounded button rather than square. Is that possible?

    Bfarkas
    Hero III
    Forum|alt.badge.img+6
    • Bfarkas
    • Hero III
    • January 18, 2024

    @Bfarkas I was looking for similar instructions, but I would like to change the shape of the button to be a more rounded button rather than square. Is that possible?

    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

    JKolodner
    Betsysentamu
    Betsysentamu
    Novice II
    • Betsysentamu
    • Novice II
    • January 18, 2024

    @Bfarkas I was looking for similar instructions, but I would like to change the shape of the button to be a more rounded button rather than square. Is that possible?

    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!

     

    Bfarkas
    Terms & ConditionsCookie settingsAccessibility statement