Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
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):
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):
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
I would like to make an overlay of a dark color over the images so the text is clearer.
I would also like to move the text so in some of them it is at the bottom of the image, not centered.
How do I do that?
Attached files: overlay.png
Hello Eliora,
Thanks for writing to us.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
.portfolio-items .work-info { background: #0000007d; } .portfolio-items .col .work-item.style-3 .vert-center, .portfolio-items .col .work-item.style-3-alt .vert-center, .portfolio-items .col .work-item.style-2[data-custom-content="on"] .vert-center { top: 87%; }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
the text moved but there is no overlay over the image
it didn't work the code you sent.
I want to add overlay to the image so it is darker.
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):
.wpb_gallery_slidesimage_grid .portfolio-items .col[data-default-color="true"] .work-item:not(.style-3) .work-info-bg { opacity:0.5 !important; background-color:#000 !important; display:block !important; }Thanks
ThemeNectar Support Team
thank you that worked.
How do I change the position of only some of the text.
eg nurture your wellbeing should be at the bottom but the blue box text in the middle
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):
.wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(2) .vert-center { top: 54% !important; }Thanks
ThemeNectar Support Team
thank you
and how do I move this text to the bottom left corner as in the image
so far I have this css but it didn't work
.wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(4) .vert-center,
.wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(7) .vert-center,
.wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(6) .vert-center{
text-align: left;
top: 90%;
horizontal-align: left;
}
Attached files: move.png
Hey Again,
Use the below Revised CSS.
.wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(4) .vert-center, .wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(7) .vert-center, .wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(6) .vert-center{ left: 0 !important; top: 90%; -webkit-transform: translateY(-50%) translateX(0%) translateZ(0); transform: translateY(-50%) translateX(0%) translateZ(0); }Thanks
ThemeNectar Support Team
Hi Eliora,
Thanks for writing back.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
.wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(4) .vert-center, .wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(7) .vert-center, .wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(6) .vert-center { left: 6em; }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Thank you 5em looked better but why this the 'thrive in you classroom' - see image attached
lower.
how do I make them on the same line
Attached files: New-Homepage-–-Aristotal-11-20-2024_11_35_AM.png
Hello Eliora,
Thanks for writing back.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
.page-id-1706 .wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item:nth-child(6) .vert-center { top: 81.5%; }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.