Cireson Portal

How To: Customize the Cireson Portal

This article applies to: Cireson Portal, version 9Ā and above.

Customizing the Style

You can customize the style of the portal using Cascading Style Sheets (CSS). These customization changes are applied on top of the default style so they will always override what is provided out of the box even if the out of the box CSS code changes. You can use CSS to change things like colors, font type, font size, layout, and many other things.

CSS Overrides

To change the style:

  • Navigate to the C:\inetpub\CiresonPortal\CustomSpace.
  • Open a text editor (ideally one designed to edit CSS files such as Visual Studio or Notepad++) as an elevated administrator and then open the custom.css file. This is where you put your custom CSS to override the styles.
  • To make things easy (and fun!) to get started we have provided a few different ā€œtheme packā€ sample css files in the same folder:
    • Custom.hellokitty.cs
    • Custom.itmonkey.cs
    • Custom.sample.css
  • You can copy the contents of these sample files into the custom.css file and save the custom.css file to make the style changes.
  • To revert the style changes you can just delete the contents of the custom.css file.
  • Use CTRL + F5 to refresh the browser and clear the cache to show the updated CSS.
  • Once you have tested the changes and want to push them out to all other users, open the file C:\inetpub\CiresonPortal\bin\versions.json in the elevated administrator text editor and increment the version number and save it. This will cause all of the user's browsers to update their browser cache of .js and .css files.
  • To find the name of the class you want to override, you can do the following:
  • Navigate to the page where you can see the page element you want to override the style of.
    • Right click on the element you want to change the style of an choose 'Inspect Element' (or similar).
    • That will open the developer panel and show you the HTML for that element.
    • Oftentimes there will be a class name in the HTML such as 'announcements-title' or an ID such as 'announcementDisplayString'
    • You can add a CSS override for a class to custom.css using a format like this: .announcements-title {Ā //your CSS here }
    • You can add a CSS overrides for an ID to custom.css using a format like this: #annoucementDisplayString { //your CSS here }
    • Tip: If you are using Chrome, in the developer panel where the HTML is being displayed you can right click on a HTML element and Copy CSS Path.
  • To learn more about CSS you can check out the freeĀ W3 Schools site.
  • Below are some common CSS overrides that you can just copy and paste into custom.css


Common CSS Overrides

Hiding the Is Private Checkbox in the Action Log

.action-log-private{
display:none;
}

Hiding the Favorite Request Offerings Panel on the Home Page

On original home page:

.clearfix > div:nth-child(1){
display:none;
}

On alternate home page:

.blocks > div:nth-child(2){
display:none;
}

Hiding the Top Knowledge Articles Panel on the Home Page

On the alternate home page:

.blocks > div:nth-child(1){
display:none;
}

Hiding the Top Requests Panel on the Home Page

On the alternate home page:

.blocks > div:nth-child(3){
display:none;
}

Hiding the Search Title and Search Bar on the Home Page

This will work on either the original or the alternate home page to hide either the title or the search bar.

To hide the title:

.search-title{
display:none;
}

To hide the search bar:

.search-wrapper{
display:none;
}

Making Announcements Wider

If you want to make each announcement panel a little wider you can use this CSS override, however the announcement scrolling may get an undesired offset:

.announcements .announcements-menu .announcements-wrapper-outer .announcements-wrapper .announcement-item {
width:475px
}

* Widths greater than 475px are not recommended

Using InstaTheme

You can quickly restyle the portal to a particular color scheme using LESS (more info).

  • Navigate to the C:\inetpub\CiresonPortal\CustomSpaceExamplesĀ .
  • Open the custom.less file in a text editor.
  • Change theĀ @clickable-color attribute to the color you want clickable elements to be, example links nav icons.
  • Change theĀ @heading-colorĀ attribute to the color you want header element to be, example background color of heading barĀ 
  • Change the@selection-color attribute to the color you want selected elements to be, example dropdown selection.
  • Change theĀ @status-colorĀ attribute to the color you want status elements to be, example work item status label background color .
  • Change theĀ @urgent-colorĀ attribute to the color you want urgent elements to be, example text color for announcements.
  • Copy the contents of the file into the left panel of the compiler tool located here: http://lesscss.org/less-preview/
  • Copy the contents of the right panel into custom.css and save the file.
  • Use CTRL + F5 to refresh the browser and clear the cache to show the updated CSS.

Overriding Display Strings

If you donā€™t like the display string that is shown someplace in the portal, you can override it with your own display string. This will always override the strings that are provided out of the box even when the product is upgraded from one version to the next.

SeeĀ this KB article:Ā How to Override a Localization Display String

Adding a Custom Logo to the Login Screen

You can add a custom logo to the login screen by replacing the file at the location below with a custom file. Login screen is only displayed with the Forms Authentication option enabled and does not show for Windows Authentication.

C:\inetpub\CiresonPortal\CustomSpace\login.png

Adding a Custom Navigation Tab

You can add custom navigation tabs using the Navigation Settings menu. See theĀ  How To Configure Navigation Settings Ā article for more information.

Additional Knowledge Articles on Customization