The Noob's (in)complete guide to CSS for Hubitat

@chad.andrews That reminds me I still gotta sort out bounce for a couple things. Also, are those presence icons native to HE?

yep, they are native! I still have a lot of work to do, and I am still learning. But that's the fun part! Maybe i should slow mine down too, looking at it here it's pretty fast. I think the scrolling could be useful to lots of people.

Extremely useful! All of this new stuff makes me think much more about needed improvements to this part of the interface. You can't click and drag to select, the jumping to the top of the page thing, and it would be great to be able to expand the window more.

Yes, i hear ya there. The CSS editing window is really weird, not sure why it is that way. Some more transparency for those editing window would be nice too. I am always moving it around to see things on the dashboard.

1 Like

Yes! Me too. I often move it around to see the target as I click save with the anticipation of victory or defeat. :joy:

1 Like

Well I didn't get an answer to my question, but that sure is cool, Chad!

Hi @Krishna, Thanks! Sorry I didn't see a question, was it for me?

It was the question posed by @sburke781. Never mind though, some else answered it elsewhere, any really I just wanted to say that your CSS code was just cool looking and I think I might want to try that eventually.

1 Like
        launcher = launcher + " style='height:${height}%;width:${width}%;border:none;left:0;position:absolute;top:25%;left:25%;'></iframe></div>"

@sburke781
this did it perfectly

Screen_Recording_20211209-191534_Chrome_1_2_1

2 Likes

Is there a way to enable the HE default icons to be available to select for attribute tiles?
at the moment it only allows background image

@mark.cockcroft I've fiddled with that, can't get it to work. I assume there is no spot for an Icon in the first place, so nothing there to replace. I did have a square show up when used the content: "/ea37" for example, but it was like it didn't know how to display the icon from the font-family. Maybe look at another tile with the info you need and CSS it to make what you want, if that makes sense.

I thought there must be something in the the base templates the made the icon option unavailable

Just discovered text outline.....

@markbellkosel84 - not sure if you ever got you bound on :smiley:
here is one that has a slow and steady bounce to it. If you want to make is slower or faster change the .8s to your liking.

#tile-4 .on 
{
  animation: smooth_bounce .8s; animation-direction: alternate; animation-iteration-count: infinite;
}

       @keyframes smooth_bounce { 
          0% { transform: translateY(0); }
          100% { transform: translateY(-50px); }
}
1 Like

I'll have to give that a try!

In the meantime, do you think this is doable:

Basically I would like to increase grid gap in only a section of my dashboard. I've played with margin and it only ends up shrinking the elements.

I want these buttons spaced out more.

Play around with

.wrapper.z-0 {
   gap: 20px !important;
}

Wait, are you saying there are other items on the dashboard besides those button? If so, this won't work since it will increase the gap for all items on the dashboard not a specific set of buttons.
I believe someone with more skills than I would have to chime in for something like that. But I'll test it out on play around dashboard and if I come up with a solution, I'll send it your way.

This is an option if you don't mind moving each button.
Top: -15px will move the button up 15px and left: 20px moves the button right 20px, both will take negative and positive values.

#tile-1 {
top: -15px;
left: 20px;
{

Actually, you can group several buttons together and move them at the same time.

1 Like

Works great! Was playing really hard with gradient. Think I got it really nice. Couple more tweaks to make them look like real buttons.

2 Likes

That does look pretty nice, what did you end up using for the spacing?

1 Like

Very methodical and uniform

1 Like