-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
57 lines (57 loc) · 2.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
<title>card-mod-helper</title>
<link href="src/style.css" rel="stylesheet" />
<script src="src/script.js"></script>
</head>
<body>
<div class="container">
<img src="src/jspath.png" id="jspath" width="260" alt="js_path">
<h1 onclick="pastePath();">card-mod-helper</h1>
<i>A Home Assistant tool for figuring out <a href="https://github.com/thomasloven/lovelace-card-mod">card-mod</a> element selectors for themes</i>
<ul>
<li>Open Chrome DevTools by right-clicking on a card and selecting Inspect <br> or press ⌘⌥C (Mac) or Control+Shift+C (Windows, Linux)</li>
<li>Right-click on a DOM node in the Elements Panel and select Copy → Copy JS path</li>
<li>Paste in JS path and click "Convert JS path"</li>
</ul>
<a href="javascript:void(0)" onclick="samplePath();">Sample input...</a>
<input type="text" id="input" class="box" />
<button onclick="convertPath();">Convert JS path</button>
<div id="card-mod-type">card-mod:</div>
<div id="output" class="box"> </div>
<button id="copy" onclick="copyPath();">Copy Selector</button>
</div>
<div class="section">
<div id="bmc"><a href="https://www.buymeacoffee.com/matt8707" target="_blank"><img src="src/bmc.png" alt="Buy Me A Coffee" width="150"></a></div>
<p>
<b>Learn more</b>
<br>
<a href="https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes/">https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes/</a>
</p>
<p>
<b>Questions</b>
<br>
<a href="https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744">https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744</a>
<br>
<a href="https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176">https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176</a>
</p>
<p>
<b>Remember to</b>
<br>
<a href="https://my.home-assistant.io/redirect/developer_call_service/?service=frontend.reload_themes">https://my.home-assistant.io/redirect/developer_call_service/?service=frontend.reload_themes</a>
</p>
<p>
<b>Example</b>
<br>
<a href="https://github.com/matt8707/hass-config/blob/master/themes.yaml">https://github.com/matt8707/hass-config/blob/master/themes.yaml</a>
</p>
<p>
<b>Contribute</b>
<br>
<a href="https://github.com/matt8707/card-mod-helper">https://github.com/matt8707/card-mod-helper</a>
</p>
<code>Aha! Click the "card-mod-helper" title to paste → convert → copy, all-in-one!</code>
</div>
</body>
</html>