How to customize email signup box CSS on footer of blog

christiancollard · January 12, 2022, 2:31pm

How do I find or edit the CSS for the email signup text box on blog posts for Casper theme?

I see that you can edit the text in the settings, but I would also like to change the background color. I assume I can inject code into the header - I just dont know what this element is called.

website here

brightthemes · January 12, 2022, 2:56pm

You can overwrite the background color, targeting the footer-cta class:

<style>
.footer-cta { background-color: #7031dd; }
</style>

Here is the relevant code section:

github.com

TryGhost/Casper/blob/main/post.hbs#L85-L100


      
              <section class="gh-content gh-canvas">
                  {{content}}
              </section>
          
          
    {{#if comments}}
                  <section class="article-comments gh-canvas">
                      {{comments}}
                  </section>
              {{/if}}
          
          
</article>
          </main>
          
          
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
          {{#if @site.members_enabled}}
          {{#unless @member}}

christiancollard · January 12, 2022, 3:18pm

Worked like a charm. THANK YOU

Topic		Replies	Views
Casper Theme: Help, help with a buncha little things, you smart people you! Themes	2	477	May 24, 2022
Sign-up CTA in header of Casper theme using code injection Themes	0	282	November 30, 2022
Change header background color Themes	9	530	April 13, 2023
Where is the default CTA template? Themes	1	1113	May 3, 2021
How to remove sign up for more like this option at the bottom of the page? Themes	10	2861	October 17, 2023

How to customize email signup box CSS on footer of blog

Related Topics