Custom Interface - Buttons
Custom Interface - Buttons
Instructions
To add a link follow the steps listed below:
1. Copy the code <a href="#">This is a link</a>
2. Go to your text box where you are adding your link and click on "Source" from the WYSISWG at the top.
3. Paste the copied code into the text box after clicking "Source" (paste the code by pressing Ctrl + v on your keyboard).
4. Replace the # within the parenthesis with the URL of the link you are linking to.
5. Replace the "This is a link" text with the name of your link or the text that you are adding the link to.
6. After clicking "Source" again to get out of the code section, you should see your text written and underlined in blue, you have now added your link.
To add a button (any type: Thin, Call to Action, or with Icons) follow the steps listed below:
1. Copy the code of the button type you want from any of the options listed below.
2. Go to your text box where you are adding your link and click on "Source" from the WYSISWG at the top.
3. Paste the copied code after clicking "Source" (paste the code by pressing Ctrl + v on your keyboard).
4. Replace the # within the parenthesis with the URL of the link you are linking to.
5. Replace the "This is a (button type)" text with the name of your link or the text that you are adding the link to.
6. After clicking "Source" again to get out of the code section, you should see your text written and underlined in blue.
7. To check the button save and then view your page. Your button should now be visible.
Basic Link
When making a link its base style will look like as follows
This is a link
Code Section
<a href="#">This is a link</a>
Thin Buttons
You can make a simple link into a button by using the code listed below. The following are thin buttons and you can choose any of the styles listed below by using the corresponding code. Note that some widths will vary depending on how many buttons are in a row. Thin buttons generally take up 100% of the width they are able.
Code Section
<a class="uccsGoldButtonThin" href="#">This is a thin gold button</a> <a class="uccsDarkButtonThin" href="#">This is a thin dark button</a> <a class="uccsLightButtonThin" href="#">This is a thin light button</a> <a class="uccsBlueButtonThin" href="#">This is a thin blue button</a>
Call to Action Buttons
The call to action (CTA) buttons are larger than the thin buttons. Other than that most of the style is the same.
Code Section
<a class="CTAGoldButton" href="#">Gold CTA Button</a> <a class="CTADarkButton" href="#">Dark CTA Button</a> <a class="CTALightButton" href="#">Light CTA Button</a> <a class="CTABlueButton" href="#">Blue CTA Button</a>
Buttons With Icons
Buttons with icons for documents and links.
Code Section
<a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a> <a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a> <a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a> <a class="CTAGoldButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a> <a class="CTAGoldButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a> <a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a> <a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a> <a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a> <a class="CTADarkButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a> <a class="CTADarkButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a> <a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a> <a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a> <a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a> <a class="CTALightButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a> <a class="CTALightButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a> <a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">PDF Button Name<i aria-hidden="true" class="fa fa-file-pdf" style="margin-left: .9em"></i></a> <a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Excel Button Name<i aria-hidden="true" class="fa fa-file-excel" style="margin-left: .9em"></i></a> <a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Word Button Name<i aria-hidden="true" class="fa fa-file-word" style="margin-left: .9em"></i></a> <a class="CTABlueButton" data-entity-type="file" data-entity-uuid="file ID" href="#">Power Point Button Name<i aria-hidden="true" class="fa fa-file-powerpoint" style="margin-left: .9em"></i></a> <a class="CTABlueButton" href="#">Link Button Name<i aria-hidden="true" class="fa fa-link" style="margin-left: .9em"></i></a>