How to customize the styles of atpage

We can customize the styles of our atpages, and share the style files to the repo.

How to add links

On /setup page, click the Add Link button(on right end of Links label) to toggle the Add Link Form, then input the name, url, description of the link.

The link will appears as icon on atpage by default. We can toggle More Options to style the link as card, banner using inline styles. so input the styles per Inline Style Syntax, like this:

background-color: yellow; padding: 20px; 

By default, the icon of the link will be fetched via the url like: https://icons.duckduckgo.com/ip3/<link-host>.ico, It works for most of the website. In some cases, we need to input an icon link mannually, such as some new emerging site on atproto. for example, whitewind's icon link: https://whtwnd.com/whtwnd.svg .

How to style the elements?

The cusomized style of the atpage uses css syntax. We can paste a .css file to the input box of Customize styles of my atpage(Optional) on /setup page.

There are many class names to help select the elements:

more fine-grained classes(sub-class)

• at-profile

  .at-avatar for the avatar image, .at-handle for display name.

• at-links

  .at-ico for link icon, .at-link-card for styling link card, .at-desc, .at-name, .at-des, at-desc-* for styling the link content.

• at-card

  .at-card-* for a specific service.

• at-meta

  .at-ava for avatar thumbnail, .at-hdl for handle name, .at-date for date, .at-kind for service name, .at-hdl-* and .at-kind-* for a specific service.

• at-title

  .at-title-link for the style of the link of the title, .at-title-link-* for specific service.

Please leave comments if any questions.