amphtml
amphtml copied to clipboard
Adding customizing option to amp-story-page-attachment in the near future?
Description
I'm working with amp-story and can't find a way to change the color of i-amphtml-story-draggable-drawer-content as well as the draggable drawer handle in my amp-story-page-attachment tag. The only option to customize is theme="light" / "dark" according to the documentation and my testing.
Sadly this not styleable draggable thing destroys my intended brand identiy design (example: everything red / all controls black).
Are there more customizing options planned in the near future like you did with amp-story-page-outlink?
I would love to see custom styling options for:
- [ ] draggable-drawer
- [ ] draggable-drawer handle
- [ ] title tag inside the draggable drawer
- [ ] close button
for the amp-story-page-attachment tag
Greetings from Vienna, Austria!
Alternatives Considered
Additional Context
No response
Hi 1302580MK, thank you for reaching out.
Child content of amp-story-page-attachment can be styled in any way you like and will pass validation.
Like the following (very simple) example:
/* In head. */
<style amp-custom>
.attachment-content {
background-color: #F8EDD5;
padding: 20px;
}
</style>
...
/* In an amp-story-page. */
<amp-story-page-attachment layout="nodisplay">
<div class="attachment-content">
<p>Text content.</p>
</div>
</amp-story-page-attachment>
The handle, title and close button follow the theme of the amp-story-page-attachment element and are not customizable beyond theme. Keeping the colors consistent ensures a11y compliance (color contrast).
It's an interesting idea to use attributes like drawer-ui-accent-color and drawer-ui-accent-element to theme the drawer header UI.
We're always open to reviewing PRs!
If this is something you're interesting in contributing it could follow the color logic pattern used in amp-story-open-attachment
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.