sloto'cash $31 free.Claim Your Free 999 Pesos Bonus Today

Resolved Babak Fakhamzadeh
(@mastababa)

2 years ago

When arriving on an AMP page of mine, the links in the page are yellow. This is my standard link color.

On iOS, when scrolling to the end of the page (using AMP), then pressing a “Go to top” link, the links turn black.

Inspecting the links on the page, the links respond to this CSS:

.amp-mode-mouse a, .amp-mode-mouse a:visited {}

However, inspecting the page, there is no element with the .amp-mode-mouse class.

When the links are yellow (that is, on first load), the links do not respond to the above CSS. instead, they respond to this:

a, a:visited {}

The body of the page has an .amp-mode-touch class.

Simulating a mobile device on desktop, the links are black. On desktop, the body has the .amp-mode-mouse class.

I do not want the links to be yellow. I want them to be black.

I have an /amp folder inside my theme, which takes care of displaying the AMP pages. But none of these files contains any CSS.

I now add a tiny bit of CSS to /amp/single.php:

.amp-mode-touch a, .amp-mode-touch a:visited {}

This works, it turns the links, on first load, black. But this feels like a hack. And, because the above problem did not happen at least at some point in the past, this is likely not the ‘best’ way to resolve this problem.

Where should I make changes to the appropriate settings to have my links behave in the same way in ‘amp-mode-touch’ and ‘amp-mode-mouse’?

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Support Milind More
(@milindmore22)

2 years ago

Hello @mastababa

Can you please share a link to the page where we can check the issue, it will help us in providing the solution.

Thread Starter Babak Fakhamzadeh
(@mastababa)

2 years ago

It’s all AMP pages on https://apublica.org.

Example:

https://apublica.org/2022/11/drones-jogam-agrotoxicos-sobre-comunidades-rurais-e-intoxicam-moradores-em-pernambuco/?amp

Note that I implemented the workaround I mention above.
Plugin Support Milind More
(@milindmore22)

2 years ago
Hello @mastababa

We will recommend adding custom CSS in AMP Legacy theme using the hook amp_post_template_css

eg:

Add the following code in your active child themes functions.php or in a custom plugin.
```
add_action( 'amp_post_template_css', function () {
	// only CSS here please...
	?>
	a, a:visited {
           color: #222;
        }
	<?php
} );
```
You can learn more about customizing the Legacy theme in documentation

I hope this helps!
- This reply was modified 2 years ago by Milind More.
Thread Starter Babak Fakhamzadeh
(@mastababa)

2 years ago

Thanks. This is pretty much the workaround I use, but with a hook, as opposed to just adding the css to the theme files directly.

Doesn’t really explain what’s going on, though.

Plugin Support Milind More
(@milindmore22)

2 years ago

Hello @mastababa

We will recommend using creating custom templates (adding amp director in theme) for more complex things where you wanted to fetch data from function and display it etc.

For simple CSS changes, we will recommend using the hooks, that are available for customizing the Legacy theme.

I hope this helps!

Thread Starter Babak Fakhamzadeh
(@mastababa)

2 years ago

Well, since you asked…

It helps, in the sense that I understand the approach you favour.

But, it does not explain what I described in my first post in this thread: pressing the “Go to the top” link, which just jumps the user to the top of the page, changes the applied CSS.

Plugin Support Milind More
(@milindmore22)

2 years ago

@mastababa I am not sure why it could change the CSS, we didn’t encounter such an issue before this might your site-specific.

Plugin Support Milind More
(@milindmore22)

2 years ago

@mastababa As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘amp-mode-mouse and amp-mode-touch’ is closed to new replies.

Tags