JuniperDewdrop

11 hours ago, tuanphan said:

You mean category page, like this? https://www.juniperdewdrop.com/blog?category=Energy+Healing

Yes! So right now I only have the <Energy Healing> category, but I plan to add <Meditation> <Health & Wellness> <Energy Exercises> <Nutrition> categories here shortly. 

Is there a way to make blog post header colors for each category different? 

5 hours ago, tuanphan said:

To set headaer solid color on blog posts only, add this to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-image: linear-gradient(#0e68ed,rgba(14,104,237,0)) !important;
}

 

@tuanphan You did it again, you're a css genius!! That looks really beautiful and solves the problem. 

To take it one step further, would it be possible to assign different colors to blog categories? 

7 hours ago, tuanphan said:

It looks like you solved it?

Hey @tuanphan unfortunately, no. I changed the global header settings to have a semi transparent blue background, which sort of fixes the issue on blog posts, but interferes with the rest of the website.

Is there a way to have a solid header background color only on blog posts, and keep the header transparent on the other pages of the website?

Thanks so much! 

On 10/19/2020 at 4:22 PM, hdrinks said:

@tuanphan for 7.1, this totally worked to change the color of a transparent fixed nav when scrolling but not when the nav is at the top of the page. Would you know how to over-ride the nav background transparency and replace with a color when at the top of ONLY blog posts and not also the blog display page? I have actually used your answers from other questions as well, thank you so much for being such a great source of info! 

Hey @hdrinks @tuanphan

How did you manage to solve this for 7.1? I'm looking to do the same thing. Nav at just the top of screen and only on blog posts. Thanks so much! 

Hey @tuanphan could you please help with this? 

Does anyone have any ideas for this ^^^ ?

Site URL: http://juniperdewdrop.com

Hey Squarespace Friends!

I've got  bit of an issue I'm running into and cant't think of a solution without coding. I have my header set to transparent, that way I can add beautiful pictures as my first section to occupy the header background area. Unfortunately, blog posts don't let you add sections for some reason, and since my logo and main navigation is white you can't see those elements on blog posts. Please see:

www.juniperdewdrop.com/blog

and

https://www.juniperdewdrop.com/blog/what-is-remote-energy-healing

password: penguin  

Is there a way to change the header background color, but only on blog posts, and not the main blog page? Or would there be a way to add a picture as the header background, but only on blog posts? 

Thanks so much guys!
Mike

On 1/20/2022 at 7:24 PM, tuanphan said:

It looks fine from my end

Ok excellent. Thank you very much for your help. I guess it just looks that way on my end. 

Hey @tuanphan

Hope you're doing well!

Page link: JuniperDewdrop.com

Password: penguin

I've got the newsletter embedded in the footer, so it's at the bottom of every page.

Thanks again! 

Hey Guys,

I've come across a weird issue with my newsletter block in the footer section. It looks wonderful on desktop, but on mobile the width of text is being shrunken to a smaller size. I've set the content width as far as it can go in the newsletter block options. Here is how it looks when viewed on mobile:

What's also strange is when I go to edit this section it changes to how it should actually appear. See below:

Any help would be awesome thank you so much! 

Site: JuniperDewdrop.com

Password: penguin

Thank you so much @tuanphan!!!

Epic solution. Everything works perfectly, just as I was hoping it would. I have seen you help so many people on this forum. I deeply want to thank you, and let you know how much of an impact you have made for so many people. Have a fantastic day :)

Hey @tuanphan,

That drop shadow looks really beautiful thanks! 

Unfortunately, I also have some code that makes the button underneath the picture to expand on hover. If you check that out, the animation interferes with the picture drop shadow. Do you have a coding solution for that?

Or would it be better to add a spacer underneath the picture?? Thanks so much! 

Hey @tuanphan,

My site is JuniperDewdrop.com

Password: penguin

It's the second image block card on the home page: About Mike

Thanks so much for your help!!

Hey Everyone!

I'm trying to add a drop shadow to an image that is embedded in an image card. I have some custom code I'm using, and it looks really great on the image, but it is also adding the shadow to the text which looks really bad. Any help I could get with adding just the shadow to the image would be awesome! Thanks so much have a fantastic day!

Here's the code I'm using:

#block-3dab5bfd65b7b9ce7990 {
  filter: drop-shadow(15px 15px 5px #a0a0a0);
}