Manual

High Visual/Functional Impact: Essential Template Adjustments

We strongly advise you to check if any of the adjustments outlined in this section are relevant to your modules, and if so follow the recommended steps to ensure the expected appearance and functionality.

Animations cut off?

Extend parent animation duration

Wherever layers are nested under a parent, the parent’s IN and OUT animations must be at least as long as those of the child layers. If a parent animation is shorter than a child’s, there will not be time for the child animation to complete, and it will appear to be cut off.

This is the case for Row & Column layers and their children, as well as Group layers and their children. In any place these layer types are used, check the IN and OUT animations, and if necessary, adjust their duration to be equal to or longer than any child layer’s animations.

For example, in the old version of the “Starry Night Parallax Zoom Effect Slider,” the layer Column-11 has an OUT animation duration of 300, while its children have a duration of 1000.

Correct this by setting the Column-11 OUT animation duration to 1000.

Custom script not Running?

Convert jQuery to pure JS.

SR7 Velocity engine no longer uses or ships with jQuery, so you should only convert all custom JavaScript to pure JS (aka Vanilla JavaScript).

For example, to add a class to an element, instead of using the jQuery addClass("classname"), use the pure JS classList.add("classname")

The new in-built API also includes some features to make this process easier. For example, instead of using jQuery to target the element of the current module, you can instead use revapiXXXX.element:

revapi4091.element.classList.add("tiny_bullet_slider");

For more details on developer-related changes in the SR7 Velocity engine, please read our SR7 Engine – Custom Code Porting & API Reference.

Custom script uses deprecated API event?

Use new API event

The SR7 Velocity engine comes with a new collection of in-built API events that can be tapped into via the standard JS addEventListener() method. When coding for SR7 Velocity engine mode, these events should be used in place of the jQuery bind() method, and any SR6 Genesis API events.

Any existing SR6 Genesis engine script can remain as is in the CUSTOM JS SR6 tab of the CSS/JS Editor, but an additional SR7 compatible script should be added to the CUSTOM JS SR7 tab.

To read more about the new events, please refer to the JavaScript Events section of our SR7 Engine – Custom Code Porting & API Reference.

Custom script uses deprecated API method?

Use new API method

The SR7 Velocity engine comes with a new collection of in-built API methods. When coding for SR7 Velocity engine mode, these new methods should be used in place of any previous SR6 Genesis API methods.

Any existing SR6 Genesis engine script can remain as is in the CUSTOM JS SR6 tab of the CSS/JS Editor, but an additional SR7 compatible script should be added to the CUSTOM JS SR7 tab.

To read more about the new methods, please refer to the JavaScript Methods section of our SR7 Engine – Custom Code Porting & API Reference.

Position slightly off on absolute positioned layer?

Remove margins on absolute position layers

When layers use absolute positioning, any margin settings will no longer have any effect. This means some absolute positioned layers may change positions if they depended on margin for their layout.

Rather than using margin to position a layer, remove any margin settings and use the X or Y position to fine-tune placement.

Sticky menu out of position or not jumping to page sections?

Update sticky menu

If your module uses a sticky menu, i.e. a menu that sticks to the top of the page, you may find that when you open the page the menu is out of position, possibly pushed off screen. If so, follow the steps below to update the menu.

You may also find that menu click triggered scrolling to page sections no longer works as expected. That is because this functionality was previously script based but should now be handled without code. Follow the steps below to implement this no-code functionality.

Step 1: Set Fixed on Top to ON

In the Module General Options sidebar, open the Layout sub-section:

Scroll down to the Advanced Settings panel and ensure Fixed on Top is toggled to ON:

Step 2: Convert Simple Link Actions to Scroll To ID

For each item in the menu, select it, and from the Layer Options sidebar, open the Actions panel:

Where there is a Simple Link action with an ID as the link URL, like so:

Replace it with a Scroll to ID action that targets the same ID, and additionally, set Animation Ease to power4.out, and Animation Duration to 400ms: 

Step 3: Delete sliderAnchors() Function

Implementing the Scroll to ID action means your template no longer needs the custom JavaScript function sliderAnchors(), so it can be deleted.

In the Module General Options sidebar, click CSS/jQuery to open the CSS/JS Editor window, then click the Custom JS SR6 tab:

