Customers which have deployed Noodle on their own networks have a greater freedom with various aspects of Noodle. This page discusses what Noodle Administrators can control and how.

• External Cascading Style Sheet (CSS)

---

External Cascading Style Sheet (CSS)

Noodle's fonts, colours and layouts are controlled by a Cascading Style Sheet that controls how Noodle is displayed. This section will discuss how to change this document to provide greater freedom for customizing Noodle.

Creating a Linking to a new .CSS Stylesheet

To begin, an external .CSS stylesheet should be created that can be modified to adjust the appearance of Noodle. The default stylesheet can be retrieved as follows:

• Download it from here. If the link opens the content into your browser, copy and paste the contents as CustomStylesheet.CSS
• Replace IntraNet.po in your browser address bar with Stylesheet.po - this will either download the .CSS file to your computer, or, open it up in your browser in which case it should be saved in a similar manner to the step above.

Once the Stylesheet has been downloaded it should be placed in a relevant location on the Noodle server.

Once the location for the Stylesheet has been decided, we need to reference it from Noodle.

Open up the intranet.conf configuration file from your installation directory, inside /enhydra/cfg. Depending on your installation, the line to link to an external link may already exist. If so it will look like this:

#CustomScript = "C:/CustomScript.css"

If the above line does not exist in your intranet.conf file then you should add it. The portion inside the quotes ("") should point to the external CSS file.

Customizing the External Stylesheet

Once the external stylesheet has been created and linked to, we can now begin customizing Noodle by altering the elements within the stylesheet. Be aware that due to the nature of different browser rendering, using certain fonts, styles and colours can negatively impact the appearance of Noodle. It is recommended to test Noodle either using a non-production server, or by replacing the CSS at a time outside of regular business hours when disruption to users will be at a minimum.

It is advised to make a copy of the section to be changed in the CSS file to enable the original look to be reverted back to if the chosen fonts, colours or sizes do not work as expected. Do this by copying the line to be altered to end of the CSS file and placing a comment character at the start of the line to prevent it being read by the browser. This looks as follows:

/* Tag { element 1: declaration; element 2: declaration;} */

It is also recommended to create a section at the end of the stylesheet for all of the custom declarations as this will make it easier to manage the elements being edited.

Elements and their effects on Noodle

This section will discuss some of the elements in the stylesheet and what parts of Noodle will be affected by changing their properties. Many property will alter the appearances of many different parts of Noodle, so please bear that in mind when altering this file.

• body, select, input, table {property: declaration; ...}
  This element allows the font type, font colour, font size and background to be set for the main section with Noodle. This will alter the background for Pages (Portlet, HTML and Content View), Address Books, Blogs, Databases, Calendars, Discussion Forums, Folders, Links Managers, Photo Albums, Question MNanagers and Task Managers.
• .section {property: declaration; ...}
  This element allows the Navigation Sections background to be altered by setting to either a color or an image using a URL link.
• .contentbrowser {property: declaration: ...}
  This element allows a background color or image to be used for the Navigation background.
• .custommenu {property: declaration: ...}
  This element alters the colour and decoration for text used in Navigation Sections. It does not, however, change the text for the My Profile, Instant Messenger, What's New, People or Deleted Items links.
• a#whatIsNewLink {property: declaration: ...}
  This element allows the What's New link to be customized. The font and font-colour and decoration can be changed.
• a#peopleName {property: declaration: ...}
  This element allows the People link to be customized. The font and font-colour and decoration can be changed.
• a#MessagesLink {property: declaration: ...}
  This element allows the Instant Messenger link to be customized. The font and font-colour and decoration can be changed.
• a#profileLink {property: declaration: ...}
  This element allows the My Profile link to be customized. The font and font-colour and decoration can be changed.
• a#trashFolder {property: declaration: ...}
  This element allows the Deleted Items link to be customized. The font and font-colour and decoration can be changed.
• .portletBody {property: declaration: ...}
  This element allows Portlet backgrounds to be set to either a colour or using an image. Border, overflow-x, padding and the 2 width property are required declarations that should be left in any custom CSS.
• .portletHeader {property: declaration: ...}
  This element allows Portlet backgrounds to be set to either a colour or using an image. Height, margin-top and padding are required declarations that should be left in any custom CSS.
• .bodyPage {property: declaration: ...}
  This element changes the background for the main area of Noodle that displays applications. The padding-right declaration is required and should remain in any customized stylesheet.
• a#adminLinkHeadline {property: declaration: ...}
  This element allows the red [Administration] link appearance to be altered. The font, font colour and decoration can all be specified.
• a.whitelinks:link, a.whitelinks:visited, a.whitelinks:hover {property: declaration: ...}
  These 3 elements control the appearance of the Help, Feedback and Logout links located at the top-right corner of the Top Bar. The font, font colour and decoration can all be specified.

This is only a small number of the available CSS elements that can be modified to alter the appearance of Noodle. It is recommended that any changes to the CSS be done by someone with a good knowledge of CSS, HTML and also of the Noodle interface.