[Resolved] Modify an online page via CSS on the fly to make an a-link visible just for me

[Walter Schwarz]

Hi,
I already invested hours in research and testing – but I did not succeed. My wish is to modify an online page presented on my screen (internet call) via CSS (however it might be done) to make already invisible coded href anchors visible to open offline stored documents.

Background: I unregularly checked the internet to find interesting documents regarding my business focus for appr. 20 years. And I always downloaded these and made the links public. Meanwhile more than 60% of these links are dead and I could have deleted these. But I keep them in a “Dead Link” list visible to the audience as historic information and a hint to maybe refind the new location/document based on the domain name, the path, document name, organization, author and so on. So it is a kind of being an internet detective …

And now I want to insert href anchors to all dead links referring to my local documents. These anchors should be just visible to my eyes codes similar like [please see page “test”]:

div class=”dod”>a href=”http://127.0.0.1/wa/land/us/state.nm.com/PROCEDURES.pdf&#8221; target=”x” rel=”noopener noreferrer”>PROCEDURES.pdf</a</div

As local server I use WAMP. I know, that html/css-experts can detect the anchors in the code – but that is not really an issue as basically the content is already stored in the dead link. To hide the offline anchor is more an aspect of clarity and compactness. And the audience should not be irritated by dead links additionally inserted by me if I do not make these invisible (display:).

Any idea about how to modify my online pages (some CSS code however integrated) that way that the hrefs are visually inserted on the fly on screen for my usage only?

Thank you,
Walter

[David]

Hi there,

so if i read correctly there are some links that you wish to keep hidden using CSS unless it is you viewing the page? If so the only thing i can think of is hiding them if the user is not logged in.

For example:

<a href="a_url" class="dead-link">An example dead link</a>

This CSS will hide it if the user is not logged in:

body:not(.logged-in) .dead-link {
    display: none;
} 

[Walter Schwarz]

Hi David,

your proposal is EXACTLY what I was searching for hours! Really thank you.

“.logged-in” I did not know – but I found it now in the internet. Are there other “secret system elements/class selectors/parameters …” that one should know if a special task must be fulfilled? Is there an online collection/description or could you send a copy? Is there a technical term or category for “.logged-in”?

And just to learn: is there a difference in effect between “visibility: hidden;” and “display: none;”?

As always: you GP guys are great and the best support I experience in the IT world …

Keep going and enjoy life,
Walter

[Walter Schwarz]

Complement:
It would be totally perfect if I do not have to log into wp and gp would recognize that the “home computer” (that’s me) is calling up the page and the css code “.dead-link” would take effect. But that should be rather difficult to realize …

Best regards,
Walter

[David]

logged-in is just a CSS class that gets attributed to the body tag.
You can see some of the other classes WP adds here:

https://developer.wordpress.org/reference/functions/body_class/#comment-1930

display: none; and visibility: hidden; both do essentially the same thing. The latter however does not remove the element from the display and there will be a noticeable space in its absence. Whereas display: none removes that entirely.

Hmmm… identifying you’re viewing the page on your home PC – not sure – would require an a Cookie in the browser or a wp-config edit to detect the IP address….

[Walter Schwarz]

Thank you!
Walter

[David]

You’re welcome

[Author]

Posts