Source Theme Subscribe Button Text Color

Themes
1

I’m using an accent colour on the Source theme that is forcing the various subscribe button colours however the text remains white when I need it darker/black. Is there a way to change all the subscribe buttons texts a different colour with css as the white is hard to read with my accent colour.

2

Anybody? I managed to get some CSS working for a few but not all.

3

Change style of gh-button

.gh-button {
    background-color: var(--ghost-accent-color);
    color: var(--color-white);  
}
4

Thank you … this code changes the top and hero sign up button but not the bottom right corner or subsequent pop up from that.

I’m using the Source Theme.

Any idea how to change those too? :smiling_face:

5

You’re right.
This can be quite challenging …
See: https://noiseamplifier.com/blog/how-to-remove-powered-by-ghost-from-portal-form/
The “Ghost Portal” is an embedded IFrame - see {{ghost_head}} in the default.hbs.
You can not directly apply styles to the inner IFrame element through parent window CSS class.

Based on the code of noiseamplifier.com I found a solution like this.
Maybe there another and better solution …

Code injection - Site footer

<script>
  window.addEventListener('load', ()=>{
    let ghostPortal = document.getElementById('ghost-portal-root');
    let ghostPortalIFrame = null; 
    let ghostPortalFinder = null;
    
    
       const findBtn = () => {
            let btn = ghostPortalIFrame.contentDocument.body.querySelector('.gh-portal-triggerbtn-container');
            let btnText = ghostPortalIFrame.contentDocument.body.querySelector('.gh-portal-triggerbtn-label');
            let btnSvg = ghostPortalIFrame.contentDocument.body.querySelector('.gh-portal-triggerbtn-container svg');
    
            if(btnSvg && btnText){
    
              // -------------- Change style here ----------------
              btn.style.backgroundColor = "#ffd100";        
              btnText.style.color = "#000000";
              btnSvg.style.color = "#000000";
              // -------------- End change style ----------------
             
              clearInterval(ghostPortalFinder);
            }
          }

    
       let portalObserver = new MutationObserver((mutations)=> {
          mutations.forEach((mutation) => {
             if(mutation.type === 'childList' && mutation.addedNodes[0]?.nodeName == 'IFRAME') {
                 ghostPortalIFrame = mutation.addedNodes[0];
                 ghostPortalFinder = setInterval(findBtn, 50);   
              }
          });         
         });
     
        portalObserver.observe(ghostPortal, {
           childList: true,
         })
 }) 
</script>
6

Thank you so much for your time on this.

The bottom button color changes great but the font weight is wrong, the envelop is still white and the associated pop up has not updated.

My ghost install is going on another domain and I really want to use yellow as it has reference to my new website/business.

Never had these issues on Squarespace and never thought it would be this difficult.

I’ll message Ghost and see if they can help me fix this.

I do appreciate your help. Thank you so much!

7

I’ve reverted the button color to black till I hear back from Ghost.

8

You can customize the portal:
https://ghost.org/help/customize-portal/
But I can’t see a solution to change the font, …

See also: https://forum.ghost.org/t/how-to-change-css-for-signup-portal-of-subscribe/25721
Maybe Cathy can help you.

Let me know when you found a solution for this.
Regards Joe

9

Cathy published interesting article about the ghost portal:

Is it worth the effort because of changing the portal button?

10

Fixing the font weight and svg of the floating button would just be a couple lines added to the code above. Let me know if you need help working that out here, or I’m sure @joe-blocher can as well! :)

Loading a different color scheme within portal is not a huge job, but it would require maintaining a fork. I’d be happy to be hired for that. :) (Sorry, gotta pay the bills.)