Following up the above Call Action Buttonsarticle, 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; }
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:
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