Virtual Page Link Styling

General
1

I am just starting to use Virtual Pages which are very useful and respond to my custom styling nicely. The only thing is that the links to a virtual page eg [[Tasks:Open]] styles as a missing link. I cannot find a css selector of some sort I could use to style the virtual links? Any thoughts?

TIA

2

i guess there is no direct way to adress the virtual page links directly but with a little bit of CSS trickery we can style the virtual pages (href or title containing a colon ":")

.cm-line:has(a[href*=":"]) a,
.cm-line:has(a[title*=":"]) a {
    color: red;
    font-weight: bold;
}

the downside to this approach would be that it will also adress the links with "https://..." because of the colon, but you could also narrow that down with other specific css selectors.
To do it correctly and exclude normal links with "://" in the href/title use:

/* Target by href/title (to be safe)  WHERE it contains ":"  AND does NOT contain "://" */

.cm-line:has(a[href*=":"]:not([href*="://"])) a,
.cm-line:has(a[title*=":"]:not([title*="://"])) a {
    color: red; 
    font-weight: bold;
}

and here is a screenshot with the working example:

image
image784×298 9.81 KB

3

Wow that works well. I think you have more CSS skills in your little finger than I have in my whole brain :grin:

Thanks for the elegant solution

4

The CSS-skill in my little finger is thanks to AI :stuck_out_tongue:
I do have skill in proper AI-prompting and using my local LLM for small tasks like this.
i wouldn't call it elegant, but as long as it works, and covers your use cases, i'm happy i could help.