Limited guest access addon

Share your Projects!
41

Hi, I do not see it there. <are we talking about the same folder?

I talk about the folder that are accessible with Samba
\config (all HASS configuration files)
\addons
\share (this one?)
\ssl

42

@Klagio

Not using samba, but i would assume that’s the one, yes.
It does not magically appear there, you will need to create the folder (limited-guest-access) and files (footer.htm header.htm script.js style.css).

//i

43

Oh ok thanks, can you please copy paste a simple one, so I can play with?

44

@Klagio

I sent you a direct message with sample, thread is getting a bit specific and not really about the core functionality

1 Like
45

Thanks I’ll have a looks at this and post some pics :slight_smile:

46

Wow, one of the most useful addons I have

Actually for whoever is good in doing websites, can be a replacement for the whole hassio iinterface.

Would it be possible to be able to copy/paste the actions? Frequently I do new LINKS, and I have to redo all the common commands, a copy/paste would be helpful. Thanks

47

Could you offer one example for this scc thiing? iam not a programmer but would like to play around :slight_smile:

48

@thundergreen I messaged you a little sample with html and css

49

I answered you and made a proposal how to style as standard

50

first attempt to customize:

image
image1844×991 27 KB

51

Could you please share your whole files … for someone like me it’s hard to begin :slight_smile: Wanna change also the background of the body and the buttons :slight_smile:

52

Hi,

All code is in the github repository,
but i suggest you look into the browser built in developer tool to do what you are looking for.

As the background and buttons are already styled, you may need to override the styling by either being more specific or use !important

53

Can’t see it :confused:

image
image1726×890 52.7 KB

54
55

@thundergreen

By being more specific i mean that you istead of just having a
you can have the path body > a which “wins” over just a

or head+body to override body

perhaps something like this

image
image1016×178 16.7 KB

head+body {
    background: white;
}
body>a, body>a:link, body>a:visited, body>a:active {
    border-radius: 50px;
    background-color: cadetblue;
}
56

my style.css looks like this… everything work but background

<style type="text/css">
    body {
        margin: 0;
    }
    #header {
        height: 4.5rem;
        background-image: url('https://cloud-space.ddns.net/images/2020/09/16/HzH.png');
   }
    #header ul {
        display: flex;
        margin: 0 auto;
        padding: 0;
        align-items: center;
        justify-content: center; 
        list-style: none;
    }
    #header ul li {
        flex: 1 1 30%;
        height: 30px;
        line-height: 30px;
        position: relative;
        top: 15px;
        text-align: center; 
        color: ghostwhite;
        font-weight: bold;
        font-size:20px;
        text-shadow: 1px 1px #0f0f0f;
    }
    #body {
    	background-color: #329da8;
    }
</style>
57

replace the last #body with
head+body

# = id attribute (and . = class)

58

My version so far

Screenshot_20200916-180537
Screenshot_20200916-180537720×1560 32 KB

Screenshot_20200916-180901
Screenshot_20200916-180901720×1560 39.6 KB

1 Like
59

Would you mind telling me how to add icons on the buttons or is it possible to automatically add them by domain like light switch etc?

60

@thundergreen

I’ve stated before, this is way out of scope for this thread.
But i added classes for the buttons a few versions ago
image

something like this will do the trick

a.device-type-switch.state-off:after {
    content: '\26A1';
}

head over to UTF-8 icons to get icons