Can a layer be persistent across slides?

Devin, I”ve updated this to show others how I managed to make one div persist on top of all slides in the Advanced Slider. In my case, I wanted a sign up form that would be visible within each slide, without having to duplicate the form for every slide.

Here’s what the finished product looks like:

Here’s what I did.

1. Open Pages > Your Homepage.
Below the advanced slider add a code block (see screenshot). In the code block, insert whatever html content you want to persist. In my case, it is a sign-up form that is visible (on top of) every layer.

<div class=”homeSignUp”>
<h2>Some form heading</h2>
<form action=”” method=”post”>
/* move classes to css file. I’m being lazy */
<input style=”display: block; float: left;” type=”text” name=”name” placeholder=”Name” />
<input style=”display: block; float: left;” type=”text” name=”email” placeholder=”Email” />
<input style=”display: block; float: left” type =”submit” name=”signup” value=”Notify me!” />
</form>
</div>

Make sure you give the div a class or id (“homeSignUp” is what I called it).

2. Now add some styles to position the element.
Open Appearance > Edit and add the div styles to styles.css

/* Change the stacking order of the container div that wraps the code block so it has a higher z-index than the slider. This ensures that the persistent div is on top of the slides. Also have to explicitly set the container’s position to “relative” so we can position our persistent div within it. */

.home .container {
/* content box must be have higher z-index than slider so
we can position sign up form on top of it */
position: relative !important;
z-index: 300 !important;
}

/* position the persistent div. This positions my “homeSignUp” div inside the container div */
.homeSignUp {
position: absolute;
left: 0px;
margin-top: -190px; /* a negative top margin pulls the code block layer up to the slider. Could have used “top” or “bottom” but this seemed to work better */
/* auto widths for this form will allow it to scale to mobile */
width: auto !important;
height: auto !important;
padding: 12px;
background: #fff;
border-radius: 6px;
background: #fcfcfc;
}
/* this is just signup for styling */
.homeSignUp form input[type=text] {
width: 160px !important;
margin: 0 10px 0 0 !important;
padding: 3px !important;
/* height: 26px !important; */
font-size: 120% !important;
}

.homeSignUp form input[type=submit] {
padding: 6px 14px 6px 14px !important;
}

This will get it working on desktop.

3. Add mobile styles with CSS media queries to reposition the element on mobile devices.

You don’t have to do this, but you may want to either remove the div or reposition it on some devices. I had no choice but to move the form out of the slider and back into the regular flow of the design.

Here’s what I have for portrait smartphones in my stylesheet. I’ll have to add media queries for landscape and tablets now but this is the idea anyway.

/* MEDIA QUERIES FOR MOBILE */
/* Smartphones (portrait) ———– */
@media only screen and (max-width:320px) {
.homeSignUp {
position: relative !important;
margin-top: 0px !important;
margin-bottom: 20px !important;
width: auto !important;
height: auto !important;
padding: 12px;
background: #fff;
border-radius: 6px;
background: #fcfcfc;
border: 1px solid #efefef;
text-align: center !important;
}
.homeSignUp form input[type=text] {
float: none !important;
width: 100% !important;
margin-bottom: 10px !important;
}
.homeSignUp form input[type=submit] {
float: none !important;
margin: 0 auto !important;
}

}

This seems like a lot of work, but really not, and, you cannot break anything, particularly if you are using a child theme. You could use the same method to position 1 image that persists across slides, one button, one whatevermajig.

• This reply was modified 10 years, 2 months ago by Tomzilla. Reason: Added solution to my question