That is for the email design.
I’m referring to the button on the bottom left when you click on the portal button.
2 Likes
Ahh… apologies, I haven’t turned the portal feature on. Am going with the older method and using the theme. I added your query along with my own questions to Support and will update your thread soon.
Update: It’s not yet possible to disable the button from the Portal interface yet. But feedback to the Ghost team has been forwarded for consideration.
2 Likes
Until there’s an official fix for this, I am playing around with the JS and CSS tied to this. The link seems to be global. Have you tried using your theme to hide it? Example: .gh-portal-powered, .gh-portal-powered a{display:none!important;}
1 Like
I inserted your code in the code injection but it didn’t remove the button.
What other changes do I need to make?
Also what is the exact location of class=“gh-portal-powered” ? (Deleting that particular element from the file will work right?)
Not sure. I believe it’s inside a JS file. Right-click and inspect and check.
Hello all,
I managed to override Portal (portal.min.js).
I needed it for translation and to remove “Publish with Ghost” button on Portal.
This solution is for self-hosted Ghost instance. I don’t see any possibility to do it in Ghost Pro (I’ve switched to Digital Ocean droplet, so now I can override Portal).
How to override and customize Portal
Check url of your Portal in
/var/www/ghost/versions/{version}/core/shared/config/defaults.json
(can vary on different Ghost versions). In my example it looks like:
"portal": {
"url": "https://unpkg.com/@tryghost/portal@~1.1.0/umd/portal.min.js",
"version": "~1.1.0"
}
Open:
/var/www/ghost/config.{environment}.json
on your server and add:
"portal": {
"url": "/assets/built/portal.js",
"version": "~1.1.0"
}
You’ll need to restart Ghost in order to see changes made in config.{environment}.json:
ghost restart -d /var/www/ghost
Additional information about config.{environment}.json:
Unminify the JS file from the url you had in your Ghost instance (in my example: https://unpkg.com/@tryghost/portal@~1.1.0/umd/portal.min.js) with some online tool (google it: “unminify js online”).
Paste unminified JS to new portal.js file which should be creted under assets directory of your theme.
Remove code in portal.js responsible for adding “Publish with Ghosts” button on Portal:
Dt.createElement(
"div",
{ className: "gh-portal-powered" + (tn(["preview"]) ? " hidden" : "") },
Dt.createElement(
"a",
{
href: "https://ghost.org",
target: "_blank",
rel: "noopener noreferrer",
onClick: function () {
window.open("https://ghost.org", "_blank");
},
},
Dt.createElement(At, null),
" ",
Dt.createElement("span", null, "Publish with Ghost")
)
)
or add translations if you want them. CTRL + F is your friend.
Make sure that your theme will compile portal.js into assets/built/portal.js.
Casper Theme 4.0.4 example: portal.js compilation
The portal.js file can be created under /assets/portal/portal.js.
Then you need to modify gulpfile.js, so it will be compiled under /assets/built/portal.js.
Follow the below steps (everything should be done in gulpfile.js):
[1] Add:
function portal(done) {
pump([
src([
'assets/portal/*.js'
], {sourcemaps: true}),
concat('portal.js'),
uglify(),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
after function js(done).
[2] Add:
const portalWatcher = () => watch('assets/portal/**', portal);
after const cssWatcher.
[3] Change:
const watcher = parallel(cssWatcher, hbsWatcher);
to
const watcher = parallel(cssWatcher, portalWatcher, hbsWatcher);
[4] Change:
const build = series(css, js);
to
const build = series(css, js, portal);
And that’s it! Enjoy your customized Portal 
Cloudflare cache issue
I had an issue where changes were not visible for https://example.com/assets/built/portal.js after Theme update.
I had to login to Cloudflare and go to: Caching → Configuration → Purge Cache → Purge Everything in order to see updated portal.js
Real Ghost site example with Polish translation and without “Publish with Ghost” button
You can see it here: https://javowiec.pl
1 Like
@JavowiecPL you never need to modify core/shared/config/defaults.json
Whatever you put in your config.{environment}.json will override anything placed in the core file.
2 Likes
@vikaspotluri123 thank you! I didn’t know it. This is even better
I’ve added your remark to the solution
We are waiting for an update in which we can choose whether this text will be displayed or not.
@amun: Yes, I know. However, there are people who don’t want to wait. For example me
So, I’ve already overridden it. I’ll just switch to the official fix when it is available.
1 Like
I went with the config.production.json edit, pointing the portal.min.js file to my theme. Doing so allowed me to edit whatever I wanted (which is the official fix from Hannah on the Ghost team).
I also wanted to keep the “Publish with Ghost” button, but change its text and link and link target.
Your solution looks interesting though and it covers a broader area than mine. Thanks for doing it!
1 Like
Any plans to add this to settings in ghost admin?
Just wanted to say that you can also clone this repository:
and then:
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:
1 Like
I understand ghost not been very keen in giving us ( Self host ) the option to remove the ghost credit, but why not adding it as a paid option ?
I second…the “Publish with Ghost” is essentially an ad…and many people on Ghost/Substack rocketship are opposed to advertising…it’s sort of central
@JavowiecPL and @thebear.dev : you have been pioneers in the field of removing “Publish with Ghost”, like the Watson & Crick of that…I’m a noob, but it seems to me that the most elegant solution would rest entirely within the theme and not rely on the portal.min.js file
It’s possible to add any JS you want to the theme and the docs provide all the data attributes that the Portal UI uses…I run Ghost 4.3.3 and have a member flow that doesn’t make any visible use of the Portal…the only advantage of the integrated Portal popups is that they are well designed…but at the end of the day, they’re just modal popups
So will you consider replicating the Portal UI, but without the Publish with Ghost ad…I’d be happy to contribute $100 to that and others might want it too!
Portal.js is a single script for managing member signup and accounts - there is no requirement to use it. If you want to build your own signup UI, with your own branding, you can.
This is exactly the same as how Stripe (and most other services) work. If you want an out-of-the box “just works” solution - you have Stripe Checkout, which contains a small “Powered by Stripe” logo and has limited customisation. If that’s not enough for you, and you want to build your own UI, you can use Stripe Elements - giving you lots of shortcuts to create a custom flow, while being able to completely whitelabel it. If that’s still insufficient, you have the Stripe API and you can write something totally custom.
Ghost works the same way. We ship with Portal - which is a fixed UI. You can also build your own UI directly into the theme, completely whitelabeled. You can also use the Ghost API directly and build your own custom experience.
These are the options that are available — and at present there is no plan to change them.
Here are the docs for building members flows in themes: