TIBCO Mashery® - Portal Customization

Table of Contents

• Customization Options
• Controlling available features
• Navigation Links
• Adding a Custom Portal Theme
• Required resources
• Portal Settings
• Custom JavaScript File Inclusion
• Inline JavaScript
• Custom CSS Files
• Footer Copyright
• Home Page
• Adding a Background
• Other Customizations

Customization Options

The Developer portal can be customized to be whatever you want it to be. Depending on your API program, it may just need a few updates to provide your corporate colors, and a few company logos and that's enough. Or maybe you need to have a completely unique look and feel, with clever scripting and dynamic interaction. All of this can be achieved through the features of the Developer portal.

This guide is designed to show you how to do the basics and set up the portal to do basic functions with your own look and feel. If you need to go further than this we recommend engaging with your Mashery Customer Success team to discuss what's possible and how we can help.

Controlling available features

Navigate to the Manage -> Portal menu, then select Content.

This page allows you to control which of the built-in features is available to your developer partners.

Where appropriate you are able to set moderation options for user comments and posts.

Navigation Links

Navigate to Manage -> Portal Settings. Scrolling down the page you have two areas where you can change the links displayed in the header area and in the footer area.

Under Primary navigation, you control the header area.

This is the default set of links that will display as:

Below the Primary Navigation, you can set up the links that appear in the footer area.

Which will display as:

Note that entries without a Location will not display in the footer link area.

Adding a Custom Portal Theme

The developer portal provides all the basic functionality but with a basic look and feel. The following instructions add a custom theme that is mobile-friendly and extensible.

Required resources

Download, Resources below, and save to your local machine the following files:

• header.js - This file is uploaded with a suffix of txt, save the file and rename it as header.js.
• main.js - Again has a suffix of .txt, save and rename to main.js.
• main.css - Save to the local machine.

Upload the Files via the file manager. Manage -> Content. Click on the File Manager icon on the top line.

Click Upload File and select each of the files previously downloaded.

Portal Settings

Navigate to the Manage -> Portal page.  Make the following edits to the page.

Custom JavaScript File Inclusion

Add the following:

• Head JavaScript File URL:  /files/header.js
• Body JavaScript File URL: /files/main.js

Inline JavaScript

Head JavaScript

 </script><!-- Close off the open script tag -->  <!-- Force latest available IE rendering engine and Chrome Frame (if installed) --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <!-- Mobile Screen Resizing --> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Icons --> <!-- Learn More: https://github.com/audreyr/favicon-cheat-sheet --> <link rel="shortcut icon" href="/files/favicon.ico"> <link rel="icon" sizes="16x16 32x32" href="/files/favicon.ico">  <!-- Reopen the script tag --> <script>   Body JavaScript  // Run script initializations when the Portal is ready portalReady(function () {     astro.init();     fluidvids.init({         selector: ['iframe', 'object'], // runs querySelectorAll()         players: ['www.youtube.com', 'player.vimeo.com'] // players to support     });     houdini.init({         selectorToggle: '.collapse-toggle',     });     rightHeight.init({         selector: '.js-right-height',         selectorContent: '.js-right-height-content',     });     smoothScroll.init({         selector: '.js-scroll',         selectorHeader: '.js-scroll-header',     });     stickyFooter.init({         selector: '.js-sticky-footer',     });     tabby.init({         selectorToggle: '.js-tab',         selectorToggleGroup: '.tabs',         selectorContent: '.tabs-pane',         selectorContentGroup: '.js-tabs-content',     });     addTableHeaders(); });

Custom CSS Files

Update the main style sheet.

Screen Stylesheet URL: /files/main.css

Footer Copyright

Add the following HTML

 <footer class="bg-muted padding-top padding-bottom js-sticky-footer">     <div class="container">         <div id="nav-footer"></div>         <p>Copyright <script>document.write(new Date().getFullYear())</script>. All rights reserved.</p>         <p><a target="_blank" href="http://www.mashery.com/"><img alt="Made by Mashery" src="/public/Mashery/images/masherymade.png"></a></p>     </div> </footer> 

Click Save !

Home Page

On the Manage -> Content page, expand the tree on the left-hand side under Custom Pages.  Look for the entry that is in bold text. This is the main landing page.

Ensure that you turn off the TinyMCE Editor (as shown above), so that the page is displayed as raw HTML, not as a WYSIWYG editor. This is needed to ensure that the formatting in the incoming HTML is preserved. (It may be a good idea to save the existing HTML, just in case you want to go back to the original portal layout).

