Remove Dashboards label from Dashboard Link

Relative newbie here. Just setting up a series of dashboard to run my system. Have the basic functionality working on a browser but some sort of bug is blocking it from working on my iPhone. Anyway that is being sorted elsewhere so not the point of this post.

My question here is what is the easiest way to remove the word Dashboards from each Dashboard link button I have on my home page? I was able to make it disappear by setting the text color the same as the background but then I lost the name of the link. Fixed one thing, broke another.

I sniffed around in my browser and found the css code with the word dashboards and over wrote that with spaces and that removed the word for that instance but as soon as the page refreshed the word was back. I am not sure where to find the source CSS file to do that edit there or if that is even a good idea (would I break something else?). I am not skilled in CSS or HTML but could do trivial edits.

I also looked for a parameter to turn off that tag line but couldn't find it. I'd just like to remove the word as it is cluttering my button design and is unnecessary verbiage anyway. See screenshot below.

Any suggestions appreciated.

I could be selfish and take the opportunity to promote my Simple CSS Editor tool, but it would likely be overkill for a single use case like this.... Particularly without testing if it can do what you want.

The quicker solution for you will likely be to look at the Custom CSS section of the Advanced settings in the dashboard. There you can add CSS to locate and tweak the CSS for various tiles on your dashboard.

More importantly.... If you haven't found it already, you may be interested in the Noobs CSS topic....

2 Likes

Go into settings for your dashboard.
Click on advanced.
Now click on css.
Now put in the following for each tile id you want the 'name' to disappear.

#tile-1 .tile-title, #tile-2 .tile-title, #tile-4 .tile-title, #tile-5 .tile-title, #tile-6 .tile-title {visibility: hidden; display: none;}

Then click on save css at the bottom.
There may well be an easier way but someone posted this in the dim and distant past and I've used it since.

1 Like

Might depend on the type of tile (template) and what the template uses for the "dashboards" section. Was it dashboard links you have used it for in the past @bobbles ?

Yes it was.

1 Like

Ah, yes, I see, it is the title....

I just tried it on a device, and it works on that to.

1 Like

I also tested it on a dashboard link tile, my "hide all titles" option on the CSS editor hid the "dashboards" text.

It produces this CSS to hide all the titles:

 /* ******* Hide All Tile Titles    ******** */
.tile-title { visibility: hidden; display: none; }
1 Like

it worked!

#tile-1 .tile-title, #tile-2 .tile-title, #tile-3 .tile-title, #tile-4 .tile-title, #tile-5 .tile-title, #tile-6 .tile-title, #tile-9 .tile-title, #tile-10 .tile-title {visibility: hidden; display: none;}

Had to experiment as I wanted to leave the tag (tile-title) for two of the tiles (a couple of switches on the page, tile 7 & 8).

Thanks!

2 Likes

Glad you got it sorted.
If you click on the 3 dots for the tile, you can see the tile id number at the top of the page that opens. Might help for what you do in the future.

I don't suppose you know how to replace the text for a device.
It would be nice to display a short device name for some of my devices.

I've been playing and searching but whatever I try does nothing.

Simething else I included in m editor :grin: With one or two gaps...

What type of template are you using?

I have the same issue. I wanted to rename a .tile.title but so far haven;t figured out the syntax

#tile-8 .tile-title {name: < new name>} this didn't work

It could be anything really but let's start with a switch... :grin:

Using the replace option for a tile title in my editor (and the "hide all tile titles" turned off, which I may look at adjusting....) produces:

/* tile-68 Settings */
	#tile-68 .tile-title { visibility: hidden; }
	#tile-68 .tile-title:after { visibility: visible !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; white-space: nowrap !important; content: "Testing" !important; }

1 Like

BINGO!!!!!!
You are my hero............ :grin:

1 Like

yes, worked for me as well.

Thanks!

/* tile-4 Settings /
#tile-4 .tile-title { visibility: hidden; }
#tile-4 .tile-title:after { visibility: visible !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; white-space: nowrap !important; content: "Humidity" !important; }
/
tile-6 Settings */
#tile-6 .tile-title { visibility: hidden; }
#tile-6 .tile-title:after { visibility: visible !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; white-space: nowrap !important; content: "Temperature" !important; }

2 Likes

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.