Select and delete the sliderAnchors() code, which begins with the function sliderAnchors() { and looks like this:

…and ends with } sliderAnchors(); which looks like this:

You may also see the following code below the sliderAnchors() function, which can be deleted:

jQuery('body').on('click','.menutoggle',function() {
  var _ = jQuery('#menu_forcefullwidth');
  clearTimeout(jQuery('body').data('menutimer'));
  if (_.hasClass("opened"))
   jQuery('body').data('menutimer',setTimeout(function() {_.removeClass("opened")}, 400));
  else
  _.addClass("opened");
revapi163.revredraw();
 return false;
});

In the CSS/JS Editor, it looks like this:

Exit the CSS/JS Editor window, and then save your module.

Animation timing a little off?

Save new defaults

The new SR7 Velocity engine uses different defaults in various areas, such as animation timing. Sometimes, saving these new defaults into a module’s settings is all that’s required to solve minor issues. Follow the process below to do so.

Step 1: Open in the Editor

Open the module in the Module Editor.

Step 2: Open Each Slide

Switch to each slide in the module once.

Step 3: Save

Save to commit new defaults into the module.

Medium Visual Impact: Optional Template Adjustments

If any of the adjustments outlined in this section are relevant to your modules, it will deliver the best results if you apply the adjustments recommended in the linked section; however, it is not essential.

Custom CSS not taking effect?

Update deprecated CSS selectors

The SR7 Velocity Engine now generates a new collection of selectors in the form of classes, IDs, and custom elements. Therefore, to effectively target custom CSS, update the selectors used.

Where possible, the best practice is to add a custom class or ID name directly to a layer, then target that selector to ensure full compatibility with both the SR6 and SR7 frontend engines.

However, where this is impossible, you should add new selectors to your code alongside the existing ones.

For example, the “Le Chef Menu” module from the “Le Chef Restaurant” package uses this custom CSS:

a.rs-layer:active,
a.rs-layer:visited,
a.rs-layer:focus { outline: none !important; box-shadow: none !important; text-shadow: none !important; border: none !important; }

The rs-layer element has been replaced by the sr7-layer element, so a selector targeting the new element is added:

a.rs-layer:active, a.sr7-layer:active,
a.rs-layer:visited, a.sr7-layer:visited,
a.rs-layer:focus, a.sr7-layer:focus { outline: none !important; box-shadow: none !important; text-shadow: none !important; border: none !important; }

Read the Output HTML & CSS Selector Changes section of our SR7 Engine – Custom Code Porting & API Reference for a complete list of new selectors that replace legacy selectors.

Some examples you may more frequently encounter during CSS porting include:

• rs-layer element replaced with sr7-layer
• tp-bullet element replaced with sr7-bullet

Can’t see background gradient?

Convert background gradient CSS to in-built options

Slider Revolution has built-in tools for adding background gradients to layers. Older templates may still use custom CSS for this, but you can now replace it by configuring in-editor options.

You will find any remaining background gradient custom CSS in the CSS/JS Editor, as illustrated by the following example taken from the template “Particle Effect Three“:

You can directly transfer the values from this CSS into the editor’s BG Color option for a target layer.

For a complete guide on configuring background gradients, please read the gradient editing section of our guide, The Tools of the Color Selection Dialogue.

For example, “Particle Effect Three” used the following custom background gradient CSS on a button:

