Add Title Colour Background To Specific Poster Image Blocks

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.

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;
}

@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;
}
}

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;
}

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;
}

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.

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;
}
}

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.

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.

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);
}

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.

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