Square lines have appeared around all links on my homepage

Using Concrete / Help
1

Square lines have appeared around all links on my homepage.

Thank you for your continued support.

This might be due to a browser update, but I would appreciate your guidance.

I’m using ConcreteCMS 9.4.8.

With the latest versions of Edge and Chrome, square lines have appeared around all links on my homepage.

I suspect it’s a CSS issue, but it looks bad. Is there any way to improve it?

Thank you in advance.

タイトルなし
タイトルなし694×454 86.7 KB

The theme I’m using is called Replica PRO.

Incidentally, this doesn’t happen with Crista.

2

Additional information:

The same issue occurs in incognito mode of the browser.

It happens in Edge and Chrome, but displays correctly in Firefox.

3

Since I haven’t received a reply from the author, I checked with various sources and received the following response:

The bootstrap-modified.css file embedded in the source code defines a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}, which is presumably causing the frame to appear when clicked (this is not specific to Chrome, it’s the same in Edge).

<link rel="stylesheet" type="text/css" href="/packages/xw_replica_pro/themes/xw_replica_pro/css/bootstrap-modified.css">

If you are a user and not a site administrator, and this is a major concern, you could try installing a dynamic CSS rewriting extension to override and disable this part.

Are there any ways to fix this?

The appearance is bad and it’s bothering me.

Could someone please advise me?

4

I’ve found a workaround, but it’s not a fundamental solution.
It seems that setting the following code in the header tracking code improves the display:

a:focus { outline: none !important; outline-offset: 0 !important; }

I think others using the same theme are having the same problem.
Could someone please help me?

Ideally, the theme author would offer a solution.

5

I commented out a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} in the bootstrap-modified.css file, saved the file, and then uploaded it.
Those using the same theme can try this at their own risk.
What’s the author up to now?

6

The method of removing a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} from the bootstrap-modified.css file worked correctly until yesterday, but the problem reappeared today, so I’m changing my approach.

I’m now using the method of adding the following code to the header tracking code:

<style> a:focus { outline: none !important; outline-offset: 0 !important; } </style>

This seems to have fixed the problem for now.

If anyone knows a more fundamental solution, please let me know.

7

I finally received a reply from the author.

They said to add the following to the custom CSS.

They also said they do not recommend it.

div.ccm-page a:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}