Unfortunately, we currently don't have a way to add this into our theme. Adding this would require some extensive customization which I'm afraid we are not able to offer due to support scope limitations.
However, we are partnered with a trusted provider of expert-level Salient customization. If you are interested in initiating a project, we recommend referring to our guide at the following link: https://themenectar.com/salient/customization/
Try applying a mask using the below CSS and check.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thanks for getting back to me, I appreciate your help as always.
I've already used similar CSS on one of the service cards on the homepage, but have found that the "mask-image" attribute doesn't respond very well when reducing the screen size.
Do you know whether there is an alternative method to make these elements respond better for smaller devices? At the moment the mask either cuts off or leaves lots of spacing around the element depending on the "mask size" option that is selected.
You can adjust the below size values to make it scale responsively.
-webkit-mask-size: 100% 140%;
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Good morning,
Please can you advise on how I can edit the Nectar blog card to look like the one from my mock-up below?
This is how the blog card is currently styled. I’m having a hard time trying to replicate the shape of the blog card from the mock-up.
Hi Jordan,
Thank you for getting in touch.
Unfortunately, we currently don't have a way to add this into our theme. Adding this would require some extensive customization which I'm afraid we are not able to offer due to support scope limitations.
However, we are partnered with a trusted provider of expert-level Salient customization. If you are interested in initiating a project, we recommend referring to our guide at the following link: https://themenectar.com/salient/customization/
Best Regards,
Hi Andrew,
Thanks for your response.
Would it be possible to assign this ticket to Tahir to get his feedback please?
Hello Jordan,
Thanks for writing back.
Sure, we can assign to Tahir.
In the meantime, should you have any further questions or encounter any issues, please don't hesitate to reach out.
Best regards,
Hey Again,
Try applying a mask using the below CSS and check.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-post-grid-item { -webkit-mask-image: url(https://dpsac.nimsite.uk/wp-content/uploads/2024/02/shape-01.svg); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: top center; }Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for getting back to me, I appreciate your help as always.
I've already used similar CSS on one of the service cards on the homepage, but have found that the "mask-image" attribute doesn't respond very well when reducing the screen size.
Do you know whether there is an alternative method to make these elements respond better for smaller devices? At the moment the mask either cuts off or leaves lots of spacing around the element depending on the "mask size" option that is selected.
Hey Again,
You can adjust the below size values to make it scale responsively.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-post-grid-item { -webkit-mask-image: url(https://dpsac.nimsite.uk/wp-content/uploads/2024/02/shape-01.svg); -webkit-mask-size: 100% 140%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: top center; }Thanks
ThemeNectar Support Team