Jump to content

Add Title Colour Background To Specific Poster Image Blocks

Recommended Posts

  • Replies 7
  • Views 621
  • Created
  • Last Reply
10 hours ago, whoshenry said:

Site URL: https://corfuvillacollection.com

Hello, I'd like to change the colour or add colour to specific Poster Image blocks, not all of them across the website but I can't find the right code.

Also, how can I change the padding so it is more rounded?

Thanks.

Each block has a unique id, you can find it by using this extension

Chrome Web Store - Extensions (google.com) and replace below snippet.

Add it to Design->Custom CSS
 

#block-yui_3_17_2_1_1610289839946_11793 .image-block-v2 img {
  border-radius: 20px;
}

image.thumb.png.fb6ee5c4a812d0a502e12aeccb84b41f.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@whoshenry I see some pages on tablet doesn't look good.

eg. footer (email break new line). You can use this CSS to solve

/* Footer tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1563817416262_4590 {
    padding-right: 0;
}
}

image.thumb.png.f2288f43f19997d3b2b6d8c635c1ff7e.png

Footer icons are black color. If you want to change to black color, add this CSS

/* Footer social */
footer.Footer .sqs-use--icon {
    fill: white !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/11/2021 at 3:49 AM, bangank36 said:

Each block has a unique id, you can find it by using this extension

Chrome Web Store - Extensions (google.com) and replace below snippet.

Add it to Design->Custom CSS
 



#block-yui_3_17_2_1_1610289839946_11793 .image-block-v2 img {
  border-radius: 20px;
}

image.thumb.png.fb6ee5c4a812d0a502e12aeccb84b41f.png

Thank you for the help. I know about that extension and I use it, I mean I cannot find the right code to change the colour of the text within the Poster Image, what is the code to do this?

Many thanks.

Link to comment
On 1/12/2021 at 12:21 PM, tuanphan said:

@whoshenry I see some pages on tablet doesn't look good.

eg. footer (email break new line). You can use this CSS to solve


/* Footer tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1563817416262_4590 {
    padding-right: 0;
}
}

image.thumb.png.f2288f43f19997d3b2b6d8c635c1ff7e.png

Footer icons are black color. If you want to change to black color, add this CSS


/* Footer social */
footer.Footer .sqs-use--icon {
    fill: white !important;
}

 

Thank you so much for the help, really appreciate the input. That's great.

I would like some more help though if possible, I changed the social icons to white but I am using the WhatsApp logo via a link for the Social Icons and I can't seem to change that colour to white, any help would be much appreciated.

Thanks.

Screenshot at Jan 17 13-32-54.png

Link to comment
13 hours ago, whoshenry said:

Thank you so much for the help, really appreciate the input. That's great.

I would like some more help though if possible, I changed the social icons to white but I am using the WhatsApp logo via a link for the Social Icons and I can't seem to change that colour to white, any help would be much appreciated.

Thanks.

Screenshot at Jan 17 13-32-54.png

Replace your css to add the icon with this

.sqs-svg-icon--list a:nth-of-type(1) {
    background-image: url(https://static1.squarespace.com/static/5d2ce841564e410001656dc1/t/5f7199cab66cd43eed87ab94/1601280461403/WhatsApp+Logo+Black.png);
    background-size: 100%;
    background-repeat: no-repeat;
    filter: grayscale(1) invert(1);
}

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
15 hours ago, bangank36 said:

Replace your css to add the icon with this

.sqs-svg-icon--list a:nth-of-type(1) {
    background-image: url(https://static1.squarespace.com/static/5d2ce841564e410001656dc1/t/5f7199cab66cd43eed87ab94/1601280461403/WhatsApp+Logo+Black.png);
    background-size: 100%;
    background-repeat: no-repeat;
    filter: grayscale(1) invert(1);
}

Perfect, thank you. Another question if you don't mind. If you go to this page https://corfuvillacollection.com/villas - You see that the WhatsApp logo in the Navigation Bar doesn't change colour like the rest of the social icons, what code can I use to achieve this?

Thank you again.

Link to comment
9 hours ago, whoshenry said:

Perfect, thank you. Another question if you don't mind. If you go to this page https://corfuvillacollection.com/villas - You see that the WhatsApp logo in the Navigation Bar doesn't change colour like the rest of the social icons, what code can I use to achieve this?

Thank you again.

you should choose another icon, the image already in yellow background

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.