How to change signup popup?

techro · May 6, 2021, 5:53pm

I would like to change the signup / login popup so it better matches with my dark theme (right now its white and hurts the eyes). How can I change it? Do I have to create a new .hbs file? Where does Ghost store the code for it?

JavowiecPL · May 6, 2021, 6:08pm

Currently, this is how you can customize Portal:

In the repository linked above these are the files for Sign In/Sign Up:

github.com

TryGhost/Portal/blob/main/src/components/pages/SigninPage.js

import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
// import SiteTitleBackButton from '../common/SiteTitleBackButton';
import AppContext from '../../AppContext';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';

const React = require('react');

export default class SigninPage extends React.Component {
    static contextType = AppContext;

    constructor(props) {
        super(props);
        this.state = {
            email: ''
        };
    }

    componentDidMount() {

This file has been truncated. show original

github.com

TryGhost/Portal/blob/main/src/components/pages/SignupPage.js

import ActionButton from '../common/ActionButton';
import AppContext from '../../AppContext';
import CloseButton from '../common/CloseButton';
import SiteTitleBackButton from '../common/SiteTitleBackButton';
import NewsletterSelectionPage from './NewsletterSelectionPage';
import ProductsSection from '../common/ProductsSection';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, getFreeProductBenefits, getFreeTierDescription, hasFreeProductPrice, hasMultipleNewsletters, hasFreeTrialTier} from '../../utils/helpers';
import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';

const React = require('react');

export const SignupPageStyles = `
.gh-portal-back-sitetitle {
    position: absolute;
    top: 35px;
    left: 32px;
}

This file has been truncated. show original

And here are some CSS:

github.com

TryGhost/Portal/blob/main/src/components/Frame.styles.js

/** By default, CRAs webpack bundle combines and appends the main css at root level, so they are not applied inside iframe
 * This uses a hack where we append `<style> </style>` tag with all CSS inside the head of iframe dynamically, thus making it available easily
 * We can create separate variables to keep styles grouped logically, and export them as one appeneded string
*/

import {GlobalStyles} from './Global.styles';
import {ActionButtonStyles} from './common/ActionButton';
import {BackButtonStyles} from './common/BackButton';
import {SwitchStyles} from './common/Switch';
import {AccountHomePageStyles} from './pages/AccountHomePage';
import {AccountPlanPageStyles} from './pages/AccountPlanPage';
import {InputFieldStyles} from './common/InputField';
import {SignupPageStyles} from './pages/SignupPage';
import {PlanSectionStyles} from './common/PlansSection';
import {ProductsSectionStyles} from './common/ProductsSection';
import {AvatarStyles} from './common/MemberGravatar';
import {MagicLinkStyles} from './pages/MagicLinkPage';
import {PopupNotificationStyles} from './common/PopupNotification';
import {OfferPageStyles} from './pages/OfferPage';

This file has been truncated. show original

Then yarn build command builds the minified portal JS portal.min.js, which you can copy to your theme under assets/built. This minified portal JS should be also configured in config.production.json of your Ghost instance, restart it and that’s all.

thebear.dev · May 6, 2021, 6:08pm

https://thebear.dev/ghost-how-to-change-the-portal-by-loading-the-script-from-your-theme/

techro · May 6, 2021, 6:26pm

Thanks for the answers!
So if I understand correctly, I will have to check every Ghost update if it breaks something? Right now this seems like too much hassle. An option to change it with a .hbs file would be very great in the future.

JavowiecPL · May 6, 2021, 6:30pm

I am working with these releases:

When there is an update (new release), I just merge changes, generate portal.min.js, copy it to the theme and upload theme.

You can do similar with Git (branches/tags and merging topics), but I have automated it in a different way.

Portal releases work similar to theme releases (e.g. Casper). When there is a new version of theme, you need to merge your changes with the updated version of your theme.

thebear.dev · May 7, 2021, 12:52pm

Yes. This is why you always run a local copy of your production and test everything before pushing live.

Topic		Replies	Views
Customizing Portal More Using Ghost	1	483	February 19, 2021
How to style login / subscribe modals? Themes	7	1497	June 29, 2022
How to customise the portal sign-up copy? Developer help	1	1082	March 21, 2021
How to modify the default casper Singup form Themes	5	714	December 17, 2021
How to modify and load the portal directly from your theme Developer help	4	1433	August 7, 2023

How to change signup popup?

Related Topics