Style the Portal button?

Memberships & subscriptions
1

Hi,

Does anyone know of a way to style the portal button? Or to change the accent colours on the portal UI? It seems that this is tied to the theme accent and can’t be customised individually?

I’m using the Casper theme, and when I select an accent colour suitable for the dark theme, it’s not changing the text colour of the portal button to suit a dark theme. So the button text is always white and is therefore unreadable.

Screen Shot 2022-01-17 at 6.39.58 am

Is there a way to update the text colour on the portal button? It seems that in the past there was a style option for the Portal specifically, but I can’t see this in the admin or the Portal settings.

Thanks,
Kris

1 Like
2

It’s sad no one even bothered to answer you. I am in the same situation but my button is really unreadable due to my light accent color.

3

In the code injection -

  window.onload = () => {
    var iframe = document.querySelector('#ghost-portal-root').children[0];
    var iframeWindow = iframe.contentWindow;
    iframeWindow.document.querySelector('.gh-portal-triggerbtn-label').style.color = 'black;
  }
4

This code doesn’t work. It’s missing a ' after the black, but it still doesn’t work, at least in this case with the iframe loaded cross-origin (which is a problem for ghost.io users).

I suspect @Fute no longer needs an answer. (Sorry, Fute, I didn’t see your post the first time for whatever reason.) But in the event that he does, a better option might be to turn off the Portal button (it’s in settings > portal > look and feel), and to instead inject a button into the page itself (not as an iframe), which then triggers the portal display.

1 Like
5

Right this only works for self hosted instances.