Custom CSS (Color Position Size) - Septima/spatialsuite-s4 GitHub Wiki

S4's may be controlled via params in cbinfo_xxx.xml.

Only create the parameters if you need to change color, size or position.

    <!-- =================================== -->
    <!-- S4 ui params. Params are optional   -->
    <!-- =================================== -->
    <!-- Color: Standard, Blue or Dark -->
    <param name="s4.color">Dark</param>
    <!-- Make detail header small -->
    <param name="s4.header.small">True</param>
    <!-- Adjust to top bar -->
    <param name="s4.input.topbar">True</param>

Advanced:

You may also create a custom s4.css and change anything you want

1: Create a file named appbase/spatialmap/css/custom/s4.css (You may want to copy the standard s4.css which you will find in modules/thirdparty/septima/s4/css/s4.css)

2: Edit the custom s4.css file to reflect your changes. Most often it's the top of the search box you want to change

  .inputcontainer {
      top:5px;
  }

3: Update your custom tool (s4-plugin-xxx) to include your custom s4.css

<file type="css" name="/css/custom/s4.css" />