1
Self-help Resources / Support Options on my SmarterTrack home page
Question asked by Phillip Jones - November 23, 2015 at 1:28 PM
Answered
I see that on the home page of support.smartertools.com they have a nice right side bar with (Self-help Resources / Support Options) and also a great social network links row entitled "Like, Follow, Learn, Circle and Connect"
Is it possible to configure the "out of box" version to show these?
If not - how would I go about installing/creating these?

3 Replies

Reply to Thread
2
Andrea Rogers Replied
November 23, 2015 at 4:03 PM
Employee Post
Hi Phillip!
 
To accomplish both the sidebar and social media display, you'll need to add Custom CSS to your brand's Portal Options and adjust your brand's Main Portal Announcement text. 
 
In the Community thread below, you'll find an explanation and example from Derek showing how to separate the portal home page into columns. This is how you'll accomplish the side bar: http://portal.smartertools.com/community/a766/support-options-section-at-right-side-of-homepage.aspx
 
To get the social media display, you'll add your HTML in the Announcements area for that brand. Following a basic example, you'd have: 
<h3>Like, Follow, Learn, Circle and Connect</h3>

<div id="social_links">
<a class="facebook" href="YourFacebookURL.com" target="_blank" >Facebook</a> 
<a class="twitter" href="YourTwitterURL.com" target="_blank" >Twitter</a> 
<a class="blog" href="YourBlogURL.com" target="_blank" >Blog</a> 
<a class="youtube" href="YourYoutubeURL.com" target="_blank" >YouTube</a>
<a class="gplus" href="YourGooglePlusURL.com" target="_blank" >Google+</a>
<a class="linkedin" href="YourLinkedInURL.com" target="_blank" >LinkedIn</a>
</div>
You'd then add custom CSS to make this display correctly. See the example below. We reference a sprite, which is one image hosts multiple images and displays only the section you've specified via CSS. You'll want to create your own sprite with the social media icons you'd like to use. Be sure to have a before view and a hover view. Also keep in mind, you'll need to adjust your sprite reference numbers and perhaps the margin and padding as well. 
div#social_links 
{
    background:#fff url(YourSpriteImageSource.png) 0 -480px;
background-repeat: no-repeat;
    overflow:hidden;
    padding:0 20px;
    margin-top: 12px;
}
div#social_links a 
{
    display:block;
    width:45px;
    height:45px;
    float:left;
    margin-right:10px;
    text-indent:-999em;
}
div#social_links a.facebook:hover 
{
    background:url(YourSpriteImageSource.png) -20px -536px no-repeat;
}
div#social_links a.twitter:hover 
{
    background:url(YourSpriteImageSource.png) -75px -536px no-repeat;
}
div#social_links a.youtube:hover 
{
    background:url(YourSpriteImageSource.png) -185px -536px no-repeat;
}
div#social_links a.gplus:hover 
{
    background:url(YourSpriteImageSource.png) -240px -536px no-repeat;
}
div#social_links a.blog:hover 
{
    background:url(YourSpriteImageSource.png) -130px -536px no-repeat;
}
div#social_links a.linkedin:hover
{
    background:url(YourSpriteImageSource.png) -295px -536px no-repeat;
}
I hope this helps!!
Andrea Rogers
Communications Specialist
SmarterTools Inc.
(877) 357-6278
www.smartertools.com
0
James Jenkins Replied
March 31 at 1:19 PM
Would you please explain what you mean by "adjust your brand's Main Portal Announcement text"? Thanks.
0
Andrea Rogers Replied
April 13 at 1:02 PM
Employee Post
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. 
 
More info on utilizing the Zurb Foundation can be found here: http://foundation.zurb.com/sites/docs/
 

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.&nbsp;</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!
Andrea Rogers
Communications Specialist
SmarterTools Inc.
(877) 357-6278
www.smartertools.com

Reply to Thread