How to get rid of the drop shadow on content slides?

Permalink Browser Info Environment

i'd like to get rid of the drop shadow but only the ones which are cast from the parallax background to the content slides ... looks kind of wired to have the background cast a shadow on the foreground.


Type: Pre-Sale
Status: In Progress
View Replies:
jordif replied on at Permalink Reply

That's a functionality I wanted to add at some point (being able to disable the drop-shadow effect on some slides).

I've just released a new version of the theme that allows you to apply a class ("no-shadow") to any slide.

So if you update the theme through the dashboard, you should now be able to click on your content slides, select "Edit area design", click on the Gear Icon and choose the "no-shadow" custom class.

I've also added this to the Documentation:


silentdrummer replied on at Permalink Reply
thanks a lot!

it would be cool, if you could also copy this class (and also another one for "has-shadow") to the parallax-box where you ommit the shadow, so one can further tweak with custom classes there.
silentdrummer replied on at Permalink Reply
i was just wondering why you even create a separate <span> element in the parallax-box for the shadow and don't just set it with css to the actual slide-<div>. that way it might be easier to adjust the styles to each individual's needs.
jordif replied on at Permalink Reply

That's a good question. My first approach was to add the shadow directly to the slide div using the CSS box-shadow property.

However, some CSS properties such as "box-shadow" are pretty expensive in terms of performance (when scrolling the page). There are some good articles on Internet about that.

So after doing some testing, I opted for an old-school approach (using a separate element with a background image), which at the moment seemed to be the more lightweight and universal solution.

As for adjusting the slide styles (and depending on what styles you want to tweak), I'd recommend targeting the slide div itself:

// slides with no shadow {
// slides with shadow
.lss-slide:not(.no-shadow) {

If you want to target the shadow directly (to change the background image or tweak the styles):
.parallax-block .drop-shadow {

(Obviously, you can also hide the drop-shadow element and apply the CSS box-shadow directly to the slide div if you prefer.)

If this is not enough, just let me know and I'll add the classes to the parallax-block element in the next release of the theme.


silentdrummer replied on at Permalink Reply
thanks for your quick response!

i came up with the following style to apply an inverse bottom shadow (looks like the slide below is casting the shadow to the slide above) and applied it directly to the slide using the ":after" pseudo element (which btw. is also displayed in the edit mode as opposed to your approach).

in case anyone else has a similar need, here the code:

.lss-slide.shadow-bottom:after {
  display: block;
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: url(/packages/theme_long_story_short/themes/long_story_short/img/drop-shadow.png) repeat-x 0 0 transparent;
  content: "";
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
jordif replied on at Permalink Reply
Thanks again for sharing :)

concrete5 Environment Information

Unable to load environment info

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.42 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.