The landingPageTemplate.html template
To customize the landing page in the Spotfire clients, you use an
.html file. In the cobranding.config template, the file is
named
landingPageTemplate.html.
Guidelines
The following are rules and tips to keep in mind when you write your own landing page.
- Links
- The attribute
targetin for links is automatically set to_blank. - Images
-
- To use a locally
stored image file, embed the file in the cobranding package. Then in the
.html file refer to the image file
starting the variable name
[%AppPath%]. For example:/[%AppPath%]/myImage.png - To use an image
stored on the web, refer to the image with an absolute URL. For example:
http://example.com/myImage.png
- To use a locally
stored image file, embed the file in the cobranding package. Then in the
.html file refer to the image file
starting the variable name
Sample landing page template
This is a sample customized landing page HTML template, that you can copy and modify to get started with your own landing page.
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap"
rel="stylesheet"
/>
<style>
.customLandingPageTemplate {
height: 100%;
display: flex;
overflow: hidden;
}
.leftSide {
display: flex;
flex-direction: column;
align-items: center;
min-width: 768px;
}
.leftSideContent {
display: flex;
flex-direction: column;
max-width: 500px;
flex-basis: 47%;
justify-content: flex-end;
}
.rightSide {
display: flex;
justify-content: center;
flex: 1;
}
.rightSideContent {
display: flex;
flex-direction: column;
max-width: 402px;
}
.textContainer {
display: flex;
flex-direction: column;
flex-basis: 25%;
justify-content: flex-end;
}
.primaryText {
font: 30px "Roboto";
font-weight: 500;
margin-bottom: 32px;
color: #313336;
}
.secondaryText {
font: 24px "Roboto";
font-weight: 300;
color: #313336;
}
.imageContainer {
flex-basis: 25%;
display: flex;
}
.frame {
display: flex;
align-items: flex-end;
}
.buttonsContainer {
align-items: flex-end;
display: flex;
flex-basis: 10%;
}
.button {
height: 32px;
border: none;
padding: 0px 16px;
cursor: pointer;
border-radius: 16px;
font: 13px "Roboto";
font-weight: 500;
}
.button:focus {
outline: 0;
}
.primaryButton {
background-color: #7289f9;
color: white;
margin-right: 32px;
}
.primaryButton:hover {
background-color: #5d6efa;
}
.primaryButton:active {
background-color: #3050ef;
border: none;
}
.secondaryButton {
background-color: white;
color: #313336;
border: 1px solid #d1d4de;
}
.secondaryButton:hover {
background-color: #edf0f7;
}
.secondaryButton:active {
background-color: #ebefff;
color: #3050ef;
}
.horizontalLineContainer {
display: flex;
align-items: center;
height: 112px;
}
.horizontalLine {
flex: 1;
background: #b8c8fd;
height: 1px;
}
.menuItemsContainer {
display: flex;
}
.leftMenuItem {
flex: 0.5;
display: flex;
margin-right: 56px;
}
.rightMenuItem {
flex: 0.5;
display: flex;
}
.menuIcon {
flex: 0.3;
display: flex;
align-items: center;
}
.menuText {
flex: 0.7;
display: flex;
flex-direction: column;
justify-content: center;
}
.featuredContent {
font: 10px "Roboto";
font-weight: 500;
color: #61646b;
margin-bottom: 12px;
}
.linkText {
margin-bottom: 16px;
font: 13px "Roboto";
font-weight: 500;
}
.linkStyle {
color: #7289f9;
display: flex;
font: 13px "Roboto";
font-weight: 500;
}
.linkStyle:hover {
fill: #5d6efa;
color: #5d6efa;
}
.linkStyle:active {
fill: #3050ef;
color: #3050ef;
}
.linkIcon {
fill: #7289f9;
margin-left: 8px;
}
.linkStyle:hover svg {
fill: #5d6efa;
}
@media screen and (max-width: 900px) {
.leftSide {
display: none;
}
}
</style>
</head>
<body>
<div class="customLandingPageTemplate">
<!-- Left Side -->
<div class="leftSide">
<div class="leftSideContent">
<div class="textContainer">
<div class="primaryText">
<label>Left side text</label>
</div>
<div class="secondaryText">
<label
>This part of the landing page is usually hidden under the flyout
menus.</label
>
</div>
</div>
</div>
</div>
<!-- End Left Side -->
<!-- Right Side -->
<div class="rightSide">
<div class="rightSideContent">
<div class="imageContainer">
<div class="frame">
<img src="/[%AppPath%]/Images/EmptyImage.png" />
</div>
</div>
<div class="textContainer">
<div class="primaryText">
<label>Right side content</label>
</div>
<div class="secondaryText">
<label
>The right side of your landing page is visible directly when
you open the application.</label
>
</div>
</div>
<!-- Buttons & Links Examples -->
<div class="buttonsContainer">
<button class="button primaryButton"
onclick="window.open('https://spotfi.re',
'_blank');">Primary button</button>
<button class="button secondaryButton"
onclick="window.open('https://spotfi.re',
'_blank');">Secondary button</button>
</div>
<div class="horizontalLineContainer">
<div class="horizontalLine"></div>
</div>
<div class="menuItemsContainer">
<div class="leftMenuItem">
<div class="menuIcon">
<!-- SVG example -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<path
d="M27.32,0H4.681A4.681,4.681,0,0,0,0,
4.681V27.319A4.681,4.681,0,0,0,4.681,
32H27.32A4.68,4.68,0,0,0,32,27.319V4.681A4.68,
4.68,0,0,0,27.32,0ZM13,7a3,3,0,1,1-3,3A3,3,0,
0,1,13,7ZM26.017,25H6.882c-.84,
0-1.13-.544-.65-1.216l3.325-4.632a1.24,1.24,0,0,
1,1.941-.16l1.284,1.268a1.307,1.307,0,0,0,
1.993-.123l5.249-6.689a.887.887,0,0,1,
1.609.146l5.219,10.082C27.231,24.407,26.857,
25,26.017,25Z"
fill="#fff"
/>
</svg>
</div>
<div class="menuText">
<div class="featuredContent">FEATURED CONTENT</div>
<div class="linkText">You can add links to useful material</div>
<a href="https://spotfi.re/community"
target="_blank" class="linkStyle">
Link
<svg
class="linkIcon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
>
<path
d="M7,2V3H3V13H13V9h1v4.25a.749.749,0,
0,1-.75.75H2.75A.75.75,0,0,1,2,
13.25V2.75A.75.75,0,0,1,2.75,2Z"
/>
<polygon points="14 7 9 2 14 2 14 7" />
<rect
x="6.252"
y="5.505"
width="7.495"
height="0.99"
transform="translate(-1.314 8.828) rotate(-45)"
/>
</svg>
</a>
</div>
</div>
<div class="rightMenuItem">
<div class="menuIcon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<path
d="M27.32,0H4.681A4.681,4.681,0,0,0,0,
4.681V27.319A4.681,4.681,0,0,0,4.681,
32H27.32A4.68,4.68,0,0,0,32,27.319V4.681A4.68,
4.68,0,0,0,27.32,0ZM13,7a3,3,0,1,1-3,3A3,3,0,
0,1,13,7ZM26.017,25H6.882c-.84,
0-1.13-.544-.65-1.216l3.325-4.632a1.24,1.24,0,0,
1,1.941-.16l1.284,1.268a1.307,1.307,0,0,0,
1.993-.123l5.249-6.689a.887.887,0,0,1,
1.609.146l5.219,10.082C27.231,24.407,26.857,
25,26.017,25Z"
fill="#fff"
/>
</svg>
</div>
<div class="menuText">
<div class="featuredContent">FEATURED CONTENT</div>
<div class="linkText">You can add links to useful material</div>
<a href="https://spotfi.re/community"
target="_blank" class="linkStyle"
>Link
<svg
class="linkIcon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
>
<path
d="M7,2V3H3V13H13V9h1v4.25a.749.749,0,
0,1-.75.75H2.75A.75.75,0,0,1,2,
13.25V2.75A.75.75,0,0,1,2.75,2Z"
/>
<polygon points="14 7 9 2 14 2 14 7" />
<rect
x="6.252"
y="5.505"
width="7.495"
height="0.99"
transform="translate(-1.314 8.828) rotate(-45)"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Right Side -->
</div>
</body>
</html>