Can only change 2nd of 4 tile primary titles

Using Hubitat for 2 weeks now. Added an Aeotec WallMote Quad and created 4 tiles in Dashboard-1. I notices that the name at the bottom of all the tiles was the same so using the "community" figure out how to use CSS to add primary titles. But, of the 4 lines of CSS text, only the 2nd line works. Only line #tile-10 works. The other 3 tiles are blank.

/* Button titles - WallMote Quad */
#tile-9 .tile-primary:after{ content: “Quad-9 Button 2”; }
#tile-10 .tile-primary:after{ content: “Quad-10 Button 3”; }
#tile-11 .tile-primary:after{ content: “Quad-11 Button 4”; }
#tile-8 .tile-primary:after{ content: “Quad-8 Button 1”; }

I can't see any syntax errors in the other lines.

You're right, they do look the same. I would start by double-checking:

  • The Id of the other tiles you are hoping to adjust. You can do this by clicking the 3 dots on the tile and checking the Id in the top left of the tile editor dialog that is displayed.

  • The template that is used for tiles 9, 11 and 8, also available from the same tile editor dialog. Are they the same as tile 10? What template are you using?

thank for the response. The device is a 4 -button WallMote. I created four tiles, one for each button with device id's 8, 9, 10, and 11 (found by selecting the 3 dots and noting device id at top of the screen). The template was Button. BTW, the text in each "content" is for debugging i.e. Quad-9, Button 2, references device id 9, which is assigned button 2. (This all started when I tried to change the text to "all lights" and it did not work).
I poked around the layout text and found the customCSS apparently the result of the CSS code I added. I can't figure out how to select-copy text on MacBook from either the layout or the CSS page so I just typed the text into an editor and copy pasted here:

“customCCS”: “/* Button titles - WallMote Quad */\n#tile-9 .tile-primary:after{ content: “Quad-9 Button 2”; }\n#tile-10 .tile-primary:after{ content: \”Quad-10 Button 3\”; }\n#tile-11 .tile-primary:after{ content: “Quad-11 Button 4”; }\n#tile-8 .tile-primary:after{ content: “Quad-8 Button 1”; }”,

What is odd is that in the entry that works, "#tile-10", the double quotes around the content text are escaped, that is preceded by a backslash (). The other 3 entries do not have the double quotes escaped. If that is the problem, I have no idea why my CSS text generated different customCSS entries.

ctm

Ah... This will be the issue. Well not that you can't use a MacBook... But I expect the quotes are not the same quotes. I believe Mac's have the concept of left and right quotes, which are likely what have been added when you edited the text in the text editor. I would suggest trying to edit the CSS in the CSS section of the Advanced Settings of the dashboard (click the cog, select Advanced, then CSS).

A couple of other points that may be worth knowing:

Some time ago now there was a change made that stopped selection with a mouse on these dialogs in Dashboards. What you can do is click in the text box, say the CSS one, then use your keyboard to select the text, e.g. holding down Shift and using arrow keys or Ctrl+End, etc, then Ctrl+C to copy.

Also, I believe the place to edit the CSS is in the Advanced -> CSS section, layout is the combination of a few different settings pages, so not sure if any changes there would stick or not.

To avoid confusion, these are actually the id's for the tiles on the dashboard. The Device Id is something different.

Fixed!

  1. copy text - yes, I was trying to use the mouse which only moved the window. Shift+arrow keys, then command-c worked to copy text.
  2. Yes, I only edit in the CSS page not just for the reason you mentioned, but since I could not copy text, I could not make a backup of the JSON text. Too risky to modify without a backup.
  3. I made a copy of the working CSS text entry and used that copy to replace the other 3 entries. Selected SAVE CSS, all 4 tile showed the same text. Yes!
  4. Edited each entry to make each unique. Selected SAVE CSS. Each tile shows a unique name.
  5. Thanks for the reminder to be careful with terminology: device id vs tile id.

chuck

1 Like

Excellent, glad to hear you got it working.

If you are interested and want to do anymore editing, I have done a small CSS Editor that may make some of the basics a little easier. If it's only a couple of minor modification, probably not worth the effort of installing it, but if you find your doing more and more, it may be worth a look.

I haven't touched it for quite a while, and would love to get back to it, but I keep finding other interesting projects to keep me busy.... plus life in general :slight_smile:

thanks a lot for your help. I am a retired unix sys admin/oracle DB migrating from Isy994i + Insteon and hoped to keep things simple. Editing CSS code was not in plan but I learned a lot in the last couple days. Will keep your CSS editor in mind (bookmarked the page).

N.B. I selected "solution" on your response the was essentially the solution. Hope that is correct.

ctm

1 Like

Thanks.

The solution tag is appreciated. It's not mandatory, but apart from showing appreciation, in can allow others to find the solution more easily, particularly in much longer topics (a link to the solution post is added to the bottom of your original post).