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
Go to solution Solved by tuanphan,

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 post
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 pushe

Edit .Main:before to .Main.Main--blog-item:before    

@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?

Posted Images

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>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

Edit .Main:before to

.Main.Main--blog-item:before

 

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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 ūüėČ

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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 post
  • 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>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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 post
  • 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 post
  • 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/

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

Link to post
  • 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 post
  • 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 post
  • 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, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension. 
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Link to post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...