The codes below can be used for a variety of things in Cascade. They're provided here for your convenience and easy access. If you're looking for something that's not provided here, contact us. 

Open Page in Cascade Bookmarks

Editing your pages in Cascade has never been easier with our Cascade bookmarks!

With the click of a button, users can now edit their site while viewing it live. No more having to sign in, navigate to your site and then the specific page you want to edit. Save time by creating your bookmark today!

Note: These instructions work for Google Chrome and Firefox browsers.

Creating the Open in Cascade bookmark

The Open in Cascade bookmark will open the given page in a new tab within Cascade, but will not open the edit screen. To create the Open in Cascade bookmark:

  1. Create a new bookmark in your browser by right-clicking on the bookmark bar and selecting Add Page.
  2. On the flyout, give your bookmark a name. We recommend naming it "Open in Cascade".
  3. For the URL, copy and paste the code below:

javascript:(function(){var cascadeURL='https://cascade.fiu.edu/entity/open.act?type=page&id=';var cascadeID=$('meta[name=id]').attr('content');window.open(cascadeURL+cascadeID);})();

Creating the Edit in Cascade bookmark

The Edit in Cascade bookmark will open the given page in a new tab within Cascade and take you directly to the edit screen. To create the Edit in Cascade bookmark:

  1. Create a new bookmark in your browser by right-clicking on the bookmark bar and selecting Add Page.
  2. On the flyout, give your bookmark a name. We recommend naming it "Edit in Cascade".
  3. For the URL, copy and paste the code below:

javascript:if( typeof $('meta[name=id]').attr("content") !== "undefined" ){window.open("https://cascade.fiu.edu/entity/open.act?action=edit&type=page&id="+$(%27meta[name=id]%27).attr("content"));}

Once you're done, click save. Your new bookmark will appear on your bookmarks bar in your browser.

Happy editing!

Link & Button Styles

Primary call to action (CTA)

If you want to include a call to action link without using the call to action content area, you can use the code below to create the same effect on the link text.

<p>
    <a class="cta-link-primary" href="Insert URL Here">Insert Link Text Here</a>
</p>

The final result will look like this:

Buy the thing

Buttons

Need to bring attention to a call to action on your page? Buttons may be just the thing you need.

Simply copy and paste any of the codes below into the source code of the page you are editing. 

<a href="#" class="button button--blue">Blue button</a>
<a href="#" class="button button--outline">Blue outline button</a>
<a href="#" class="button button--gold">Gold button</a>
<a href="#" class="button button--red">Red button</a>
<a href="#" class="button button--cyan">Cyan button</a>

Accessible video embed

You can insert videos in any content area with a WYSIWYG editor. A complete video embed code should resemble the code below:

<div class="flex-video widescreen vimeo">
     <iframe
         title="Video FIU commercial"
         width="560"
         height="315"
         src="https://www.youtube.com/embed/O6DBjrWDZr4"
         allowfullscreen
         loading="lazy">
     </iframe>
</div>

Use the embed code for YouTube, Vimeo or another online player and stick it inside the code below:

<div class="flex-video widescreen vimeo">
    <!-- Insert video embed code here -->
</div>

Remember to add the title of the video you're embedding as well as the code to optimize the loading speed on the webpage.

Video Title

The following code is used to give your video a title. This allows for this element on the page to become accessible. Right after the text that says <iframe paste the following code:

title="VIDEO TITLE"

Replace the uppercase text with a descriptive title of the video.

Video Loading

The following code is used to optimize the speed of your webpage. Lazy loading will decrease the initial load time of any webpage. Right after the text that says <iframe paste the following code:

loading="lazy"

Energy lines class

Users can now add energy lines to any content block! No more having to use the CTA component to add color to your page.

Simply copy and paste any of the codes below into the source code of the page you are editing. 

<img class="energize-media--cyan--left" width="600" src="fiu.jpg" alt="" />
<img class="energize-media--cyan--right" width="600" src="fiu.jpg" alt="" />
<img class="energize-media--magenta--left" width="600" src="fiu.jpg" alt="" />
<img class="energize-media--magenta--right" width="600" src="fiu.jpg" alt="" />

Social media links

Add a row of icons that link to your social media accounts. Copy the code below and replace the link with the URL for your accounts.

The final result will look like this:

<ul aria-label="Social Networks" class="social-media">
     <li>
         <a href="https://www.instagram.com/fiuinstagram/" rel="noopener noreferrer" target="_blank">
             <span class="show-for-sr">Follow FIU on Instagram</span>
             <span aria-hidden="true" class="fa-brands fa-instagram"></span>
         </a>
     </li>
     <li>
         <a href="https://www.linkedin.com/school/florida-international-university/" rel="noopener noreferrer" target="_blank">
             <span class="show-for-sr">Follow FIU on LinkedIn</span>
             <span aria-hidden="true" class="fa-brands fa-linkedin"></span>
         </a>
     </li>
     <li>
         <a href="https://www.facebook.com/floridainternational" rel="noopener noreferrer" target="_blank">
             <span class="show-for-sr">Follow FIU on Facebook</span>
             <span aria-hidden="true" class="fa-brands fa-facebook"></span>
         </a>
     </li>
     <li>
         <a href="https://twitter.com/fiu" rel="noopener noreferrer" target="_blank">
             <span class="show-for-sr">Follow FIU on Twitter</span>
             <span aria-hidden="true" class="fa-brands fa-twitter"></span>
         </a>
    </li>
     <li>
         <a href="https://www.youtube.com/user/FloridaInternational" rel="noopener noreferrer" target="_blank">
             <span class="show-for-sr">Follow FIU on YouTube</span>
             <span aria-hidden="true" class="fa-brands fa-youtube"></span>
         </a>
     </li>
     <li>
         <a href="https://flickr.com/photos/fiu" rel="noopener noreferrer" target="_blank">
             <span class="show-for-sr">Follow FIU on Flickr</span>
             <span aria-hidden="true" class="fa-brands fa-flickr"></span>
         </a>
     </li>
</ul>

Tables

Tables are a great way to organize information in a digestible way. They are typically used to display important dates and numerical data. Do not make tables with more than 4 columns (to accommodate smaller screens). Keep in mind that tables are not automatically screen reader friendly, so use with caution. Learn how to make a table.

Below are a couple of examples:

Open Page in Webforms Bookmarks

Editing your web form has never been easier with our bookmarks!

With the click of a button, users can now edit their web forms while viewing them live. No more having to sign in and search for your form, navigate to your web form and then use the bookmark to be sent to the exact page where your web form should be. Save time by creating your bookmark today!

Note: These instructions work for Google Chrome and Firefox browsers.

Creating the Open in Webforms bookmark

The Open in Webforms bookmark will open the given form in a new tab (click the bookmark while viewing any existing web form). You will be directed to the webforms main page with the specific form in view, not requiring you to search for it.

To create the Open in Webforms bookmark:

  1. Create a new bookmark in your browser by right-clicking on the bookmark bar and selecting Add Page.
  2. On the flyout, give your bookmark a name. We recommend naming it Open in Webforms.
  3. For the URL, copy and paste the code below:

javascript:(function() { var url = window.location.href; var urlObject = new URL(url); var id = urlObject.searchParams.get("id"); if (id) { var newUrl = "https://webforms.fiu.edu/manage_forms.php?id=" + id; window.open(newUrl); } })();

Creating a specified Edit in Webforms bookmark

You can create a more specific bookmark to take you to the different editing pages for any web form (Entries, Edit, Notifications, etc.).

To create the Edit in Webforms bookmark:

  1. Create a new bookmark in your browser by right-clicking on the bookmark bar and selecting Add Page.
  2. On the flyout, give your bookmark a name. We recommend using something similar to what page your bookmark is heading to, i.e., Edit in Webforms, Entries in Webforms, etc.
  3. For the URL, copy and paste the code with the specific page you want to go to:
  • Entries in Webforms

    javascript:(function() { var url = window.location.href; var urlObject = new URL(url); var id = urlObject.searchParams.get("id"); if (id) { var newUrl = "https://webforms.fiu.edu/manage_entries.php?id=" + id; window.open(newUrl); } })();

  • Edit in Webforms

    javascript:(function() { var url = window.location.href; var urlObject = new URL(url); var id = urlObject.searchParams.get("id"); if (id) { var newUrl = "https://webforms.fiu.edu/edit_form.php?id=" + id; window.open(newUrl); } })();

  • Notifications in Webforms

    javascript:(function() { var url = window.location.href; var urlObject = new URL(url); var id = urlObject.searchParams.get("id"); if (id) { var newUrl = "https://webforms.fiu.edu/notification_settings.php?id=" + id; window.open(newUrl); } })();

  • Info in Webforms

    javascript:(function() { var url = window.location.href; var urlObject = new URL(url); var id = urlObject.searchParams.get("id"); if (id) { var newUrl = "https://webforms.fiu.edu/form_info.php?id=" + id; window.open(newUrl); } })();


Once you're done, click save. Your new bookmark will appear on your bookmarks bar in your browser.

Happy editing!