Hexagon Geospatial
MENU

Developers Knowledge Base

WebGIS enables powerful geospatial web applications and services that securely share your organization’s rich geospatial data, and provides tools to deeply examine spatial data and create value added products, on demand.
Showing results for 
Search instead for 
Do you mean 

Modifying Portal Skins (Advanced)

by Technical Evangelist on ‎10-16-2015 08:30 AM - edited on ‎01-05-2018 12:20 AM by Technical Evangelist (1,457 Views)

Motivation

"We haven’t found a way to change the mouse pointer in Portal map window from the hard coded ‘hand’. Do you know if this can be altered via coding in the SDK? The default.css seems to have some info but is not clear to me."

Most of the CSS definitions are coming from the DLLs as they are automatically concatenated and combined to make sure that there is only 1 CSS stylesheet.

You have 2 options here:

  • Overwrite CSS definitions from the DLLS in Default.css using !important CSS instruction (you can use firebug/chrome developer tools for that)
  • Overwriting the necessary definitions by using mechanism designed for overriding portal skins.

Modifying portal styles using Default.css

In case your styling changes are minimal, just overwrite the necessary styles in Default.css or a custom stylesheet added to the ASPX with the !important marker.

Modifying portal styles using "Style Overwrites" mechanism

For more advanced cases you can use a mechanism that has been created for custom styling. In order to use this mechanism, it is necessary to have "style_overwrites" folder in the Application root folder. Since Geospatial Portal 16 SDK EP04 this folder is already present in the SDK solution. In order to modify portal skins in earlier Geospatial Portal SDK Builds, please see the Obtaining style_overwrites section.

  1. Create a folder style_overwrites in portal root directory
  2. Uncomment these lines in web.config
    <add key="StyleOverwritesFolder" value="style_overwrites" />
  3. Uncomment ExtJS related sections to also apply ExtJS styles modifications:
        <section name="extjs35settings" type="ExtJS.ExtJsConfigurationSection"/>
      <extjs35settings>
        <cssOverwrites>
          <add key="ExtJS.ext.resources.css.ext-all.css" value="style_overwrites/ExtJS.ext.resources.css.ext-all.css"/>
          <add key="ExtJS.ext.resources.css.ext-all-lightgray2013.css" value="style_overwrites/ExtJS.ext.resources.css.ext-all-lightgray2013.css"/>
          <add key="ExtJS.ext.resources.css.ext-all-hexagon2015.css" value="style_overwrites/ExtJS.ext.resources.css.ext-all-hexagon2015.css" />
          <add key="ExtJS.ext.resources.css.xtheme-lightgray2013.css" value="style_overwrites/ExtJS.ext.resources.css.xtheme-lightgray2013.css"/>
          <add key="ExtJS.ext.resources.css.xtheme-black.css" value="style_overwrites/ExtJS.ext.resources.css.xtheme-black.css"/>
          <add key="ExtJS.ext.resources.css.xtheme-darkgray.css" value="style_overwrites/ExtJS.ext.resources.css.xtheme-darkgray.css"/>
          <add key="ExtJS.ext.resources.css.xtheme-gray.css" value="style_overwrites/ExtJS.ext.resources.css.xtheme-gray.css"/>
          <add key="ExtJS.ext.resources.css.xtheme-olive.css" value="style_overwrites/ExtJS.ext.resources.css.xtheme-olive.css"/>
          <add key="ExtJS.ext.resources.css.xtheme-purple.css" value="style_overwrites/ExtJS.ext.resources.css.xtheme-purple.css"/>
          <add key="ExtJS.ext.resources.css.xtheme-slate.css" value="style_overwrites/ExtJS.ext.resources.css.xtheme-slate.css"/>
          <add key="ExtJS.Controls.Panel.css" value="style_overwrites/ExtJS.Controls.Panel.css"/>
        </cssOverwrites>
      </extjs35settings>
  4. I advise to use only those overwrites that are necessary and delete all other files from style_overwrites folder.
  5. To know which are necessary you can check CSS name that you want to modify using firebug or chrome developer tools and then find the file containing definition
  6. Files are named according to the skin that they are using (they contain skin name) or use default one (without any skin name)

