Is it possible to display Ghost Portal button on the left of the screen

Developer help
1

Hi, I am using my Ghost Portal button. It always displays on the bottom left of the screen. Ghost does not give you a choice. Is there any way to make it display on the right side of the screen or some other area of the screen?

Thank you.

2

I would advise against this from a UX standpoint. Most people will expect it to appear in the lower right (akin to why it’s not a good idea to put the hamburger menu on the left in mobile view).

4

Thank you both. I have a chat widget on the right. And I use the ghost site for a newsletter so I am okay having it on the left.

Based on what you said it’s going to be too much hassle. I don’t understand why ghost makes simple things so complicated gm

5

Bottom Left Corner:

.gh-portal-triggerbtn-iframe {
    bottom: 20px !important;
    left: 20px !important;
}

Top Left Corner:

.gh-portal-triggerbtn-iframe {
    top: 20px !important;
    left: 20px !important;
}

Top Right Corner:

.gh-portal-triggerbtn-iframe {
    top: 20px !important;
    right: 20px !important;
}

Bottom Right Corner:

.gh-portal-triggerbtn-iframe {
    bottom: 20px !important;
    right: 20px !important;
}

Semi-Transparent:

.gh-portal-triggerbtn-iframe {
    opacity: 0.5 !important;
}
1 Like
6

Thank you so much. I am very grateful to you. Do I paste it in Code Injection footer or somewhere else? I tried code injection footer but I don’t think that worked.

7

Nice :wink:

8

Code injection with a style tag should do the trick.

9

So, for example, copy/paste this into your Site Header Injection:

<style>
.gh-portal-triggerbtn-iframe {
    bottom: 20px !important;
    left: 20px !important;
}
</style>

(You are most welcome! :nerd_face: )

2 Likes
10

You are a star. Thank you so much :slight_smile:

1 Like
11

I know… it is an old thread… but:
I try to change the color of the button for the dark mode.
I tried the following:

  • set the --theme-accent color for light and dark
  • the light ist the normal accent color in the theme options (custom settings) and within my CSS file: --theme-accent: var(–ghost-accent-color);
  • for the datk mode I have set another var: --theme-accent: var(–dark_accent_color);

It works perfect for the intire side… but not for the portal button.

I tried the way above with the header code injection:

.gh-portal-triggerbtn-container-iframe { background: var(--theme-accent) !important; }

But no effect :(

12

See https://forum.ghost.org/t/source-theme-subscribe-button-text-color/53657/5

1 Like