Claire_auck Posted April 2, 2020 Share Posted April 2, 2020 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
tuanphan Posted April 2, 2020 Share Posted April 2, 2020 You can do with CSS. If you share link to blog page + image url. I can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Claire_auck Posted April 2, 2020 Author Share Posted April 2, 2020 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-storiespa33word 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
tuanphan Posted April 2, 2020 Share Posted April 2, 2020 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. Or send to forum message 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
Claire_auck Posted April 2, 2020 Author Share Posted April 2, 2020 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
Claire_auck Posted April 2, 2020 Author Share Posted April 2, 2020 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
tuanphan Posted April 3, 2020 Share Posted April 3, 2020 Edit .Main:before to .Main.Main--blog-item:before   Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Claire_auck Posted April 3, 2020 Author Share Posted April 3, 2020 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 comment
JONNO Posted April 3, 2020 Share Posted April 3, 2020 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
tuanphan Posted April 3, 2020 Share Posted April 3, 2020 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. Or send to forum message 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
JONNO Posted April 3, 2020 Share Posted April 3, 2020 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
tuanphan Posted April 4, 2020 Share Posted April 4, 2020 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. Or send to forum message 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
JONNO Posted April 4, 2020 Share Posted April 4, 2020 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
Guest Posted April 5, 2020 Share Posted April 5, 2020 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 Link to comment
tuanphan Posted April 5, 2020 Share Posted April 5, 2020 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. Or send to forum message 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
tuanphan Posted April 5, 2020 Share Posted April 5, 2020 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. Or send to forum message 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
Claire_auck Posted April 5, 2020 Author Share Posted April 5, 2020 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! Link to comment
Guest Posted April 5, 2020 Share Posted April 5, 2020 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! Link to comment
Guest Posted April 5, 2020 Share Posted April 5, 2020 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 comment
Claire_auck Posted April 6, 2020 Author Share Posted April 6, 2020 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
Guest Posted April 6, 2020 Share Posted April 6, 2020 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
paul2009 Posted May 28, 2020 Share Posted May 28, 2020 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: About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.