Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Claire_auck

Question

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 🙂

Link to comment

21 answers to this question

Recommended Posts

  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.


 

Link to comment
  • 0
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 😉 

Link to comment
  • 0

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 🙂

 

Link to comment
  • 0
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.

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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

Edited by brandyglows
Link to comment
  • 0
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/

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
35 minutes ago, tuanphan said:

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!

Edited by brandyglows
Link to comment
  • 0
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 🙂

Link to comment
  • 0
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!

Link to comment
  • 0

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:

demo-megamenu-on-off.thumb.gif.e05c0025e7a72d4c9eadf4d9f1502a61.gif

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...