How to add buttons

Hello everyone,

I am trying to add buttons inside text bodies or unfiltered texts (views), but it seems that button HTML tag is not supported.

However, in CERN theme there is a specific design for buttons. How am I supposed to add buttons?

Best regards,
Ioannis

Hi Ioanni,

You can paste the html code in CKEditor source mode from here https://webtools.web.cern.ch/components/call-action-button

Example:

<div class="component-call-to-action center" id="on_icon">
  <div style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)" id="call-action" class="component-button-background">
    <a href="#" title="See more" class="component_icon_color_">
    <span id="call-action" style="color:#FFFFFF" class="component-button-background">See more</span>
    </a>
  </div>
</div>

Thanks Sotirios, it’s a really helpful source!

I will follow up with an example on how I used Call Action Buttons, so it will be more precise for someone who wants to use them in Other usage.

Ioannis

Hello everyone,

Following up the above Call Action Buttons article, I would like to provide you with an example for Other usage, which extends the current documentation.

You may want to add a button inside a text (e.g. Basic Page, Header/Footer of a view)

Basic Page example:

  • Change the Text format to either CERN Full HTML or Unfiltered
  • Insert one of the variant’s HTML snippets

Header/Footer of a view example:

  • Add a Text Area as a Header/Footer in the view settings
  • Change Text format to either CERN Full HTML or Unfiltered
  • Insert one of the variant’s HTML snippets
  • If the button isn’t appeared correctly, make changes to CERN Override theme by adding the respective style to theme.css or creating a new css file. For example:
    .cern-view-display-page .view-header a * { color: #fff !important; } .cern-view-display-page .view-header a *:hover { color: #fff !important; }

I hope it will be useful,
Ioannis

1 Like

Hi
I have tried to add buttons in a basic page following the instructions above, however if I want to place the buttons in line using Boostrap grid system but they don’t look as button style.
See images:


See code:

<div class="row">
<div class="col-sm-4">
<div class="component-call-to-action left">
<div class="component-call-to-action__wrapper" style="background:rgba(10,108,204,1)"><a href="/events/webcasts/black-holes-brains-neural-networks-area-law-entropy" title="Black Holes as Brains"><span style="color:#FFFFFF">Black Holes as Brains</span> </a></div>
</div>
</div>

<div class="col-sm-4">One of three columns</div>

<div class="col-sm-4">One of three columns</div>
</div>

Hello Almudena,

Can you provide a link of the page?

Kostas

https://test-chis.web.cern.ch/node/59

Hi
I got to place the buttons in a basic page in different position, but using the bootstrap as follows:


<div class="row justify-content-start">
<div class="col-sm-4">
<div class="component-button-background" data-quickedit-entity-id="paragraph/78" data-quickedit-entity-instance-id="0" id="call-action" style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)"><span class="component-button-background" data-quickedit-entity-id="paragraph/78" data-quickedit-entity-instance-id="1" id="call-action" style="color:#FFFFFF">See more</span></div>
</div>

<div class="col-sm-4">
<div class="component-button-background" data-quickedit-entity-id="paragraph/78" data-quickedit-entity-instance-id="0" id="call-action" style="display: inline-block;padding: 11px 30px;border-radius:5px;background:rgba(8,85,160,1)"><a class="component_icon_color_" href="#" title="See more"><span class="component-button-background" data-quickedit-entity-id="paragraph/78" data-quickedit-entity-instance-id="1" id="call-action" style="color:#FFFFFF">See more</span> </a></div>
</div>
</div>

Almudena

Hey Almudena,

So what exactly was the issue?

Kostas

Hi
The issue was that I have applied the html code proposed in the web page https://webtools.web.cern.ch/components/call-action-button however this does not work. You can not place the button in a basic page where you want, it is always placed vertically.
I had to find another solution in https://getbootstrap.com/docs/4.0/layout/grid/
and compose a new html code.
Please tell me if it is clear enough.
Regards
Almudena