How to Customize Your Portal Homepage Using The Homepage Editor

Your portal homepage can take on any look and feel that your imagination can conceive. Ideally, you can ensure your portal ties in seamlessly with your brand or creates a distinct message that you want to send to suppliers who access your system. This tutorial provides the basic instruction on how to customize your homepage using the Homepage Editor.

Important Note: Using this tool requires at least a basic knowledge of HTML programming as it is a “blank canvas” on which you can project your ideas.

Navigation

To access the Homepage Editor, use the Manage System Settings and access the Homepage Editor function in the Administrative Console

Creating a new homepage

from the Homepage Editor console, Use the +Add Version button to open a new, blank homepage canvas. This is where you will create your new homepage by entering HTML syntax that represents your design.

There are 3 important elements that you should consider including in your final design as they can affect the ability for users to access your site or register in the system. They are as follows:

/registration/registration.aspx. (Allows companies to register in your portal)
/myaccount/login.aspx (Allows users to login to your portal)
/faq/faq.aspx (Links to the FAQ Page)

Your new homepage will need a Version Name that is unique, and you can enter the HTML content in the main content area.

Once you are done creating your homepage, you can also Preview before you save. Remember to click on the Submit button to save your efforts. The system will give you the option to Save as a Draft or to Publish.

If you select Saving as Draft, you may return and continue working on your new homepage without making available to the public.

If you Publish your work, it will immediately make this your new homepage and it will set any other versions into draft mode.

If you want to revert back to the default SupplierGATEWAY homepage, you can do so anytime by clicking on the Revert to SG’s Home Page button.

You may create different versions of the Homepage and hold them as drafts in the Home Page editor console.

The action buttons on the right provide controls for previewing, editing, publishing and deleting your Homepage.

Remember, when you publish a homepage, the previously live version is automatically set to draft mode (as you can only one published homepage at a time).

Sample HTML Code

Here is some sample HTML code to give you an idea of what the syntax could look like for your homepage design. If you know HTML, this is very straightforward. Remember, this is an example only – the sky is the limit!

Sample Homepage HTML

<!DOCTYPE html>

<title>knowledge base</title>

<style>

.navbar {

border-radius: 0;

border: unset;

margin-bottom: 0;

}

.navbar-default {

background-color: black;

border-color: black;

}

@media only screen and (max-width: 900px) {

.mb-supplier-diversity {

font-size: 20px !important;

margin-left: 10px !important;

}

</style>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<div>

Acme Global Supplier Management System

</span>

</div>

<li><a style="color: white" href="/registration/registration.aspx">Begin Registration</a></li>

<li><a style="color: white" href="/myaccount/login.aspx">Portal Login</a></li>

<li><a style="color: white" href="/faq/faq.aspx">Support</a></li>

</ul>

</div>

</nav>

</div>

</div>

</body>

</html>

Menu

Articles in this section

In this article

Comments

Menu

Articles in this section

How to Customize Your Portal Homepage Using The Homepage Editor

In this article

Related articles