Skip to Content

SAP HANA Cloud Portal enables easy creation of business sites. This holds very true in all respect.

The sites created from SAP HANA Cloud Portal can be designed exactly as per business needs that too with a few mouse clicks.

Here we will concentrate on how the theming and branding can be achieved as per the customers’ requirements.

Log in to the below url using your sdn credentials, and you land up to your SAP HANA Cloud space.

https://account.hanatrial.ondemand.com/

/wp-content/uploads/2013/07/1_244148.png

You are redirected to the cockpit. Go to Services

/wp-content/uploads/2013/07/2_244149.png

Navigate to SAP HANA Cloud Portal.

/wp-content/uploads/2013/07/3_244150.png

Your SAP HANA Cloud Portal Site Directory opens up: https://cloudportaltrial-pxxxxxtrial.hanatrial.ondemand.com/portal/index.html

Now we will create a site using “New Site” button on Site Directory.

/wp-content/uploads/2013/07/5_244155.png

/wp-content/uploads/2013/07/6_244156.png

So here comes our first SAP HANA Cloud Portal site:

/wp-content/uploads/2013/07/7_244157.png

The blog by Andy Silvey gives more insight on how to work with your SAP HANA Cloud Portal site.

In this blog, my intention is to take you through the theme customization of the Portal sites as per requirement.

Step 1. Download the default theme.

For this, we go back to our SAP HANA Cloud Portal Site Directory. Go to Themes.

/wp-content/uploads/2013/07/8_244158.png

We see the default SAP HANA Cloud Portal Theme CSS already present there. Click on the row selection.

Click Download button. We download this file in our local system.

/wp-content/uploads/2013/07/9_244159.png

Step 2: Rename it (mytheme.css). Now open it in a Word Pad.

Step 3: The default .css file contains few editable theme parameters. We need to modify them as per our needs.

For example, we can change the font of our site with the “.site-font” parameter.

/* Name of site font */

.site-font{

font-family:

}

To have a look and feel as per their present environment, our customers wanted to change the background cloud image of the SAP HANA Cloud Portal site. Some has their own image and others want no image at all.

We can have a background of our choice by setting up the properties of parameter “.site-background”. To achieve this, we need to specify the data-Uri of the image of our choice in “background-image” property. We can also choose to remove this property not to have any image at all.

/* Site background properties */

.site-background{

    background-image: url(<Data URI of the image>) !important;

    background-size:

    background-color: #f2f2f2;

    background-repeat: repeat-x;

    background-position: 0 37px;

}

We want our SAP HANA Cloud Portal site exclusively meant for our customers and thus would like to have the customer logo in our site. This can be easily achieved again by specifying the data-Uri of the image in background-image property of site-logo.

/* Site logo */

.site-logo {

      background-image: url(<Data URI of the image>) !important;

    width: 61px;

    padding-left: 10px;

    padding-right: 10px;

}

The site header properties can be customized using parameters: “.site-header-border”, “.site-header-title”, and “.site-header-background”.

Some other parameters that can be edited to get the desired look and feel are:

  • .page-navigation-bar-background  /* Color of page navigation bar */
  • .page-navigation-bar-text            /* Font color in page navigation bar */
  • .selected-page-text        /* Font color in selected page name in page navigation bar  */
  • .selected-page-underline /*Underline color of page name when selected in page navigation bar */
  • .widget-header                /* Colors of widget header */
  • .widget-header-fading-area       /* Color range of fade area in widget header */
  • .widget /* Frame color of widgets */
  • .widget /* Color of widget border */
  • .pop-up-message            /* Properties of dialog popup windows */
  • .pop-up-message-text  /* Font color in dialog popup windows messages */
  • .pop-up-message-header /* Font color in header of dialog popup windows */
  • .pop-up-message-buttons /* Properties of buttons in dialog popup windows */

Example for a site that converts an image to data URI:

Step 4: Once we are done with the modifications, we add our custom theme to the SAP HANA Cloud Portal.

Click on “Add Theme” link in the Themes tab of our SAP HANA Cloud Portal.

/wp-content/uploads/2013/07/10_244160.png

Provide details on the pop-up.

Name and CSS file (have to upload from the local file system where we have saved our modified css file) are mandatory fields.

/wp-content/uploads/2013/07/11_244161.png

Go back to Site Directory. Open site for editing. Click on 3rd icon on right hand side – Design Settings.

/wp-content/uploads/2013/07/12_244162.png


We see here all the themes that available for our SAP HANA Cloud portal. Select your custom theme as the default theme for your Cloud Portal Site.

You can have different themes for the different sites under the same SAP HANA Cloud Portal space.

/wp-content/uploads/2013/07/13_244163.png

Now as we see our site, it has a company logo and also the cloud background image has disappeared.

Thus we have succesfully implemented our own custom theme to our SAP HANA Cloud Portal site.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

    1. Mickey Agarwala Post author

      Hello Yariv Zur,

      I am able to view the images and no one else reported this problem. If you send me your email id, I can send you the pdf version.

      Regards,

      Mickey.

      (0) 

Leave a Reply