Can I improve the aesthetics in AMP with code?

Posted in: Newspaper
Post count: 460

Hello team,

This is my mobile version and my AMP version, how can you appreciate AMP seems to be a little out of shape and is aesthetically less attractive, something that along with the absence of a menu, impairs the user experience.

Is it possible to focus and center the logo on AMP?
Is it possible to put a different logo just for AMP?
Is it possible to add the highlighted image at the beginning of the article in AMP?

Thanks, Jose

https://fotos.subefotos.com/67ade69c7c3dcae699db463c1b8055b3o.jpg

Post count: 35449

Hi,

If you want to use a bit of CSS code to change the AMP style page, please edit here -> https://www.screencast.com/t/vIUHFAbD6uRH There’s no option for custom CSS code for AMP version, sorry!
Here is the css for center the logo on amp
.td-logo amp-img {
left: 50%;
transform: translateX(-50%);
}

https://www.screencast.com/t/dQWsYwj0iG

In order to have a different logo on amp you-ll need to set this in theme file.
First copy an url from media
https://www.screencast.com/t/1e8xnROk1Q
Then go in
wp-content/plugins/td-amp/templates/header-bar.php
https://www.screencast.com/t/Hwj9Nodw
https://www.screencast.com/t/Zax0YedF
https://www.screencast.com/t/nGTCRIAOo

Thank you.

Post count: 460

Thanks Calin,

But this is very complex for me…. I think that simply centering the logo is simpler, the rest is complex.

But it doesn’t work, I added the code in the file you indicate, and amp breaks.

https://fotos.subefotos.com/52abb1f14aeb3b39ca88bb09abd71b54o.jpg

  • This reply was modified 7 years by Jose.
Post count: 35449

Hi,

You need to set an echo with ” in order to make the code to work, just like this:
https://www.screencast.com/t/T9RqNgLMasWG

echo '
.td-logo amp-img {
left: 50%;
transform: translateX(-50%);
}
';

Thanks.

Post count: 460

Thanks 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
The forum ‘Newspaper’ is closed to new topics and replies.