Hi James, I'm happy to! The HTML and CSS displayed above in this thread actually shows how to mimic the social media links underneath "Like, Follow, Learn, Circle and Connect." Adding the links to the rightside of the Home page is actually a simpler process and does not require you to enter anything in your Custom CSS section, since the CSS class is built into the SmarterTrack foundation.
Instead, you just need to add your text and links to the Main Portal Announcement and use the Source button in the editor toolbar to enter in-line classes that apply to your text. Here's an example:
Say that you want to add a short message to the left side of your portal and a sidebar of links to the right. In your Main Portal Announcement textbox (which is found at Settings > Brands > Edit [Brand Name] > Custom Messages tab), you can use the editor toolbar to format that text however you would like, so that it looked something like this:
Then, click on the Source button in the editor to view the HTML directly. At this point we'll need to add CSS classes to our text in order to adjust its display on your Home page. We'll do this by enclosing each section (left vs right) with a <div> tag that contains the class we need.
For the items that should be on the lefthand side of the screen, like your Welcome message, we'll enclose the text in the following div tag: <div class="col-sm-8"></div>
The Source view of the text that belongs on the lefthand side of the page will end up looking like this:
<div class="col-sm-8">
<h3>Welcome to my Support Portal!</h3>
<div>This is a brief paragraph about my company and how our products/services can help you! Use this Support Portal for product support by submitting a ticket or accessing the Knowledge Base, New Items, or Community! Click on the links to the right for extra more support resources.</div>
</div>
For the items that should be on the righthand side of the screen, like your links for extra resources, we'll enclose the text in the following div tag: <div class="col-sm-4"></div>
The Source view of the text that belongs on the lefthand side of the page will end up looking like this:
<div class="col-sm-4">
<h4><strong>Support Resources</strong></h4>
<ul>
<li><a href="http://help.smartertools.com">Online Help</a></li>
<li><a href="http://youtube.com">Youtube Videos</a></li>
</ul>
</div>
When you click Save and go to your Portal, the final result would look like so:
If you want a template that you can play around with, you can copy the code below and paste it into the Source view of your Main Portal Announcement. Just keep in mind that this is working off a nested grid structure based on rows and columns. By default, there are 12 columns and N rows. Ensure you enclose any text in the proper class, and adjust the number ratio (8:4, 6:6:, 3:9, etc.) until you get the spacing you prefer. Those numbers are simply specifying the number of columns you want your text to flow across, and it should total 12.
Template for Home Page Sidebar
Enter this code in the Source view of your HTML editor in the Main Portal Announcement of your Brand. This will allow you to create a home page that has text spanning 2/3's of the page and text spanning 1/3 of the page.
<div class="col-sm-8">
<h3>Welcome to my Support Portal!</h3>
<div>This is a brief paragraph about my company and how our products/services can help you! Use this Support Portal for product support by submitting a ticket or accessing the Knowledge Base, New Items, or Community! Click on the links to the right for extra more support resources. </div>
</div>
<div class="col-sm-4">
<h4><strong>Support Resources</strong></h4>
<ul>
<li><a href="http://help.smartertools.com">Online Help</a></li>
<li><a href="http://youtube.com">Youtube Videos</a></li>
</ul>
</div>
I hope this helps!