How to change CSS for Signup portal of Subscribe?

Developer help
1

I would like to change CSS for some of the components in the signup/login popup so it matches with my dark theme.

image

I tried code injection, but it is not working. How can I change it?

     .gh-portal-btn-link{
    	color: #ee7169 !important;
    }

    .gh-portal-btn{
        background-color: #5e5e9a !important;
    }
Source Theme Subscribe Button Text Color
2

I think that’s controlled by the accent color you have in brand settings

3

Hey, OP’s question is resolved due to the CSS being managed by the accent settings, but, how do I override the CSS of portal elements?

For some reason, I’m also getting the behavior of CSS overriding working elsewhere but not in the signup portal. In my case, I want my blog to be subscribe only (and no sign in). So, I applied display: none to .gh-portal-signup-message in order to hide the “Already a member? Sign in” text in the official Journal theme. Not working.

Thanks!

4

Yeah unfortunately Ghost CMS does a really poor job of actually opening up all areas of the site for customisation in regards to design. This is especially problematic of the portal. The fact they’re at version 5 and this still isn’t done is absolutely mind-boggling.

I have a dark mode theme I’m using and the portal is such a shocking change, and completely destroys branding. Awful experience.

3 Likes
5

I, one 100% agree with you, just mind-boggling.

6

Already sunk an hour into this. Terrible user experience going form the dark theme site to a flashbang when its time to subscribe!

I inspected every element on the portal and tried changing the background color style but seemed to always be overwritten by white. Annoying.

7

The Portal code runs in an iframe. You can’t easily restyle it with css. If you’re self hosted, you can load a custom version of the portal that’s styled as you want it. (Not an option on Ghost Pro and other managed hosts.)

However, you /can/ turn it off. Many themes offer custom sign-in/sign-up pages, that run on the theme level and /can/ be customized. For example, Liebling has a custom newsletter sign-up: https://liebling.eduardogomez.io/ (free theme!). Many of @fueko 's themes (not free) include custom membership pages, such as this one: https://eihei-dark.fueko.net/ (click the join button)

Not disagreeing that there should be an easy way to tweak the display of Portal, but there are some options, at least. :slight_smile:

3 Likes
CSS changes doesnt take effect in Portal
Source Theme Subscribe Button Text Color
8

Good grief Cathy thanks, you’ve just saved me ages! :sweat_smile:
Glad I self-hosted!

9

Since this thread got bumped: Magic Pages hosters can load a separate version of portal via their admin panel. Ghost pro hosters can edit the theme - use the exclude argument to ghost_head to not auto-load portal and then load custom portal within the theme.

2 Likes