Currently, this is how you can customize Portal:
Just wanted to say that you can also clone this repository:
and then:
[obraz]
This way adding the translation/customization to Portal is even easier than working with unminified JS.
If you don’t have an access to config.production.json file, you can always check:
which doesn’t rely on GUI from portal.min.js file.
You can check how Login/Subscribe functionality looks like here:
https://lyra.ghost.io/
In the repository linked above these are the files for Sign In/Sign Up:
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;
}
show original
And here are some CSS:
/** 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';
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.
1 Like