Change the color of the visited links in Publish site

Help
1

I noticed that in my Publish site (custom domain), the link to pages that have been already opened before don’t change color, like e.g. the Google search results turning from blue to purple.

Given the bidirectional linking nature of the site, it’s plausible that the reader will stumble upon a link that they’ve already read, multiple times. Soooo how can I change the color of the visited links?? ChatGPT gave me a lot of solutions, none of which worked:

The :visited pseudo-class is supported by all major browsers, but due to privacy concerns, browsers restrict the styles that can be applied to visited links. You can only modify certain properties like color, background-color, border-color, and others that don’t expose the user’s browsing history to scripts.

To ensure the :visited pseudo-class works:

Browser Privacy Settings for :visited Links

1. Google Chrome

  • Chrome supports :visited but restricts styling to non-intrusive properties like color.
  • No specific setting enables or disables :visited. Ensure you are not running the browser in an extreme privacy mode like Incognito where history is not saved.

2. Mozilla Firefox

  • Firefox has stricter privacy settings but still supports the :visited pseudo-class for styling safe properties like color.
  • Ensure Private Browsing mode is not enabled if you want history-based styles to work.

3. Microsoft Edge

  • Similar to Chrome, :visited styling is allowed but restricted to safe properties.
  • No additional settings are required beyond standard history-saving settings.

4. Safari

  • Safari supports :visited styling but within the restricted properties.
  • Ensure the browser isn’t in Private Browsing mode, which disables history saving.

Things to Check

  1. Disable Private Browsing: Ensure the browser isn’t running in a mode that prevents it from saving history.
  2. Clear Cache and History: If the :visited styles aren’t appearing, try clearing the browser cache and history to test freshly.
  3. Test with Safe Styles: Make sure your CSS only modifies properties that are allowed for :visited. Unsupported changes will silently fail.

For example, this works:

a:visited {
    color: #9b59b6; /* Allowed */
}

But this won’t work:

a:visited {
    display: none; /* Blocked for privacy reasons */
}

If you suspect something else is interfering, let me know and we can debug further!

If the :visited pseudo-class styling doesn’t appear to work, it might be due to one of these issues:

1. Browser Limitations on :visited

Modern browsers strictly limit the styles you can apply to :visited links. Ensure you’re only using safe CSS properties, such as:

  • color
  • background-color
  • border-color
  • outline-color

Properties like display, visibility, content, or position are ignored for :visited.

Example of working CSS:

a:visited {
    color: #9b59b6; /* Allowed */
    background-color: #f2f2f2; /* Allowed */
}

2. Specificity Issue

If other styles are overriding the :visited styles, you may need to increase specificity. Try adding more specific selectors:

/* More specific */
a.some-class:visited {
    color: #9b59b6;
}

3. Testing in the Browser

Make sure you’re testing in a browser that supports :visited properly:

  1. Visit a link on your site.
  2. Return to the page containing that link to check the styling.
  3. Clear the cache or refresh the page to ensure updated CSS is applied.

4. Ensuring CSS Is Loaded in Obsidian Publish

In Obsidian Publish:

  1. Confirm the CSS file is uploaded and linked correctly in Settings > Publish > Site Options > Custom CSS file.
  2. Inspect the page in the browser (using developer tools) to ensure the CSS rules for a:visited are being applied.

5. Example With Higher Specificity

If your CSS isn’t working, test it with high specificity or a simple override to ensure it’s applied:

a:visited {
    color: red !important; /* Use !important for testing purposes */
}

Let me know if it still doesn’t work, and we can troubleshoot further!