Top Pages Questions

Elements
1

Where is the setting to change the color of the page names on hover? I see Dan has done that in the Dev Diary video. Also, how do I make the SVG icon match the color of the text in the top menu default, hover, and active?

2

Default & Active ? near the bottom of the Pages controls?, the Default is the Hover color , the Active state then changes color on Hover using the Default state? I think from memory
Do not think there is a seperate option for alternative Hover color, would be nice, might be wrong though not at laptop at moment

svg discussed here in Top Pages

3

That works but it is not what I see in the video. In the Dev Diary 76 Dan shows hover where the SVG icon changes color too.

Screenshot 2025-06-01 at 1.42.25 PM
Screenshot 2025-06-01 at 1.42.25 PM688×234 23.1 KB

4

did you read the link to the post re the svg

An SVG page icon will be set to same colour as the text — so long as your SVG icon is correctly formatted.

5

Thanks @upssjw I did read it. I have no idea where I would add that info, and the reason I buy and use Elements is so I don’t have to do that. Maybe someone can direct me to SVGs that have that color info embedded.

6

I found SVG font online that have the outline color set to stroke =“currentColor” and they work.

7

Yes, that is the key you want either the fill or stroke color to be set to currentColor then Elements will pick it up and apply the appropriate color.

I now edit all of my SVG icons to have the following info at the beginning.

<svg 
	viewBox="0 0 24 24"	
	xmlns="http://www.w3.org/2000/svg" 
	fill="currentColor" 
	fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd"
>