Edit1 Summary
ScreenConnect contains many user customizable items. Integrating ScreenConnect with your company appears more professional and provides a more seamless experience for your customers. This article will describe the types of changes that can be made.
Edit2 More Information
Edit2.1 Changing the Visual Theme
ScreenConnect ships with several Visual Themes, which change the appearance of the ScreenConnect pages.
The Visual Themes selector is located on the Appearance tab of the
Administration page.
Once you have selected a Visual Theme and saved, you will need to hit F5 to refresh the page and see the changes.
Edit2.2 Creating a new Visual Theme
Themes are defined as sub directories of your App_Themes directory typically installed at the following location:
C:\Program Files\ScreenConnect\App_Themes
Create a new sub directory for your new theme. For a variety of reasons, it is easiest to keep the name to letter and number characters and avoid spaces.
Your theme directory will contain one or more
Cascading Style Sheet (CSS) files that contain style information. All files in the directory will be automatically registered on each web page. Generally, you should import one or more base CSS files from the App_Themes root directory to provide you with a base set of styles. Browse existing themes to get an idea of best practices for theme creation.
Once your theme is created, it will appear in the Visual Theme selection box on the Appearance tab of the
Administration page.
Edit2.3 Changing text and graphics
Most changes to text and graphics can be made with Resource Strings. These strings specify text messages, locations of images, and visibility of certain page elements.
The Resource Strings table is located on the Appearance tab of the
Administration page.
Some of the more important Resource Strings are listed below:
CreateSessionPanel.CodeChecked
CreateSessionPanel.EmailChecked
CreateSessionPanel.ListedChecked | Whichever one of these is set to 'true' will appear checked by default when creating new sessions. |
CreateSessionPanel.CodeVisible
CreateSessionPanel.EmailVisible
CreateSessionPanel.ListedVisible | All set to 'true' by default. You can set one or two of these to 'false' to constrain the type of sessions that can be created. |
CreateSessionsPanel.EmailSubject
CreateSessionsPanel.EmailBody | Use these to format the email sent to users when inviting them to sessions via email. |
LogoPanel.Heading
LogoPanel.HeadingVisible | Set HeadingVisible to 'true' and set heading text if you would rather have simple text rather than an image in the heading. |
LogoPanel.ImageUrl
LogoPanel.ImageVisible
LogoPanel.ImageAlternateText | Use to override the default ScreenConnect logo on the top left of the site. |
| Page.Title | The title that appears in the browser window. |
ProductPanel.LinkUrl
ProductPanel.LinkMessage | Change link at bottom left to something more suitable for your company-- unless you'd like to provide us with free advertising. |
Note: Certain Resource Strings, mainly ones with true/false values, enforce a format. Invalid values can break your installation.Edit2.4 Editing source files
ScreenConnect is provided with most web source code uncompiled. The source code is mostly
ASP.NET, which is a mixture of
HTML markup and in this case,
C# program code.
Any changes made to these files will be automatically compiled and immediately reflected in the live site.
In best practice, your changes should be commented, annotated, and demarcated. You'll inevitably want to upgrade your ScreenConnect installation, and we will likely make changes to these pages also. Knowing where you've made changes is critical to merge your changes with ours. You'll see below we've added comments before and after our change:
<asp:PlaceHolder runat="server" Visible="<%$ Resources:Default, DisclaimerPanel.Visible %>">
<h2 runat="server" innerhtml="<%$ Resources:Default, DisclaimerPanel.Heading %>" />
<p runat="server" innerhtml="<%$ Resources:Default, DisclaimerPanel.Message %>" />
</asp:PlaceHolder>
<!–– JHM custom change below to add logo image ––>
<img src="http://blog.locaweb.com/en/wp-content/uploads/2010/03/featuritis-curve.jpg" />
<!–– end of change ––>
<h2 runat="server" innerhtml="<%$ Resources:Default, JoinPanel.Heading %>" />
<p runat="server" innerhtml="<%$ Resources:Default, JoinPanel.Message %>" />
Our installer will not magically merge your changes with ours. If left in the directory, your files will be preserved, but changes to our APIs could result in runtime errors. Follow the steps in the article
PRB-0005: Upgrading causes runtime errors to resolve these problems.
Edit2.5 Embedding ScreenConnect in another website
You will need access to your website source code to accomplish this integration.
Insert the ScreenConnect frame into your website with the
HTML IFRAME element.
The simplest use is the following:
<iframe src="http://live.screenconnect.com/" />
Output:
Obviously we need to fix this up a bit. First let's expand the box:
<iframe src="http://live.screenconnect.com/" style="width: 800px; height: 300px;">
Output:
The default ScreenConnect theme may not be appropriate for embedding. Specify a different theme by using a URL parameter. The theme 'Embedded' is designed for embedding within another website:
<iframe src="http://live.screenconnect.com/?Theme=Embedded" style="width: 800px; height: 300px;"></iframe>
Output:
Finally, let's remove the border around the ScreenConnect box:
<iframe src="http://live.screenconnect.com/?Theme=Embedded" style="width: 800px; height: 300px; border-width: 0px;"></iframe>
Output:
Edit3 References