Add a banner image to the top of a blog detal page

Hey.

Is there a way to add a banner image to the top of the blog detail page? I've been frustrated by this for so long as it makes the white gap makes the page look sterile and boring. I'd be happy if the image was repeated in the same for every blog page 😉

Here's hoping someone can offer a solution. 

Thanks in advance 🙂

You can do with CSS. If you share link to blog page + image url. I can take a look

10 hours ago, tuanphan said:

You can do with CSS. If you share link to blog page + image url. I can take a look

Thank you so much @tuanphan, you're rescuing me again.

It's the same website you've helped me with before 😉
https://meningitis-foundation.squarespace.com/personal-stories
pa33word

I will need to apply this to 3 different blogs. If you can give me the CSS for the first one I should (hopefully) be able to work out the rest.

Thanks in advance!!
Claire.

2 hours ago, Claire_auck said:

 

 

Add to Post Settings > Advanced > Header

<style>
.Main:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

6 minutes ago, tuanphan said:

Add to Post Settings > Advanced > Header

<style>
.Main:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

 

You are brilliant......!!!!
That worked a treat, thank you so much for your amazing help 😉 

Hi @tuanphan, this works really well, I just have one issue. @paul2009 has developed an amazing mega menu on a couple of my projects now and there is a conflict when I add this code. The menu is pushed below the new banner strip on the blog detail pages only. Is there something that you could tweak? 

https://meningitis-foundation.squarespace.com/podcast-stories-blog-1/a-survivors-story-sara-dwen-nee-martin
pa33word

Cheers 🙂

Edit .Main:before to

.Main.Main--blog-item:before

8 minutes ago, tuanphan said:

Edit .Main:before to

.Main.Main--blog-item:before

 

 

You are soooooo clever, it worked a treat!!!
Thank you for your amazing help as always 😉

14 hours ago, tuanphan said:

Add to Post Settings > Advanced > Header

<style>
.Main:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

 

Hi @tuanphan.  Will this work for 7.1 as well?  Thanks in advance.

4 minutes ago, JONNO said:

Hi @tuanphan.  Will this work for 7.1 as well?  Thanks in advance.

I haven't tested with SS 7.1. If you share link to blog page on ss 7.1, I can check.

30 minutes ago, tuanphan said:

I haven't tested with SS 7.1. If you share link to blog page on ss 7.1, I can check.

Thanks for your response.  I haven't launched a website with 7.1 yet so can't really share a link, sorry.  I tried the code you supplied for 7.0 and it doesn't seem to work for 7.1.  It would be nice to have a full bleed banner image on blog posts as the OP mentioned, even if it's the same image on all posts.  Not keen on all the bare space between the post and header, especially on desktop.

14 hours ago, JONNO said:

Thanks for your response.  I haven't launched a website with 7.1 yet so can't really share a link, sorry.  I tried the code you supplied for 7.0 and it doesn't seem to work for 7.1.  It would be nice to have a full bleed banner image on blog posts as the OP mentioned, even if it's the same image on all posts.  Not keen on all the bare space between the post and header, especially on desktop.

SS 7.1 uses this

<style>
.blog-item-wrapper:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

10 hours ago, tuanphan said:

SS 7.1 uses this

<style>
.blog-item-wrapper:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

 

@tuanphan you're a genius, thanks.  It looks great and was easy to implement.  Just one more thing... is it possible to add some code so that the image doesn't crop on different browser/screen widths?  I'd prefer for the entire image to resize if possible.  Thanks again so much!

On 4/2/2020 at 7:31 PM, Claire_auck said:

Hi @tuanphan, this works really well, I just have one issue. @paul2009 has developed an amazing mega menu on a couple of my projects now and there is a conflict when I add this code. The menu is pushed below the new banner strip on the blog detail pages only. Is there something that you could tweak?  

Hi @Claire_auck, @tuanphan and @paul2009,

This is my first post here and I have appreciated reading all of your posts. I am at the start of work on my wife's website, and I am really interested in building out a mega menu similar to the one(s) here: https://www.birchbox.com. I have some design and a little bit of JS background, and I am happy to do the legwork needed, but could someone please point me in the right direction? Is jQuery needed? Thank you so much, this seems to be a great community.

Edit: I am on SS 7.0 using Brine. Oops, and here is the site info.

URL — https://brandyglows.squarespace.com
P/W — temp

1 hour ago, brandyglows said:

URL — https://brandyglows.squarespace.com
P/W — temp

mega menu is paid plugin. You can find here https://sf.digital/squarespace-megamenu

or free guide https://www.adlyticmarketing.com/blog/squarespace-creating-a-mega-menu/

On 4/4/2020 at 10:56 PM, JONNO said:

you're a genius, thanks.  It looks great and was easy to implement.  Just one more thing... is it possible to add some code so that the image doesn't crop on different browser/screen widths?  I'd prefer for the entire image to resize if possible.  Thanks again so much!

Can you share link to your site?

2 minutes ago, tuanphan said:

mega menu is paid plugin. You can find here https://sf.digital/squarespace-megamenu

or free guide https://www.adlyticmarketing.com/blog/squarespace-creating-a-mega-menu/

Hi @brandyglows, I can absolutely recommend @paul2009 if you need a mega menu plug in, he's amazing to work with!
Good luck!

35 minutes ago, tuanphan said:

mega menu is paid plugin. You can find here https://sf.digital/squarespace-megamenu

or free guide https://www.adlyticmarketing.com/blog/squarespace-creating-a-mega-menu/

Thanks, @tuanphan! Don't know if you clicked through my link or not, but I have walked through the guide that you shared, and it is somewhat functional on my site already.  I was hoping to get a little feeedback and guidance RE: improving it or customizing the implementation as I'm not an expert on the SS template files.

PS. I'm not able to afford a paid plugin right now, and I also would enjoy the challenge of trying to customize it myself, once I get an idea of how SS templates are structured and what needs to be done. But thank you for taking the time!

29 minutes ago, Claire_auck said:

Hi @brandyglows, I can absolutely recommend @paul2009 if you need a mega menu plug in, he's amazing to work with!
Good luck!

Awesome, thank you! Maybe I will be fortunate enough to recieve his amazing feedback. Did you build or customize the mega menu yourself with guidance, or did you receive it fully built? Thanks again!

36 minutes ago, brandyglows said:

Awesome, thank you! Maybe I will be fortunate enough to recieve his amazing feedback. Did you build or customize the mega menu yourself with guidance, or did you receive it fully built? Thanks again!

I gave Paul a design and he created the menu and set it all up in the back-end. He's helping me with another client now.
I'm not very good at writing code (I'm a designer) so I really needed his help!
I'd love to see the result when you go live 🙂

11 minutes ago, Claire_auck said:

I gave Paul a design and he created the menu and set it all up in the back-end. He's helping me with another client now.
I'm not very good at writing code (I'm a designer) so I really needed his help!
I'd love to see the result when you go live 🙂

Okay, very cool. And thanks! I'm excited to figure out these challenges and hopefully have a much deeper understanding of SS at the end of it. Congrats on your projects, bytheway!

The megamenu Claire referred to is now available as a plugin/extension. Ideal for designers who want to design their own menu panels. It makes it really easy to add full-width navigation panels, using the flexible drag-and-drop functionality of Squarespace blocks. It's currently available for Squarespace 7.0 and will be available for 7.1 soon.

You'll find full details here: Megamenu extension for Squarespace.

Example megamenu: