Skinning SmarterTools Products

This article explains an older method of implementing a custom skin on SmarterTools products. More recent versions of the products include a Custom CSS section which eliminates the need for custom skinning. For more information on using custom CSS with newer versions, please see the Knowledge Base.

To do custom skinning, knowledge of CSS is necessary, as is file access on the server itself. Because of the possibility of user-created errors, skinning is at your own risk. Proper backups are recommended.

First, determine a name for your skin. In this example, we will call the skin CUSTOMSKIN.

Next, under the installation folder in the MRS tree, make copies of the following folders, using the new skin name:

  • MRS\App_Themes\Default -> MRS\App_Themes\CUSTOMSKIN
  • MRS\MasterPages\Default -> MRS\MasterPages\CUSTOMSKIN

At this point, you should be able to switch your interface over to the new skin from within the interface. It won't look different, but it's a good starting point to ensure that you copied everything correctly.

Edit the CSS files within your custom skin. For easiest upgrades in the future, the recommendation is to make a new CSS file under App_Themes\CUSTOMSKIN\CSS\Common called “zzz.css”. That way, you can just add your own overrides to styles without worrying about finding places in the style sheet to update or tracking them between versions.

Note that skins must be recreated EVERY TIME you upgrade your product. If you do not do this, errors will occur in the web interface. To properly upgrade a custom skin, do the following:

  1. Make a backup of your zzz.css file (or any other files you modified)
  2. Install the update of the SmarterTools product
  3. Delete your CUSTOMSKIN folders and recopy from Default
  4. Copy back in your zzz.css file and make any other custom changes you had performed to specific files

To delete a skin, log into the application and change the skin selection, then delete the two CUSTOMSKIN folders. To commit the change, it may be necessary to reset the IIS application pool or the included web server.

 

Feedback

Add Feedback
For SmarterMail you have the option for Custom CSS under Personalization. You can add the following in to add logos to Login page and as well as your email page.

------------------------------------------

#PageHeader h1{

width: 159px;

height: 76px;

padding: 10px !important;

text-indent: -999em;

margin: 0 0 0 45px;

background: url(../images/misc/YOUR LOGO.png) no-repeat center center;

}

.infopanel{margin-top: 175px !important;position: relative !important;}

.infopanel:before{

content: "";

display: block;

width: 350px;

height: 165px;

position: absolute;

top: -175px;

background: url(../images/misc/YOUR LOGO.png) no-repeat center center;

}

------------------------------------------
Make sure to change width / height to match your logo size.

Ricky Hignite (April 28, 2014 at 10:02 AM)
Always info for old versions, never the current. Even the upgrade to a new major version knowledge article uses version 12 as the the latest, when it's currently 13.3.

Why not include a link to the current version rather than "see the knowledge base", which is what gets a user to this page? Hyper linking is the reason the HTTP protocol was invented.

Mike (March 22, 2015 at 5:48 AM)
Mike, the beginning paragraph of this article denotes that it is for an older version and that newer information can be found in the knowledge base. The steps in this article apply to each product; however, the newer steps each have their own article based on the product. For this reason, it's easier to simply do a search for the product you're using and CSS (ex. "SmarterTrack CSS") to bring you to the article you need.

I'll assume that you need the SmarterMail article, as that's the product you mentioned. The two articles that will help you with the CSS modifications can be found below:

Change CSS for a Domain: http://portal.smartertools.com/kb/a2974/change-css-for-a-domain.aspx

Use "Inspect Element" to Determine CSS Modifications: http://portal.smartertools.com/kb/a2959/use-inspect-element-to-determine-css-modifications.aspx

Andrea Rogers (March 23, 2015 at 8:21 AM)

Add Feedback