Best Answer

CSS it increase button size?

  • 15 September 2023
  • 6 replies
  • 86 views
K
Rank
Badge

Hi, 

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

Thanks in advance :) 

icon

Best answer by IanMonk 15 September 2023, 18:40

View original

6 replies

I
Rank
Userlevel 5
Badge +2

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.

K
Rank
Badge

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

 

Bfarkas
Rank
Userlevel 7
Badge +3

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
Rank

@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
Rank
Userlevel 7
Badge +3

@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

Betsysentamu
Rank

@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!

 

Reply


Terms & ConditionsCookie settings