On the Body tab replace any existing HTML with the code below:

 <script> 	portalReady(function () { 		fullWidth(true); 	}) </script>  <div class="bg-muted bg-hero padding-top-large padding-bottom-large" id="landing-hero"> 	<div class="container text-center"> 		<h1 class="text-hero">Unlock the value of your digital assets faster</h1> 		<ul class="list-inline text-large link-plain"> 			<li><a href="http://tibco.lookbookhq.com/tibco-mashery-30-day-free-trial"><svg xmlns="http://www.w3.org/2000/svg" class="icon" height="16" width="16" viewBox="0 0 16 16"><path d="M14.724 2.239c-.09-.352-.525-.639-.968-.639H2.244c-.444 0-.879.287-.968.639l-.161.961h13.769l-.16-.961zM15.53 4H.47a.464.464 0 0 0-.462.508l.738 9.335c.03.315.296.557.613.557H14.64a.617.617 0 0 0 .613-.557l.738-9.335A.464.464 0 0 0 15.529 4zM6.4 11.2v-4l3.506 2-3.506 2z"/></svg> Welcome to the Trial</a></li> 			<li><a target="_blank" href="https://https://community.tibco.com/s/article/TIBCO-Cloud-Integration-Getting-Started-with-Mashery"><svg xmlns="http://www.w3.org/2000/svg" class="icon" height="16" width="16" viewBox="0 0 16 16"><path d="M15.558 2.974l-4.8-2.4a.799.799 0 0 0-.716 0L5.538 2.826 1.053 1.331A.8.8 0 0 0 0 2.09v10.401c0 .303.171.58.442.715l4.8 2.4a.805.805 0 0 0 .716 0l4.504-2.251 4.485 1.495A.798.798 0 0 0 16 14.091V3.689a.795.795 0 0 0-.442-.715zM6.4 4.185l3.2-1.6v9.41l-3.2 1.6v-9.41zM1.6 3.2l3.2 1.066v9.329l-3.2-1.6V3.2zm12.8 9.782l-3.2-1.067v-9.33l3.2 1.6v8.797z"/></svg> Quick Start Guide</a></li> 			<li><a href="https://community.tibco.com/s/article/tibco-mashery-community-wiki"><svg xmlns="http://www.w3.org/2000/svg" class="icon" height="16" width="16" viewBox="0 0 16 16"><path d="M16 9.056c0 2.067-1.715 3.744-3.83 3.744H2.893c-1.598 0-2.894-1.267-2.894-2.83 0-1.561 1.295-2.828 2.894-2.828.117 0 .23.01.343.022a4.006 4.006 0 0 1-.046-.605C3.19 4.262 5.095 2.4 7.446 2.4c1.926 0 3.551 1.25 4.077 2.966.21-.034.426-.053.647-.053 2.114 0 3.829 1.674 3.829 3.743z"/></svg> Community Wiki</a></li> 		</ul> 	</div> </div>   <div class="container padding-top padding-bottom text-center"> 	<div class="row" data-right-height> 		<div class="grid-dynamic" data-right-height-content> 			<a class="link-block" href="/member/register"> 				<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xlarge icon-secondary icon-link" height="21" width="21" viewBox="0 0 21 21"><path d="M18.576 4.961c-.528-3.126-3.381-5.215-6.372-4.663-2.992.551-5.519 2.957-4.991 6.085.112.673.428 1.726.801 2.483L2.58 16.975c-.201.299-.314.839-.254 1.198l.35 2.07a.643.643 0 0 0 .735.54l1.592-.295c.344-.062.781-.365.97-.671l2.149-3.477.019-.023 1.455-.269 2.51-4.073c.824.146 2.008.097 2.707-.033 2.99-.552 4.291-3.854 3.763-6.981zm-2.652 1.604c-.823 1.228-1.663.363-2.838-.499-1.175-.859-2.242-1.388-1.42-2.617.823-1.228 2.442-1.528 3.619-.667 1.176.86 1.461 2.554.638 3.782z"/></svg> 				<h3 class="h2 no-margin-bottom no-padding-top">Register</h3> 				<p>Get an access key and usage reports for your apps.<br><span class="link-block-styled">Learn more...</span></p> 			</a> 		</div> 		<div class="grid-dynamic" data-right-height-content> 			<a class="link-block" href="/docs"> 				<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xlarge icon-gray icon-link" height="21" width="21" viewBox="0 0 21 21"><path d="M20.368 7.786L12.552 5.69 11.184.586c-.114-.426-.572-.674-1.022-.555L.632 2.585c-.449.12-.72.565-.606.991L3.417 16.23c.114.426.571.675 1.02.553l3.794-1.015-.517 1.93c-.114.426.156.872.606.99l8.516 2.283c.449.121.905-.127 1.021-.555l3.118-11.638c.113-.426-.157-.871-.607-.99zM1.715 3.813l8.222-2.201 3.043 11.359-8.222 2.201L1.715 3.813zm14.747 15.573L9.307 17.43l.563-2.102 4.096-1.099c.449-.119.722-.564.607-.99L12.99 7.331l6.244 1.713-2.772 10.344z"/></svg> 				<h3 class="h2 no-margin-bottom no-padding-top">Read the Docs</h3> 				<p>Learn how to call our API from your programs.<br><span class="link-block-styled">Learn more...</span></p> 			</a> 		</div> 		<div class="grid-dynamic" data-right-height-content> 			<a class="link-block" href="/io-docs"> 				<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xlarge icon-tertiary icon-link" height="21" width="21" viewBox="0 0 21 21"><path d="M6.005 15.488c-.248 0-.498-.087-.697-.265L-.005 10.5l5.608-4.985a1.051 1.051 0 0 1 1.395 1.57l-3.842 3.416 3.547 3.152a1.05 1.05 0 0 1-.697 1.836zm9.392-.003l5.608-4.985-5.313-4.723a1.05 1.05 0 0 0-1.395 1.57l3.547 3.153-3.842 3.415a1.05 1.05 0 0 0 1.394 1.571zm-4.912 1.488l2.1-12.6a1.05 1.05 0 0 0-2.071-.346l-2.1 12.6a1.05 1.05 0 0 0 2.07.346z"/></svg> 				<h3 class="h2 no-margin-bottom no-padding-top">Make a Call</h3> 				<p>Use our interactive docs (IO Docs) to make a call.<br><span class="link-block-styled">Learn more...</span></p> 			</a> 		</div> 		<div class="grid-dynamic" data-right-height-content> 			<a class="link-block" href="mailto:trialsupport@mashery.com"> 				<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xlarge icon-primary-dark icon-link" height="21" width="21" viewBox="0 0 21 21"><path d="M6.09 12.81V6.3H2.1C.945 6.3 0 7.245 0 8.4v6.3c0 1.155.945 2.1 2.1 2.1h1.05v3.15L6.3 16.8h5.25c1.155 0 2.1-.945 2.1-2.1v-1.911a.972.972 0 0 1-.21.022l-7.35-.001zM18.9 1.05H9.45c-1.155 0-2.1.945-2.1 2.1v8.4h7.35l3.15 3.15v-3.15h1.05c1.155 0 2.1-.944 2.1-2.1v-6.3c0-1.155-.945-2.1-2.1-2.1z"/></svg> 				<h3 class="h2 no-margin-bottom no-padding-top">Get Trial Support</h3> 				<p>Ask questions and trade tips by sending an email to our trial support team.<br><span class="link-block-styled">Learn more...</span></p> 			</a> 		</div> 	</div> </div>  <div class="bg-primary"> 	<article class="container"> 		<div class="row"> 			<div class="grid-two-thirds float-center"> 				<h2>Relevant documents and links</h2> 				<ul> 					<li><a href="https://https://community.tibco.com/s/article/tibco-masheryr-io-docs-configuration-guide">IO Docs Setup Guide</a> - Find out about some of the more advanced functionality around IO Docs</li> 					<li><a href="https://https://community.tibco.com/s/article/tibco-mashery-oauth-20-implementation-guide">OAuth 2 Accelerator Guide</a> - Understand how to accelerate your path to adding OAuth to your API</li> 					<li><a href="http://support.mashery.com/docs/read/mashery_api">TIBCO Mashery Platform API</a> - Learn how to programmatically control your TIBCO Mashery area</li> 					<li><a href="http://developer.mashery.com/apis">API Examples</a> - See some examples of successful API programs powered by Mashery.</li> 				</ul> 			</div> 		</div> 	</article> </div>

Click Save

Navigate to the portal and reload (if already open). This should now display a fully responsive page as below:

Or viewed on a mobile or small form factor device:

Adding a Background

This sample Theme allows you to add a background image behind the splash area. In the HTML of the home page there is a <DIV> tag as follows:

 <div class="bg-muted bg-hero padding-top-large padding-bottom-large" id="landing-hero">

This means that we can add a background image to the area via CSS.

 #landing-hero {     background-image: url('url-to-your-images.jpg'); }

This can be achieved in two ways:

• As a global override. Navigate to Manage -> Portal. On the Portal Setup page under Inline CSS, add the CSS to the "Last minute" override

• As a page override. Navigate to Manage -> Content. Select the page in the page tree on the right-hand side of the page. Click on Advanced options and add the CSS to the Inline CSS for this page section:

Other Customizations

• Customize Your Terms of Use
• Configure Email Notifications
• Rendering Documentation Pages Using Markdown
• Portal Code Snippets

? Back to the Mashery Wiki

header.js.txt

main.js.txt

main.css