[smartly][css] removing icons (remove, hide)

I believe this will be considered heresy, but I'd like to experiment w/removing icons on some Smartly dashboards where I have so many similar items (lots of contact sensors) that text is much more important than an icon for me.

Is there a global way to remove icons? I see "hide labels" in the JSON, but no "hide icons." Maybe I need a template that leaves out icons, I assume such is not available at this time.

And is there a global way to set the font to bold?

Thanks!

Updated:

Via JSON per device/state using "customIcon": "blank",

    {
      "template": "contact",
      "bgColor": "rgba(0,255,105,0.75)",
      "iconColor": "rgba(0,0,0,0.66)",
      "customIcon": "blank",
      "state": "closed"
    },
    {
      "template": "contact",
      "bgColor": "rgba(255,0,0,0.65)",
      "iconColor": "rgb(255,255,255)",
      "customIcon": "blank",
      "state": "open"
    },

If we use CSS without targeting a tile (#tile-123) then it will apply that CSS to the ENTIRE dashboard, but wait that is not always good. I mean the ENTIRE dashboard so you will lose the gear and other icons too (this mean you cannot edit the page, backups!!)

Here is the code I do NOT recommend you use. (Shown so you can avoid it)

 .material-icons {display:none !important}

Instead i would target all the tiles (add as many as you need to)

#tile-1,#tile-2,#tile-3 .material-icons  {display:none !important}

Same goes for font, but some are "titles" a some are "contents", so you may need to play with that one. Again global may have side effects, best to target tiles needed.

.tile-title {font-weight:bold !important;} 

or

#tile-1,#tile-2,#tile-3 .tile-title {font-weight:bold !important;}
1 Like

Excellent, thanks, I'll take a look at this and see what I can blow up. Thanks for the advice about the first nuclear option, won't touch that. :slight_smile:

hang on I think there is a JSON template one too that will target specific device types. Let me find that and make the post complete.

Ooooooo...on hold.

"customIcon": "blank"

Post updated, enjoy smartly :wink:

VICTORY is Mine. Well, ours, I guess. :wink:

Thanks, worked perfectly, couple quick edits to add the custom icon setting for the locks and contact sensors, changed the global font to 16, and I have an ugly but very usable dashboard that doesn't require me or more importantly family to remember which icon means which door. :slight_smile:

All I need is to do a little editing of the labels.

A root beer float is in the mail to you. :smiley:

@danabw Since we don't need (can't see) those other reading lets dump them too (you probably only need secondary) might help pretty it up.

#tile-9 .tile-secondary,#tile-9 .tile-tertiary{display:none}

or

#tile-1,#tile-2, .tile-secondary {display:none}

Global should be ok here too

.tile-secondary, .tile-tertiary{display:none}

Finally title placement. This one you should tweak per tile to line them up.

#tile-12 .tile-title {padding : 3.5em; important!}

Then in options "hide 3 dot menu" and you should be looking good!

1 Like

Thanks!! :slight_smile: :slight_smile:

I'm loving this ability to remove "clutter" for some specific dashboards where the standard components aren't important for us. Obviously a YMMV situation. I just finished a round of editing before I saw your post. Font=18, icons removed, and hideIconText=true and added hide three dot icon per your comments. Still need to organized them more appropriately so devices in the same area are grouped together.

One thing I'm still not clear on - taking my manual edits in JSON back to the Smartly layout editor, making changes there, and bringing back into HE. When I want to make a change I can only make in Smartly (e.g., rename icon) I lose my customizations made outside of Smartly.

1 Like

Sorry for the boot :hiking_boot: he likes a clean thread I guess :man_shrugging: :laughing: feel free to tag me anytime for dash help

1 Like

not a boot! it's that this is a general css tweak, not specially smartly so I gave it a thread with a topic that's searchable :v:

1 Like

That's fine, :slight_smile: I would have appreciated it if the title included at least a reference to Smartly, as it seems like one of the most likely places that folks would want to do this, and I would not have looked for CSS necessarily when looking for a way to customize Smartly. Just my 2 cents, speaking from a novice (really no significant exprerience playing w/CSS).

1 Like

@spelcheck - I believe this does belong back in the main thread, make sense? Smartly specific.

1 Like

I'll send you a pm on that.

1 Like

Off to toodle around w/my dashboards, thanks for all the help.

2 Likes

I don't feel like it should be seen as punishment/discipline at all! it'll make it easier for someone to find by searching for "remove icons". thread title keyword matches score high in search, and in smartly itself I've customized the topic split notification with the original question so it's obvious what question was answered.

I see that question about json changes persisting through smartly updates, but that'll have to be answered by PM (looks like tech may be taking care of that.)

to reiterate, there is no problem starting questions in the release thread at all, totally 100% preferred. I think there is just a negative connotation that goes along with topic splits because it doesn't happen much. The only reason it doesn't happen much is because there are only like 5 active members that have the option to do it. I'm using it as a tool so our solutions are easy to search for. :pray:

2 Likes

Thanks for taking the time to reply and add context. I didn't take the "boot" negatively at all, totally understand the need to manage the thread, part of my duties at my last company was working w/the teams that managed our support forums, and we ran into this issue all the time. :slight_smile:

Thanks for making the tool available, it's awesomer and awesomer as you see the potential...

2 Likes

Nice work integrating into the main thread. You are both skilled and dexterous. :wink:

1 Like

is it possible to hide a dashboard link icon?

I'm not sure...I tried to and it didn't work, but probably didn't do it correctly. It was late so I didn't spend time investigating when it didn't work. Lazy.... :wink:

Download the Hubitat app