I would like to darken the shadow behind the transparent header. I found this custom CSS in your forum but it doesn't seem to make any difference, and I would like to be able to control the transparency and blur of the shadow itself.
Thanks, this definitely makes it darker, but is there a way to bypass the box? Just to have a dark to light vertical gradient that goes from top to bottom, but not within that framed rectangle?
is there a way to have this on even "light" slides? it only seems to work on "dark" slides. It would be amazing to have a light/white shadow/gradient for the light slides!
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):
Please try adding this CSS and also provide us a page url where we can see the Transparent Dark Header?.
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):
/* set gradient to white if its on dark slide */
#header-outer[data-transparent-header="true"][data-transparent-shadow-helper="true"].transparent.dark-slide:before {
background-image: linear-gradient(to top, rgba(0,0,0,0), rgb(255 255 255 / 75%)) !important;
}
If you head to - https://withfeeling.com/ - and you will see the first 2 rows look great with the dark shadow, and then when it comes to the pink row, it would be great to have the same but in White?
Both the url's have different settings enabled. Use below CSS:
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):
/* set gradient to white if its on dark slide */
#header-outer.transparent.dark-slide:before {
background-image: linear-gradient(to top, rgba(0,0,0,0), rgb(255 255 255 / 75%)) !important;
position: absolute;
pointer-events: none;
height: 120%;
top: 0;
left: 0;
width: 100%;
content: "";
display: block;
}
Hello-
I would like to darken the shadow behind the transparent header. I found this custom CSS in your forum but it doesn't seem to make any difference, and I would like to be able to control the transparency and blur of the shadow itself.
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"].transparent {
Can you please help out? Thank you!background-color: #0000004d!important;
}
Attached files: Screenshot 2023-06-26 at 9.53.15 AM.png
Hi there,
Thanks for choosing Salient.
Please try this css:
body.material #header-outer[data-header-resize="0"]:not([data-format=left-header]):not(.scrolled-down):not(.fixed-menu), body.material #header-outer[data-header-resize="1"]:not([data-format=left-header]):not(.scrolled-down):not(.small-nav), body[data-hhun="1"].material #header-outer[data-header-resize="0"][data-remove-fixed="0"]:not([data-format=left-header]):not(.scrolled-down):not(.fixed-menu).invisible {box-shadow: 10px 10px 8px #888888;
} body #header-outer[data-transparent-header="true"].transparent {
background-color: #00000061!important;
}
Thanks.
Thanks, this definitely makes it darker, but is there a way to bypass the box? Just to have a dark to light vertical gradient that goes from top to bottom, but not within that framed rectangle?
Something like this.....
Attached files: Screenshot-2023-06-26-at-11.44.17-AM.png
Hi there,
To add more dark shadow to the top try the following CSS:
#header-outer[data-transparent-header="true"][data-transparent-shadow-helper="true"].transparent:not(.dark-slide):before { background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1)); }Hope this helps.
Noah.
Awesome, this works perfectly, thank you!
is there a way to have this on even "light" slides? it only seems to work on "dark" slides. It would be amazing to have a light/white shadow/gradient for the light slides!
Any movement on this one? it could be quite cool!
Hello again,
Thank you for getting back to us.
Try changing the slides to light then we can add the CSS for what's possible.
We look forward to your feedback.
Cheers,
Hey Andrew!
It would be great to have the black gradient invert to White gradients for when the row text colour is set to "dark" have added an attachment to show
Attached files: Screenshot 2023-06-29 at 1.10.30 PM.png
Screenshot 2023-06-29 at 1.11.47 PM.png
Hey Again,
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):
#header-outer[data-transparent-header="true"][data-transparent-shadow-helper="true"].transparent.dark-slide:before { background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1)); }Thanks
ThemeNectar Support Team
Hey! Thanks! Could you show me a screen shot of what it looks like your end? its not showing up my side
Hey Tahir, any luck on the below? Thanks!
Hey Again,
Please try adding this CSS and also provide us a page url where we can see the Transparent Dark Header?.
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):
/* set gradient to white if its on dark slide */ #header-outer[data-transparent-header="true"][data-transparent-shadow-helper="true"].transparent.dark-slide:before { background-image: linear-gradient(to top, rgba(0,0,0,0), rgb(255 255 255 / 75%)) !important; }Thanks
ThemeNectar Support Team
Hey Tahir! I hope your weekend was good!
If you head to - https://withfeeling.com/ - and you will see the first 2 rows look great with the dark shadow, and then when it comes to the pink row, it would be great to have the same but in White?
Both the url's have different settings enabled. Use below CSS:
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):
/* set gradient to white if its on dark slide */ #header-outer.transparent.dark-slide:before { background-image: linear-gradient(to top, rgba(0,0,0,0), rgb(255 255 255 / 75%)) !important; position: absolute; pointer-events: none; height: 120%; top: 0; left: 0; width: 100%; content: ""; display: block; }Thanks
ThemeNectar Support Team
FANTASTIC!!! Thanks so much you are a genius!!