Removing or changing position of subscribe button

Developer help
1

I am using the Penang theme. See current site here: https://weact.ghost.io/

I would like to either remove the subscribe button on the hero image banner or move it to the top menu. Is there a line I can input into code injection that will hide it?

I checked out the Penang documentation and was able to remove login/signup but that is it so far.

Thank you in advance!

2

Hi,
I can help you. You can send me email: electronthemes@gmail.com

Thanks

3

Maybe you can play with the CSS on your a test site, in the code-injection:

<style type='text/css'>
  div.c-hero__content { 
    position: absolute; 
    top: 0px; 
    left: 150px;
    z-index: 100; 
    background-color: rgba(0,0,0,0.10); 
    padding: 4px 8px;
  }
</style>

etc. etc.

The ‘Get Updates’ text is annoying because it doesn’t have a valid CSS selector - if that is changeable, you might want to delete it.

Of course you could go deeper and clone/change the hbs template.

4

Hey there,

Thanks for the response. I added this and now it is on the navigation bar which I think looks quite odd (see image). I was able to get rid of ‘Get Updates.’

Is there any way to just remove the button entirely or hide it? There is another place to subscribe at the bottom of the page so I don’t see it as necessary.

Screen Shot 2020-09-03 at 10.14.23 AM
Screen Shot 2020-09-03 at 10.14.23 AM1370×646 532 KB

5

I found the solution to hide it going off @jeff’s code by adding visibility: hidden;

<style type='text/css'>

  div.c-hero__content { 
          visibility: hidden;

    position: absolute; 

    top: 0px; 

    left: 150px;

    z-index: 100; 

    background-color: rgba(0,0,0,0); 

    padding: 4px 8px;

  }

</style>
6

Well done :slight_smile: - you are now coding in CSS!

An alternate option is:

display: none;

This is usually better - because the item does not take up space. With visibility:hidden; the item becomes invisible - but it still takes up space, and depending on your page, can lead to blank spaces for the invisible item.

In fact, that’s all you need - you can even put it on one line!

<style> div.c-hero__content {  display:none; } </style>

Remember - less is more - the less CSS and code you have the faster your page will load and display.

7

I like the less is more motto! You make a great point.

That line worked great and is exactly what I was trying to do.

Thanks again!