Customer Examples

We've compiled the following examples for those seeking inspiration for their own Instant Website.

DescriptionCustom CSSCustom Javascript
Adding links to your footer
$('.footer').prepend('<a href="https://google.com" >Google</a> | <a href="https://facebook.com" >Facebook</a><br>');

Header background to black with white text.


/* Changes header to black background and white text */
.expanding-nav,
.nav a,
.header {
  background-color: #000;
  color: #FFF;
}

Use preferred font, code block style and highlight support link in a different colour.

 

/* import preferred font family */
@import 'https://fonts.googleapis.com/css?family=Ubuntu';
h1, h2, h3 {
    font-family: "Ubuntu";
}

/* preferred format for code block */
.code {
 border: solid 1px #e1e4e5;
 padding: 10px 0px 10px 20px;
}
.syntaxhighlighter-pre {
 overflow: hidden;
}

/* highlight Support link in top nav */
.expanding-nav li:last-child {
  color: #0c8805;
}
<!-- Facebook Pixel Code -->
	<script>
	      !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
	          n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
	      n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
	      t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
	          document,'script','https://connect.facebook.net/en_US/fbevents.js');
	      
	      fbq('init', '9764708191141xx', { em: 'insert_email_variable,' });
	      fbq('track', 'PageView');
	  </script>
	<noscript>
		<img height="1" width="1" style="display: none"
			src="https://www.facebook.com/tr?id=976470819114134&ev=PageView&noscript=1" />
	</noscript>
	<!-- DO NOT MODIFY -->
	<!-- End Facebook Pixel Code -->


Add an image carousel.

  • Confluence page needs a 'div' macro.
  • Class=fadein on the div.
  • Add images within that div.
/* image carousel / slideshow c/o snook.ca */
@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein {
  position:relative;
  height:672px;
  width:1107px;
}
.fadein p {
  position:absolute;
  left:0;
  right:0;
  opacity:0;
  animation-name: fade;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}
.fadein p:nth-child(1) { animation-delay: 0s;  }
.fadein p:nth-child(2) { animation-delay: 3s;  }
.fadein p:nth-child(3) { animation-delay: 6s;  }

Make the search icon appear on a non-white background

  • Replace #888 with your foreground colour
  • Replace #FFF with your background colour

Example to the right shows a black background with a white loupe.

.expanding-nav .search > button {
   background: #000;
   border: 2px solid #fff;
}
 
.expanding-nav .search > button:after {
    background: #FFF;
}

Large information panels

.expanding-nav,
.nav a,
.header {
  background-color: #54a369;
  color: #FFF;
}
element.style {
    font-size: 30.0px;
    line-height: 30.0px;
}

.expanding-nav .search > button {
   background: #54a369;
   border: 2px solid #fff;
}

.expanding-nav .search > button:after {
    background: #FFF;
}

.title {
    font-size: 1.375em;
    color: #2679b5;
}

.confluence-information-macro {
    padding: 20px 20px 20px 25px;
    border: 1px solid #eee;
    border-radius: 3px;
    box-shadow: inset 5px 0 0 0 #00b1cf;
    margin-bottom: 30px;
    position: relative;
    padding-left: 100px;
}

.confluence-information-macro.confluence-information-macro-tip {
    box-shadow: inset 5px 0 0 0 #1ab578;
  padding-left: 100px;
}

p {
    color: #5f5f5f;
}

h1:first-child, .wiki-content
h2:first-child, .wiki-content
h3:first-child, .wiki-content
h4:first-child, .wiki-content
h5:first-child, .wiki-content
h6:first-child {
    ; color:#5f5f5f;
  margin-top:0px;
}

.top-logo {
    background-position: 0,6%
}

element.style {
}

.wiki-content
.confluence-embedded-file-wrapper
.confluence-embedded-image[height],
.wiki-content .confluence-embedded-file-wrapper
.confluence-embedded-image[width] {
    max-width: none;
  margin-left:-80px;
  position: absolute;
}

.confluence-information-macro.confluence-information-macro-tip .title {
    color: #4b5;
  font-size: 30px;
  margin-left: -70px;
}

.title {
    font-size: 1.375em;
    color: #2679b5;
  font-size: 30px;
  margin-left: -70px;
}

Embedding the JSD Widget

Replace XX-XX-XX with your generated data-key

JSD Widget
document.write("<script data-jsd-embedded='' data-key='XX-XX-XX' data-base url='https://embedded-jsd.atlassian.io' src='https://embedded-jsd.atlassian.io/assets/embed.js' ></script>")

Adding accept cookie popup for GDPR compliance



.cookie-message {
  position: fixed;
  color: white;
  font-size: .8em;
  line-height: 1.5em;
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: 25em;
  padding: 1rem;
  background: black;
  z-index: 9999; 
}
$(document).ready(function() {
    jQuery.ajax({
         url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery.cookieBar/0.0.3/jquery.cookieBar.min.js',
        dataType: 'script',
        success: function(){
            $.cookieBar();
        },
        async: true
    });
});

Using Auth0 to add authentication.

You will need to sign up with Auth0 and provide your client ID and OAuth domain.

You will also need to create users for authentication or integrate it identity provider of your choice.


jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true
    });
}

$.loadScript('https://cdn.auth0.com/js/auth0/9.5.1/auth0.min.js', function(){
  $.loadScript('https://cdn.auth0.com/js/lock/11.9.1/lock.min.js', function() {
    var lock = new Auth0Lock(
      'YOUR_CLIENT_ID',
      'YOUR_OAUTH_DOMAIN',
      { 
         closable: false, 	
  		 auth: {
           redirectUrl: window.location.origin,
           responseType: "token",
           sso: true
         }
      }
    );
    // Listening for the authenticated event
    lock.on("authenticated", function(authResult) {
      // Use the token in authResult to getUserInfo() and save it to localStorage
      lock.hide();
      
      lock.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          lock.show();
          return;
        }

        localStorage.setItem('accessToken', authResult.accessToken);
        localStorage.setItem('profile', JSON.stringify(profile));
      });
    });
    if (localStorage.getItem('accessToken') != null) {
      lock.getUserInfo(localStorage.getItem('accessToken'), function(error, profile) {
        if (error) {
          lock.show();
          return;
        }
      });
  	} else {       
    	lock.show();
    }
  });
});