Make "Follow me"-block configurable

[jaschaurbach]

What

I would love to configure the Follow me block to change the arrangement of the elements and/or the font size

Why

In my theme the block looks bad. I would love to have the Follow button beneath the long and the text.

this is how it looks like at the moment.

How

No response

[mdingemanse]

Does this particular request require a new feature? Here's the html that is generated by ActivityPub (nabbed from my own blog). This means that you can already style the individual elements by targeting the class selections using CSS.

<div class="activitypub-profile">
  <img class="activitypub-profile__avatar" src="https://ideophone.org/files/cropped-android-chrome-512x512-1.png" alt="The Ideophone">
  <div class="activitypub-profile__content"><div class="activitypub-profile__name">The Ideophone</div>
  <div class="activitypub-profile__handle" title="[email protected]">[email protected]</div>
  <button type="button" class="components-button activitypub-profile__follow">Follow</button>
</div>

For instance, you could probably get the button to show beneath the logo and text using this bit of CSS in the custom CSS of your theme: .components-button.activitypub-profile__follow {display:block} (untested)

[jaschaurbach]

Thank for suggesting that - it does not work. I tried to do it with CSS but nothing worked for me.

[mdingemanse]

Right, it's a CSS flex item by default so the display:block didn't have an effect. However, if you try setting it the wrapper div to an inline-flex or inline-grid layout like so:

.activitypub-followme-wrapper activitypub-profile { display:inline-flex; }

That should at least have an effect. For instance, on my end, inline-flex looks like this:

While inline-grid looks (more messily) like:

For comparison, given that it's a flexbox layout, the default on desktop looks like this, taking up the full width of the containing element:

I'm not too well-versed in CSS currently so I can't tell you the incantations to get it exactly as you want (to wrap only the button to the next line), but the basic HTML structure supplied by ActivityPub means that it can be done with CSS.

[mdingemanse]

BTW @mattwiebe I do think the initial screenshot given in OP indicates that the default CSS styles are not optimal for mobile; ideally on a narrow screen the follow button would wrap automatically.

[mattwiebe]

Thanks for the report, I need to block out (pun intended) some time to work on a bunch of stuff for the Follow Me block, including better mobile layout