You can add custom html to your portals and custom CSS – and this is mainly for advanced customers. For those customers who need something out of the box simple, we provide pre-built landing pages for both the advanced portal and the public portal. You can use what we have as the default, or you can customize them. Just go to Admin/My Portal and either Advanced Portal or Public Portal tabs.

These settings are for those who want to build out a stand alone support site that is not embedded within their website. This is rare.

General HTML/CSS edits on the overall portal can be made under Admin/My Portal/General tab.

There are two sections on the General tab for customization.

  • Portal Header HTML/CSS: This box serves two purposes. (1) if you want to customize your portal header with custom html, you can add that in here. Note if you are embedding the portal into an iframe, you typically would not include any header coder since the site you are placing it in probably already contains a header. (2) you can edit the overall CSS of the portal. If your portal form does not include any CSS, you can copy/paste a standard setup below.
  • Portal Footer HTML: Allows you to define the footer of your portal. This is typically ignored when you are placing your portal within an iframe on your site, otherwise, it is where you would typically put your copyright info, etc.
  • Add a logo: In the Header HTML/CSS box, you can use the img tag and point to the location of your logo on your website. Here is an example, but please note, the center, width and height tags are optional.
<center><img src="http://www.yourwebsite.com/logo.jpg" width="90" height="40"/></center>

Editing The Portal CSS

The customer portals can be extensively customized with CSS. To implement your own CSS, copy the code below and edit it as you wish. Then go to Admin/My Portal/General tab and edit the box labeled Portal Header HTML / CSS.

Please make sure you include a closing script tag in the HTML!

Here is the entire CSS file you can copy/paste into your portal options:

<style type="text/css">
<!-- For the Advanced Portal Login page: -->
       .Login_Prompt
        {
            <!-- Text for the login prompt (username/password) -->
        }
        .Login_Response
        {
            <!-- Username and password that user enteres -->
        }
       .Login_OtherText
        {
           <!-- Text at bottom ("Please keep me logged in") -->
        }
        .Login_LoginBorder
        {
         <!-- The border around the login prompt box.  Default is a blue box -->   
        }  
        .button
        {
         <!-- The styling for the input buttons throughout the site -->
        }
        .Portal_ContentBackground
        {
         <!-- The background color for the content areas in the portal -->
        }
<!--CSS for the Advanced Portal -->
       .Portal_GridTitle a
        {
         <!-- Title text (field names) for all of the grids-->
         <!-- needs !important tag after the color -->
        }
 .Portal_GridTitle {
         <!-- Default text color for the grid items-->
         <!-- needs !important tag after the color --> 
 }
 .ContentHeader {
  <!-- Controls the header are above all content areas-->
 }
        .Portal_GeneralText
        {
            <!-- Default text for everything else in the portal-->
        }
      .Portal_TicketTitleStyle
        {
          <!-- Field name for new tickets and ticket details -->
        }
        .Portal_TicketDataStyle
        {
         <!-- Field data for new tickets and ticket details page --> 
        }   
        .Portal_DetailsStyle
        {
           <!-- Style for the details section of the Ticket Details page (comments)-->
        }
 <!-- CSS for the Basic Portal (ticket submission portal) -->
      .BasicPortal_MainTableStyle
        {
            <!-- The contents of the basic portal are in a table, and this defines that table.  Generally you don't want to change this. -->
        }
        .BasicPortal_FieldDescriptionStyle
        {
            <!-- Field description for basic portal ("Your Name", "Your E-mail", etc) -->
        }
        .BasicPortal_FieldValueStyle
        {
            <!-- Format for the data the user enters for the various fields --> 
        }
        .BasicPortal_DirectionsStyle
        {
            <!-- Style for the directions text at the top.  Note that you can get rid of the directions entrely by setting visibility:hidden -->
        }     
<!-- CSS For the Public Knowledge Base -->
.PublicKB_PageTitle
 {
 <!-- Text for the title of the page ("Muroc Systems, Inc. Knowledge Base").  You can get rid of this by settnig visibility:hidden -->
 }
.SearchBox {
 <!-- Searchbox around the search input -->
 }
        .Portal_ContentBackground
        {
         <!-- The background color for the content areas in the knowledgebase -->      
        }        
        .PublicKB_SearchResultsBorder
        {
           <!-- Border around the results text -->
        }        
        .PublicKB_TicketDetailBorder
        {
            <!-- Border around the ticket detail section -->
        }
        .PublicKB_SearchTextStyle
        {
          <!-- Style of the search text -->
        }        
        .PublicKB_TicketDetailStyle
        {
          <!-- Field data --> 
        }
        .PublicKB_SearchResultsTable
        {
          <!-- The heading of the search results -->
        }
        .PublicKB_TicketsTable
        {
          <!-- Table the ticket information is presented in -->
        }
       .PublicKB_SearchResultsTicketName
        {
            <!-- Title of the ticket in the search results section -->
        }
        .PublicKB_SearchResultsTimesViewed
        {
            <!-- Number of times the article has been viewed -->
        }
        .PublicKB_SearchResultsLasstModified
        {
            <!-- When the ticket was last modified -->
        }        
</style>

Need more help with this?
Don’t hesitate to contact us here.

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.