David_Ledger

On 10/8/2021 at 1:38 AM, tuanphan said:

Add to Design > Custom CSS

body.homepage {
figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s !important;
}

.gallery-grid-item-wrapper {
    position: relative !important;
}

figure.gallery-grid-item {
    position: relative !important;
}

p.gallery-caption-content {
    color: black;
    font-size: 2rem !important;
}

figure:hover figcaption.gallery-caption.gallery-caption-grid-simple {
    opacity: 1 !important;
    transition: all 0.3s !important;
}
}

 

@tuanphan Love this code. I am using it with the 

p.gallery-caption-content {
    color: black;
    font-size: 2rem !important;
}

swapped from 'black' to 'white'.  Based on this code is there a way to add a darken feature to the image on hover so the white text stands out a bit more? Thank you in advance.

Site URL: https://www.findyourfunds.org/apply-for-funds

Looking to add a second button to one of my list items in my Simple List. 

Currently looks like this:

I would like the right side entry to look like this, (and then be able to go in and change the link and description on the button):

Any thoughts?

Top of Home page, 3rd slide in slideshow.

Am currently using this code with a little better success, but would love whatever the better code would be to use.:

@media only screen and (min-width: 1500px) and (max-width: 5000px){.gallery-fullscreen-slideshow {height: 46vh!important;
  }}

Site URL: https://www.shahfoundation.org/

Below my header on the home page, I have placed a Gallery Section with the gallery option type of Slideshow: Full.  I have used images sized @2500px W x 600px H with a concentrated center image area of approx. 800px x 600 px for valuable information which I would like to appear on all screen sizes especially when going down to mobile view. 

This formula seems to work well without additional CSS, however at a certain larger screen size of 3000px on 30in monitor and full screen width on 15" laptop, the images begin to stretch beyond their full size, clipping the top and bottom of the image.

I previously have been using:

.gallery-fullscreen-slideshow{
    height: 46vh!important;
}

to adjust for the clipping of the image for the specific clipping I have seen, but is there better code to keep the slideshow from clipping at these larger screen sizes with a better responsive solution?

Thanks in advance.

Site URL: https://thefutur.com/brand-strategy-fundamentals#scroll-text1

Wondering if anyone knows how to pick this apart and create something similar in Squarespace.  What is needed? Javascript, CSS, HTML Combination? Not even sure where to start, any thoughts would be helpful to get me started.  I believe they built this in Webflow.1

Thank you,

https://thefutur.com/brand-strategy-fundamentals#scroll-text1

Site URL: https://www.map-ebt.org/snap

Client wants to send out texts with unique urls to track their analytics.

Examples url is https://www.map-ebt.org/snap-1 which redirects to webpage on site https://www.map-ebt.org/snap.

I have mapped the url on the site so it redirects, but do not see any analytics results.  Any thoughts?  The Squarespace URL Builder does not seem to allow for tracking on any url it seems like that service needs to be attached to paid ads from fb, ig, etc.

Any thoughts on how to track, do I need to make a page on Squarespace with the /snap-1 url to make this work? other steps?

Thanks,

David 

I am working in the business plan model.  Thank you in advance, I couldn't wrap my head around how to change the order.

Site URL: https://mushroom-sapphire-grdc.squarespace.com/

I am using a Side by Side summary block for a blog.

I would like to reorder how items show up on the summary:

I would like it to appear as follows:

1. Date (Primary Metadata) & Blog Excerpt on one line

2. Title of Blog Entry

3. Read More

Currently the closest I can get to with default settings is:

1. Date

2. Title of Blog Entry

3. Blog Excerpt

4. Read More

Any help would be appreciated, Thank you!

I appreciate you reaching out.  I originally put everything in the Design>Custom CSS area.  I was hoping to tidy up the site by moving CSS that only effected single pages pages over to the Code Injection areas.  No worries, it still works in the Custom CSS area.  Thank you!

I did that and it did not work.

I put this into the Into the Blog Page>Advanced>Page Header Code Injection:

<style>#block-yui_3_17_2_1_1596655451516_4134 {.image-overlay {box-shadow: 0px 0px 10px 4px (#fff);}}</style>

Thanks Derrick,

That is the plug-in I used to id the block.  Like I said previously, it works when added to Design>Custom CSS, but I am not sure how to write it if I just wanted to add it to the Page Header Code Injection area of my blog page instead of the Design>Custom CSS area.

Site URL: https://mushroom-sapphire-grdc.squarespace.com/