Announcement

Collapse
No announcement yet.

CSS Hacks

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    CSS Hacks

    With the custom CSS (html/custom.css) the UI can be changed a bit, bearing in mind that tweaks can easily be broken by changes and/or have unforeseen effects.

    Change the number of columns on the grid view
    - set the percentage to the target width of one column (default is 25% = four columns):
    Code:
    .col-xl-3 {
      flex: 0 0 20% !important;
    }
    Hide location and group in list view
    Code:
    .col-md .device_panel_location_text {
      display: none !important;
    }
    Hide location and group in grid view
    Code:
    form .device_panel_location_text {
      display: none !important;
    }
    Remove excess bottom space in grid view
    Code:
    .mb-5 {
      margin-bottom: 2rem !important;
    }
    Any others?

    #2
    Where and into what file would this code go?

    Comment


      #3
      Put them in (homeseer root)/html/custom.css

      Comment


        #4
        Reduce space usage by the filter panel by increasing the width and reducing the size of the filter items:

        Code:
        /* Fix huge filter area */
        div.chips {
          padding-bottom: 0.5rem !important;
        }
        
        div.chips div.chip {
          margin-bottom: 0.2rem !important;
          margin-right: 0.5rem !important;
          font-size: 10px !important;
          height: 24px !important;
          line-height: 26px !important;
        }
        
        div.chip i.close {
          line-height: 26px !important;
        }
        
        div.col-lg-2.col-2 {
          flex: 6% !important;
          max-width: 6% !important;
        }
        
        div.col-lg-3.col-8 {
          flex: 35% !important;
          max-width: 35% !important;
        }
        Last edited by rge; August 14, 2020, 01:44 PM. Reason: Modified to prevent labels being small on the device information/edit page

        Comment


          #5
          Thanks

          Comment


            #6
            You don't even have to shutdown HS4. Just copy and paste what you want into html\custom.css. This guy rge has a future here.

            Comment


              #7
              Quick update - changed the CSS to prevent the device edit page also having small category labels. (line 6 added div.chips at the start)

              Comment


                #8
                Remove the blue row shading from the list view

                Code:
                /* Remove blue shading in list view */
                div.hs-bg-blue-l4 {
                  background-color: inherit ! important;
                }

                Comment


                  #9
                  rge Knowing nothing about css nevermind hacking it, for the small snippets can you add them all? I assume no, just add the ones you want or need?

                  Comment


                    #10
                    Each one is independent so you can include whichever ones you want and ignore those you don't.

                    Comment


                      #11
                      Challenge: make the "Bulk Edit" section fixed so it won't scroll with the rest of the screen...
                      HS4 Pro Edition 4.2.5.0 running on Lenovo ThinkCenter & Debian Linux
                      Plugins: Z-Wave (via Nortek USB stick

                      Home Assistant 2021.10.6 running on HA "Blue" ODROID-N2
                      Add-ons: Android Debug Bridge, Duck DNS, ESPHome, File Editor, Glances, HA Google Drive Backup, InfluxDB, Log Viewer, MariaDB, Mosquitto broker, NGINX SSL Proxy, Node-RED, Portainer, SSH & Web Terminal, Samba, TasmoAdmin, UniFi Controller, Visual Studio Code, WireGuard, Zigbee2mqtt, Z-Wave JS to MQTT
                      Integrations: AccuWeather, Alexa Media Player, Glances, Google Nest, HACS, HomeSeer, Insteon, IPP, Life360, Local IP, Logitech Harmony Hub, Mobile App, MQTT, My Garage, OpenWeather, Spotify, Tuya Local. Ubiquiti UniFi, Z-Wave JS
                      Insteon: 2413S Dual Band PLM
                      Zigbee: zzh! CC2652R Rev A
                      Z-Wave: RaZberry daughtercard on RPi 1B via ser2net

                      Comment


                        #12
                        Originally posted by rge View Post
                        Remove the blue row shading from the list view

                        Code:
                        /* Remove blue shading in list view */
                        div.hs-bg-blue-l4 {
                        background-color: inherit ! important;
                        }
                        Suggestion: add all these new snippets to post #1 so we don't have to scroll though multiple posts/pages looking for them!
                        HS4 Pro Edition 4.2.5.0 running on Lenovo ThinkCenter & Debian Linux
                        Plugins: Z-Wave (via Nortek USB stick

                        Home Assistant 2021.10.6 running on HA "Blue" ODROID-N2
                        Add-ons: Android Debug Bridge, Duck DNS, ESPHome, File Editor, Glances, HA Google Drive Backup, InfluxDB, Log Viewer, MariaDB, Mosquitto broker, NGINX SSL Proxy, Node-RED, Portainer, SSH & Web Terminal, Samba, TasmoAdmin, UniFi Controller, Visual Studio Code, WireGuard, Zigbee2mqtt, Z-Wave JS to MQTT
                        Integrations: AccuWeather, Alexa Media Player, Glances, Google Nest, HACS, HomeSeer, Insteon, IPP, Life360, Local IP, Logitech Harmony Hub, Mobile App, MQTT, My Garage, OpenWeather, Spotify, Tuya Local. Ubiquiti UniFi, Z-Wave JS
                        Insteon: 2413S Dual Band PLM
                        Zigbee: zzh! CC2652R Rev A
                        Z-Wave: RaZberry daughtercard on RPi 1B via ser2net

                        Comment


                          #13
                          Originally posted by rge View Post
                          CSS Hacks
                          ...and perhaps change the name of the post to Custom CSS for UI and maybe ask HS to make it a sticky...

                          HS4 Pro Edition 4.2.5.0 running on Lenovo ThinkCenter & Debian Linux
                          Plugins: Z-Wave (via Nortek USB stick

                          Home Assistant 2021.10.6 running on HA "Blue" ODROID-N2
                          Add-ons: Android Debug Bridge, Duck DNS, ESPHome, File Editor, Glances, HA Google Drive Backup, InfluxDB, Log Viewer, MariaDB, Mosquitto broker, NGINX SSL Proxy, Node-RED, Portainer, SSH & Web Terminal, Samba, TasmoAdmin, UniFi Controller, Visual Studio Code, WireGuard, Zigbee2mqtt, Z-Wave JS to MQTT
                          Integrations: AccuWeather, Alexa Media Player, Glances, Google Nest, HACS, HomeSeer, Insteon, IPP, Life360, Local IP, Logitech Harmony Hub, Mobile App, MQTT, My Garage, OpenWeather, Spotify, Tuya Local. Ubiquiti UniFi, Z-Wave JS
                          Insteon: 2413S Dual Band PLM
                          Zigbee: zzh! CC2652R Rev A
                          Z-Wave: RaZberry daughtercard on RPi 1B via ser2net

                          Comment


                            #14
                            Many thanks for sharing I will try this over the weekend


                            Devoir

                            Comment


                              #15
                              Originally posted by dbrunt View Post
                              Challenge: make the "Bulk Edit" section fixed so it won't scroll with the rest of the screen...
                              Sadly not possible - the bulk edit section is identical in class to the top row of the devices list if bulk edit isn't enabled.

                              I can freeze the top row - either device or bulk edit - it's not too bad, particularly if you always leave bulk edit enabled:

                              Code:
                              /* Freeze bulk action row */
                              div.mt-2 > div.m-1:first-child {
                                position: sticky !important;
                                top: 130px !important;
                                z-index: 1000 !important;
                                background-color: #ffffff:
                              }
                              Last edited by rge; August 14, 2020, 05:23 PM. Reason: Fixed z-index so the main menus aren't behind the bulk edit control!

                              Comment

                              Working...
                              X