GithubHelp home page GithubHelp logo

transparentblue's Introduction

Transparent Blue

hacs_badge GitHub Release Date GitHub release (latest by date) GitHub All Releases

A transparent blue theme for Home Assistant

This is a theme I created for Home Assistant called Transparent Blue. This is/was my first ever custom theme for Home Assistant and my first ever GitHub/HACS repository.
It can be installed via HACS or manually with help from the instructions below.

Please report any issues you may discover under the issues section
Please provide any feedback over at the Home Assistant Community post

Screenshots

Main
Screenshot 1

Sidebar
Screenshot 2

Menu
Screenshot 3

Here is the Included background image

HACS installation - recommended

Transparent Blue is now a default repo in HACS!

  1. Open HACS
  2. Select "Frontend"
  3. Click add (+)
  4. Search for Transparent Blue and click it
  5. Click Download You should now be able to select this theme in Home Assistant

Manual Installation - not recommended

  1. Download the transparentblue.yaml file from the latest release
  2. Upload the downloaded file to your "themes" directory
  3. Add the resource reference to your lovelace config

You should now be able to select this theme in Home Assistant

Changing the background image

This theme uses a base64 encoded image. I use this website to encode my images.
To change the background of this theme, change the following in the .yaml file:

lovelace-background: 'center / cover no-repeat fixed url()'

In between the brackets, in the url() section, add your own base64 string:

# Example
lovelace-background: 'center / cover no-repeat fixed url('data:image/png;base64,YOURLONGSTRING)'

Alternatively, you can use a local image stored in your config/www directory or a publicly accessible image url like so

lovelace-background: 'center / cover no-repeat fixed url("/local/background.png")' 
# OR
# lovelace-background: 'center / cover no-repeat fixed url("http://www.reportingday.com/wp-content/uploads/2018/06/Cat-Sleeping-Pics.jpg")' 

Beta versions

From time to time I will be releasing beta versions. This is mainly for personal testing before merging dev branch changes. If you are using HACS you can enable / disable these beta versions by changing the setting "Show beta versions"

hacs beta


Other cool themes


transparentblue's People

Contributors

johlc avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.