Explanation - How does it work?

  1. Portal combines the final CSS from particular stylesheet resources embedded in the portal DLLs
  2. Portal uses just the stylesheets required for a particular layout (ASPX) – it is cached and optimized
  3. “StyleOverwritesFolder” is used to overwrite the stylesheets present in portal DLLs as embedded resources
  4. Contents of the “overwriting” file is used instead of the embedded resource contents
  5. CSS files in the StyleOverwritesFolder must be named as the resources in the DLLs
    Intergraph.WebSolutions.Core.WebClient.Controls.Map.MapControlBase.MapControlBase.css in our case
  6. The actual modification is in the Intergraph.WebSolutions.Core.WebClient.Controls.Map.MapControlBase.MapControlBase.css:
    .wc_map {position:relative;overflow:hidden;cursor:default, auto;}
  7. URLs to images can be relative
  8. There is some difference in ExtJS and Intergraph* CSS files - in one URLs need to be relative and in the other they need to refer to the application root.

Deal with caching

Since Geospatial Portal uses several layers of caching in order to provide good performance, the changes introduced in overwritten CSS files may not be visible immediately.

In order to see the effects of your changes it is necessary to invalidate cache on all the levels.

  1. Stop IIS
  2. Delete ASP.NET cache folder
    c:\windows\microsoft.NET\Framework64\v4.0.30319\temporary ASP.NET Files\<instance name>
  3. Delete the cache folder
    <Application root>\App_Data\Cache\<portal instance name>
  4. Start IIS
  5. Clear browser cache (yes!)
  6. Launch the portal with modified CSS

Example

style_overwrites contents

For this case our final style_overwrites folder is going to contain just these files:

  • Intergraph.WebSolutions.Core.WebClient.Controls.Map.MapControlBase.MapControlBase.css - CSS resource which we are overwriting
  • drag.cur - cursor file
  • hand.cur - cursor file

In order to achieve better performance it is recommended to remove all the other files.

This way, Portal CSS concatenation engine will use Intergraph.WebSolutions.Core.WebClient.Controls.Map.MapControlBase.MapControlBase.css from style_overwrites folder instead of the one present in resources from the DLL. All other files are removed for performance reasons - thus Portal engine won't replace any other resources from the DLLs with ones from the filesystem.

Modified CSS

The CSS code contains our customization. Please compare the default version coming from the Portal:

.wc_map,
.wc_map_layer,
.wc_map_measure,
.wc_map_edit {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.wc_map {
    position: relative;
    overflow: hidden;
    cursor: url('./style_overwrites/Intergraph.WebSolutions.Core.WebClient.Controls.Map.MapControlBase.Images.hand.cur'), auto;
}
.wc_map_drag {
    cursor: url('./style_overwrites/Intergraph.WebSolutions.Core.WebClient.Controls.Map.MapControlBase.Images.drag.cur'), auto;
}
.wc_map_layer,
.wc_map_measure,
.wc_map_edit {
    position: absolute;
    top: 0;
    left: 0;
}
.wc_pointer_events_invisible {
    pointer-events: none;
}

With the one present in style_overwrites:

.wc_map,
.wc_map_layer,
.wc_map_measure,
.wc_map_edit {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.wc_map {
    position: relative;
    overflow: hidden;
    cursor: default, auto;
}
.wc_map_drag {
    cursor: url(Intergraph.WebSolutions.Core.WebClient.Controls.Map.MapControlBase.Images.drag.cur), auto;
}
.wc_map_layer,
.wc_map_measure,
.wc_map_edit {
    position: absolute;
    top: 0;
    left: 0;
}
.wc_pointer_events_invisible {
    pointer-events: none;
}

The modified file above doesn't contain logic for the "hand" cursor, just as it was requested in the example case.

Obtaining the "style_overwrites" folder contents

For your convenience we have prepared Style_overwrites-15.00.0208.zip containing all extracted styles from Portal 15.00.0208 (these should actually work on most of the 15.* builds). You can just copy style_overwrites folder from style_overwrites-15.00.0208.zip package to the portal root directory and follow the instructions above.

 

This section describes how to prepare style_overwrites folder for Geospatial Portal SDK builds earlier than Geospatial Portal 16 SDK EP04. Use the scripts from "Scripts.zip" attachment.

Prepare style_overwrites this way:

  1. Install Python interpreter.
  2. Copy your portal’s bin folder to a temporary location
  3. Copy contents of attached “scripts.zip” there
  4. You may need to modify ildasm path in the prepare_resources.bat
  5. Run prepare_resources.bat in the bin folder
  6. It creates the “resources” folder
  7. Copy its contents to style_overwrites
Overview