CMS Development

marcioj
参加者

AMP styles and header image

I've enabled Google AMP for our blog, however, when adding the logo, the header text still displays inline, which makes the header looks weird.
I think it should either hide the blog header text or have the logo and text on different lines.

 

Ideally, would be great if we could add custom CSS to modify the header ourselves, as described in:
https://www.ampproject.org/docs/tutorials/create/presentation_layout.

 

Hubspot Support suggested adding CSS as per the link above. However the code doesn't seem to be included when in AMP mode.

 

Any help is greatly appreciated.

9件の返信
Jlamb1
投稿者

AMP styles and header image

@marcioj @nicolebrenner,

AMP will only allow the <style amp-custom> tag to be read one time. When this is turned on in Content Settings, it becomes a part of {{ standard_header_includes }} and is added to the very top of the page.

Because of this, it isn’t possible to add custom styling outside what HubSpot offers in Content Settings.

I can definitely see the merit of this, and it might be worth creating an Idea post for this. Similar to Site Header/Footer HTML, having an area to input additional custom styling would be helpful.
adrifolio
参加者

AMP styles and header image

I created this idea: https://community.hubspot.com/t5/HubSpot-Ideas/AMP-Styles/idi-p/74370

 

Because I've been also struggling with an issue where the page title is showing on the page right below the logo, pushing all of the contents above below the fold. Seems like I should be able to write a quick CSS style to correct this, but currently there is no way of doing that.

 

I also opened a related idea that you may be interested in upvoting:

https://community.hubspot.com/t5/HubSpot-Ideas/AMP-Styles-for-Code-Blocks/idi-p/74347

0 いいね!
ravenousblue
参加者

AMP styles and header image

I am experience this AMP issue as well and HubSpot in the last week is still looking for an answer.

0 いいね!
ziadi
投稿者

AMP styles and header image

Was having the same issue with the logo, then I looked AMP logo guidelines and they recommend 60(height) x600(width) logo.

I think this should fix your title/logo issues.

I still think that having additional css styling would be great though!
0 いいね!
nicolebrenner
HubSpot Employee
HubSpot Employee

AMP styles and header image

Thanks @Jlamb1 !

0 いいね!
nicolebrenner
HubSpot Employee
HubSpot Employee

AMP styles and header image

Hey @marcioj

 

I thinks what you'd need to do here is to add specific AMP styling to the CSS stylesheet that you're using on the page, but it's possible that the specific CSS that you're using here is not supported by AMP

I would check out this resource to see if the code you're adding is supported: https://www.ampproject.org/docs/guides/responsive/style_pages 

0 いいね!
aitortomas
投稿者

AMP styles and header image


@nicolebrenner wrote:

Hey @marcioj

 

I thinks what you'd need to do here is to add specific AMP styling to the CSS stylesheet that you're using on the page, but it's possible that the specific CSS that you're using here is not supported by AMP

I would check out this resource to see if the code you're adding is supported: https://www.ampproject.org/docs/guides/responsive/style_pages 


AFAIK it is not possible to define AMP styles in CSS in Hubspot. When you enable AMP support, the rendering of AMP pages does not load the CSS of the template but its own. The same happens with the Head section of the page.

But now, I am curious, how would you add the AMP CSS?

Hubspot's AMP support is quite poor, that's why I am surprised about your response スマイリー ハッピー

nicolebrenner
HubSpot Employee
HubSpot Employee

AMP styles and header image

@jlamb do you have any additional insight here?

0 いいね!
marcioj
参加者

AMP styles and header image

Any news on this?