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

Image block: card - Code to add a drop shadow? (wells template)


jpwelchux

Question

21 answers to this question

Recommended Posts

  • 1

@jpwelchux Add to Home > Design > Custom CSS

.image-block-outer-wrapper {
    box-shadow: 1px 2px 3px 4px rgba(0,0,0,0.5);
}

Explain

  • 1px: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
  • 2px: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
  • 3px: The blur radius. The higher the number, the more blurred the shadow will be
  • 4px: The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
  • rgba(0,0,0,0.5)  The color of the shadow, you can use code (#000) or name (black) or rgb (rgb(0,0,0)) or rgba.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1

@jpwelchux remove above and use this

.image-block-outer-wrapper.design-layout-card {
    box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07);
}

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1
8 minutes ago, rod said:

@tuanphan This also worked for me thank you! Anyway of having it only apply to certain pages? Thank you for your time!

Edit Page > Add Code Block > insert code

<style>
  .image-block-outer-wrapper.design-layout-card {
    box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07);
}
</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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@jpwelchux if you share url i can take a look.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
8 minutes ago, rod said:

@tuanphan thanks for the reply! In 7.1 would I add code block to each section of a page? I tried that but it didn't seem to work. I appreciate any suggestions you have?

or add style above code to Page Header

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hey guys, I have this code to add a drop shadow under most of the button but it doesn't apply to the card blocks.

 

.sqs-block-button-element {
-webkit-box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.87); 
box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.50);
}

 

 

Does anyone have any ideas on how to apply it to the card block please?

Link to comment
  • 0
16 hours ago, Jeremyn said:

Hey guys, I have this code to add a drop shadow under most of the button but it doesn't apply to the card blocks.

 

.sqs-block-button-element {
-webkit-box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.87); 
box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.50);
}

 

 

Does anyone have any ideas on how to apply it to the card block please?

Can you share link to page where you use card blocks? Also you want to add shadow to card block button or card block?

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
21 hours ago, Jeremyn said:

Hey Tuan,

 

Here is the home page https://www.creativeportrait.net.au/

And there is 2 cards block button at the bottom of the page.

 

I am looking to add a card block button shadow across entire the website.

 

Cheers 🙂

Hi. You mean Get Started & Download My Product Guide buttons?

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Yes that's right. It would be amazing to have a code that apply it to every card block across the website.

 

Otherwise just the 2 buttons mentioned is fine.

 

Thank you very much Tuan

Link to comment
  • 0
On 7/23/2021 at 4:57 PM, Jeremyn said:

Yes that's right. It would be amazing to have a code that apply it to every card block across the website.

 

Otherwise just the 2 buttons mentioned is fine.

 

Thank you very much Tuan

Add to Design > Custom CSS

/* card image button shadow */
figure.design-layout-card .image-button a {
    box-shadow: -1px 2px 10px 4px rgb(0 0 0 / 70%) !important;
}

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/23/2021 at 4:57 PM, Jeremyn said:

Yes that's right. It would be amazing to have a code that apply it to every card block across the website.

 

Otherwise just the 2 buttons mentioned is fine.

 

Thank you very much Tuan

Also, do you need to help with these?

Site URL: https://www.creativeportrait.net.au/
1. (Mobile – Pop up) Image disappear

creativeportrait.net_.au-01-min.png

2. (Tablet/Mobile – Pricing) Image doesn’t show in full size

https://www.creativeportrait.net.au/pricing

creativeportrait.net_.au-02-min-1.png

3. (Mobile/Tablet – Blog posts)

https://www.creativeportrait.net.au/blog/the-emotional-benefits-of-having-family-photos-displayed-in-your-home

creativeportrait.net_.au-03-min.png

4. (Mobile/Tablet – Blog post) There is a scroll bar ai bottom of the page

https://www.creativeportrait.net.au/blog/what-to-wear-to-a-photo-session

creativeportrait.net_.au-04-min.png

5. (Mobile/Tablet – Blog post) Want to replace pagination by next/pre?

https://www.creativeportrait.net.au/blog/top-8-reasons-to-hire-a-professional-photographer

creativeportrait.net_.au-05-min.png

6. (Mobile – Blog post > Header) When scrolling down, header is cut off

https://www.creativeportrait.net.au/blog/what-to-wear-to-a-photo-session

creativeportrait.net_.au-06-min.png

7. (Tablet – Blog post) Want to increase text width?

https://www.creativeportrait.net.au/blog/lifestyle-vs-posed-portraits-whats-the-difference

creativeportrait.net_.au-07-min.png

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hey Tuan,

 

Thank you for spending the time to go over the pages and pointing out some issues that I didn't even noticed.

It would amazing if you could let me know how to add the image to the pop up. Squarespace get rid of it automatically on mobile.

Also I add the code that you send but I have an error: 

error evaluating function `rgb`: color functions take numbers as parameters
Link to comment
  • 0
On 7/25/2021 at 7:03 PM, Jeremyn said:

Hey Tuan,

 

Thank you for spending the time to go over the pages and pointing out some issues that I didn't even noticed.

It would amazing if you could let me know how to add the image to the pop up. Squarespace get rid of it automatically on mobile.

Also I add the code that you send but I have an error: 

error evaluating function `rgb`: color functions take numbers as parameters

ah, add this new code

/* card image button shadow */
figure.design-layout-card .image-button a {
    box-shadow: -1px 2px 10px 4px rgb(0,0,0,0.7) !important;
}

Which popup? Can you take a screenshot?

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hey Tuan, last code to add a shadow to a card block works perfectly, thank you very much.

 

As the text on the promotional pop up was too long, I needed to scroll to see the button. See photo attached. I was wondering if there is a code to extend the pop up window to see all the text and button but I just shorten the text and it is fine now.

IMG_2228.PNG

Link to comment
  • 0
On 7/30/2021 at 6:35 PM, Jeremyn said:

Hey Tuan, last code to add a shadow to a card block works perfectly, thank you very much.

 

As the text on the promotional pop up was too long, I needed to scroll to see the button. See photo attached. I was wondering if there is a code to extend the pop up window to see all the text and button but I just shorten the text and it is fine now.

IMG_2228.PNG

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.sqs-popup-overlay {
    height: 80vh !important;
}
}

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...