Click here to Skip to main content
Click here to Skip to main content

Microsoft Content Management Server Web Author Dynamic Console

, 22 Jan 2004 CPOL
Rate this:
Please Sign up or sign in to vote.
A dynamic Web Author console for use in Microsoft Content Management Server (CMS).

Sample Image - cmsconsole.gif

Introduction

This collection of files creates a dynamic Web Author console for use in Microsoft Content Management Server (CMS). This dynamic console does not take up space in your web page. Authors click on an icon to expand or collapse the console. It contains 4 different themes (even a matrix theme!) for different look and feel. Users can design their own theme by customizing the included stylesheet.

File Description

  1. Theme1.gif, Theme2.gif, Theme3.gif, Theme4.gif.

    Screen dumps showing the dynamic console in various themes.

  2. UserControls/PublishingModeLink.ascx.

    This is an user control for displaying "Switch to Edit Site" and "Switch to Live Site". The switch is taken out of the console for more flexible and better user friendly placement.

  3. UserControls/DynamicConsoleTrigger.ascx.

    This is an user control for displaying an icon. When user clicks on the icon, the dynamic console shows or hides itself.

  4. Console/DynamicConsole.ascx.

    This is an user control for the dynamic console content.

  5. Console/DynamicConsole.js.

    This is the support JavaScript file for the dynamic console.

  6. images/console/on.gif, images/console/off.gif.

    These are the icons for (3).

  7. Style/console.css.

    This is the stylesheet for the dynamic console feature in Theme.gif.

  8. Extra stylesheet and image files are available in the Theme directories.

Installation Procedures

  1. Copy Console/* into your console directory.
  2. Copy both user controls into your user controls directory.
  3. In the page or user control where you would like to show the Publishing Mode link and console trigger icon, register the user controls. For example:
    <%@ Register
    TagPrefix="CMSUser" 
    TagName="PublishingModeLink"
    Src="../UserControls/PublishingModeLink.ascx"
    %>
    <%@ 
    Register
    TagPrefix="CMSUser" 
    TagName="DynamicConsoleTrigger"
    Src="../UserControls/DynamicConsoleTrigger.ascx"
    %>

    In the HTML tags where you want to show the link and icon, reference the controls. For example:

    <td align="right" nowrap><CMSUser:PublishingModeLink 
    id="PublishingModeLink" runat="server" /><CMSUser:DynamicConsoleTrigger 
    id="DynamicConsoleTrigger" runat="server" /></td>
  4. Copy console.css into your stylesheet directory or append the code into your site stylesheet. Use console.css in the Theme directories for other themes.
  5. Copy images/* into your images directory. Check the Theme directories for extra images.
  6. Check the Theme directories for the stylesheet to use. In the stylesheet, you need to specify the positions of the dynamic console. For example, the following says the console is positioned at 120 pixels from the top of the container/browser window and 10 pixels from the right of the container/browser window:

    .StyleConsoleLayer {
    ...
    right: 10;
    top: 120;
    ...
    }

    The following says the console is positioned at 120 pixels from the top of the container/browser window and 10 pixels from the left of the container/browser window:

    .StyleConsoleLayer {
    ...
    left: 10;
    top: 120;
    ...
    }
  7. If your site does not use a stylesheet or you would like to keep console.css as a separate file rather than appending the content into your site stylesheet, insert a stylesheet reference in the header section (<head></head>) of your page templates. For example:
    <head>
    ....
    <link rel="stylesheet" 
    href="../style/console.css">
    ....
    </head>

    Also change references to the console control from the default one to the dynamic console.

  8. Rebuild your site solution in Visual Studio and you are all set.

Note: By default, MCMS will render a base tag with the href of a template so that the relative links to images, scripts or stylesheets will resolve based on the template URL instead of the Posting URL seen in the browser. All the links are formatted relatively based on this assumption. If this is not the case, you may need to reformat the relative links or change them to absolute links.

History

  • V1.0 (2004.01.17) - New.
  • V1.1 (2004.01.23) - Error console now shows up correctly with updated styles.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Stephen Huen
Software Developer (Senior)
Canada Canada
A Microsoft Certified Professional Developer and Technology Specialist.
 
Experience and expertise in SharePoint 2013 / 2010 / 2007.
 
Role ranges from a developer in a multi-person team to a solution consultant with expert-level skills, leading a project to completion status.
 
Proven experience working effectively in a team environment and a self-managed environment.
Follow on   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411022.1 | Last Updated 23 Jan 2004
Article Copyright 2004 by Stephen Huen
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid