ESP web interface customization
Revision as of 08:13, 29 May 2017 by Grovkillen (talk | contribs) (Created page with "= Introduction = To customize the ESP web interface you first need to create a custom esp.css file and upload it to the ESP using the [https://www.letscontrolit.com/wiki/inde...")
Introduction
To customize the ESP web interface you first need to create a custom esp.css file and upload it to the ESP using the upload feature found in the Tools menu. You then need to enable the "Custom CSS" under Tools/Advanced.
Custom CSS file
* { font-family: verdana,sans-serif; font-size: 13px; } h1 { color: black; font-size: 16pt; } h1::after { content: " (Powersocket Livingroom)"; /* Give your Device an additional selfexplaing name after the topmost headline */ } h6 { color: black; font-size: 10pt; text-align: center; } .button-menu { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 7; -moz-border-radius: 7; border-radius: 7px; color: #ffffff; padding: 3px 10px 3px 10px; border: solid #1f628d 1px; text-decoration: none; margin:0px 2px; } .button-menu:hover { background: #8fd4ff; background-image: -webkit-linear-gradient(top, #8fd4ff, #3498db); background-image: -moz-linear-gradient(top, #8fd4ff, #3498db); background-image: -ms-linear-gradient(top, #8fd4ff, #3498db); background-image: -o-linear-gradient(top, #8fd4ff, #3498db); background-image: linear-gradient(to bottom, #8fd4ff, #3498db); text-decoration: none; margin:0px 2px; } .button-link { border: 1px solid; border-radius: 5px; background:ButtonFace; color:ButtonText; border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; padding: 5px 15px; text-decoration: none; } .button-link:hover { background-color:Highlight; color:HighlightText; } .button-link:active { border-color:ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; } th { background-color: #369; color: #ffffff; padding: 10px; } td { padding: 7px; } table { color: black; border-collapse:collapse; } .div_l { float: left; } .div_r { background-color: #080; border-radius: 7px; color: white; float: right; margin: 2px; padding: 1px 10px; } .div_br { clear: both; }