background: -webkit-linear-gradient(left,  #9357cc 0%,#2989d8 50%,#2cc99d 100%);

Transferred into the BG Color option for the target button layer, the gradient appears as pictured:

Once you have transferred your gradient settings onto each layer that uses the gradient style, you can delete the corresponding custom CSS.

Note: Specific template walk-through guides may contain additional specific information to help you with the conversion process, such as the gradient type, angle, and stops.

Layer z-index not correct when hovering?

Convert hover z-index CSS to in-built options

In some older templates, custom CSS may be used to set a z-index value when hovering over a layer. However, you can now achieve this with in-built options to replace any custom CSS used for this purpose. The process to do so is as follows.

Select the desired layer, then in the Layer Options sidebar open the Hover sub-section. In the Animation panel, change the z-index option to the required value. If you’re unsure what value to use, 20 will typically be effective.

Once done, remove any existing z-index custom CSS from the template.

Scroll on fade effect not visible?

Convert scroll fade JS to in-built

Slider Revolution has In-Built tools to add fading effects to a module as it scrolls up or down. Older templates may still use custom JavaScript to create this effect, but you can now replace it by configuring in-editor options.

In most cases, templates use the same scroll fade script so that you can replace it with the same process and configuration.

Start by opening the Module General Options sidebar and then the On Scroll sub-section. Then, switch to the Effects tab in the Scroll-Based Features panel and toggle Scroll-Based Effects to ON.

In the Scroll Effects Default panel that appears, toggle Fade to ON, and Slides default Enabled to ON.

In the Scroll Effects Settings panel that appears, set Direction to Top, Factor on BG’s to 1, and Factor on Layer to 1.3.

You can then delete any JS and CSS you used to create a scroll fade effect.

Low Visual Impact: Optional Template Adjustments

If any of the adjustments outlined in this section are relevant to your modules, you can optionally follow the steps recommended in the section to future proof and ensure expected functionality.

Using box-shadow CSS?

Convert box-shadow CSS to in-built

Slider Revolution has in-built tools to add box shadows to layers. Older templates may still utilize custom CSS to add box shadows, but you can replace them by configuring in-editor options.

You’ll find any remaining custom CSS for box shadows in the CSS/JS Editor, as exemplified in the following example from the “Parallax Scroll” template.

You can transfer the values from this CSS directly into the editor’s box-shadow options. Select a layer that uses the shadow style and open the Adv. Style sub-section in the Layer Options sidebar, and scroll to the Box Shadow panel.

Toggle the Effect option to ON, then copy the values from the custom CSS into the corresponding panel options.

For example, Parallax Scroll’s custom box-shadow CSS was:

box-shadow: 0px 20px 30px 0px rgba(9,21,54,0.25);

You can copy the first four values directly into the first four fields, and the rgba() value set in the Shadow Color option, like so: 

Once you have transferred your box shadow settings onto each layer that uses the shadow style, you can delete the box-shadow custom CSS.

Using pointer-events CSS?

Convert pointer-events CSS to in-built options

Slider Revolution contains in-built options that allow you to set pointer-events when hovering over a layer without using code. This means you can replace a template using any pointer-events CSS via the following process.

Select the desired layer, then in the Layer Options sidebar open the Hover sub-section. In the Hover panel, change the Pointer Event option to auto or none as required.

Once done, remove any existing pointer-events custom CSS from the template.

Using text gradient effect CSS?

Convert text gradient CSS to in-built options & layer CSS

Some templates may use custom CSS to create a text gradient effect. In-built options cannot fully reproduce this, but you can partially reproduce it by moving the remaining CSS into individual layers. 

We hope to automatically import this layer-based CSS into in-built functionality in the future. To future-proof your text gradients, we recommend you follow the process below.

Text gradient CSS will typically look like the following, found in the Mountain Parallax Header template:

.blurslider-gradient {  
background: -webkit-linear-gradient(left,  #ff557c 0%,#f3823c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

First, cut the -webkit-background-clip: text; and -webkit-text-fill-color: transparent; lines. 

Then select the target layer, and in the Layer Options sidebar, open the Custom CSS sub-section. Paste the two lines of CSS into the Custom CSS box at the top.

Then, recreate the background gradient CSS on the target layer.

For example, the CSS shown above is a linear gradient running from #ff557c to #f3823c, and looks like this when applied to the background of the target layer:

The layer-based CSS and the background gradient will combine to appear as a text gradient when previewed in the editor or viewed live:

For more information on converting CSS to background gradients, read the earlier section: Convert background gradient CSS to in-built options.

Repeat the above for any layer that needs the text gradient style.

Using IE11 fallback scripts you may no longer need?

Remove IE11 fallback scripts

Some templates may include fallbacks and polyfills for IE11. We consider IE11 support no longer required now, so IE11-related scripts are safe to remove. They do not cause harm, so leaving them in place if you wish is fine, but they are no longer necessary.

Targeting Apple Devices?

Decide on Apple Link Behavior

If you have installed a fresh copy of an updated template, you may notice different styling on certain links when using an Apple device.

This may be because we removed custom CSS using the a[x-apple-data-detectors] selector to ensure page link styling was inherited. If you wish, you can add this code back to the CUSTOM CSS tab of the CSS/JS Editor, specifying which properties you want to have inherited. For example:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}