Download your bonus Free Goods before time runs out!
0 Days
0 Hrs
0 Min
0 Secs

Overlay Sliders Wordpress Plug-In

Live Preview

Overlay Sliders is a premium WordPress plug-in that adds extra hidden content on every page of your website, with an animated page overlay that showcases the content inside attractive tabbed sliders. Overlay Sliders can be used in a variety of ways, such as: revealing navigation menus, forms, recent posts, content from pages or posts, RSS or social media feeds, subscription offers, banner displays and so much more. The plug-in also automatically formats many types of content, allowing you to be up and running quickly. Included Plugin Options and Custom Meta Fields give you the option of customizing the look of your sliders and their content, giving you even greater control over how your showcased content is displayed. Additionally, we have included two powerful widgets – Display Page Content & Overlay Slider Buttons – that extend the plug-in's features even further. In fact, Display Page Content, which gives you the ability to display complete content from any page on your website, could be a plug-in all by itself. All you need to do is enter the ID of the page you want to display. PLUS, the Display Page Content widget works on any of your sidebars, not just those generated by your Overlay Sliders. ALSO, we have added a convenient plugin add-on that will add standard WordPress Categories and Tags to your Media Library, making it easier to select images for your Image Sliders.

Overlays are triggered by buttons, which can be positioned virtually anywhere on your web pages, using the easy-to-use included tools. The Overlay Sliders Plugin has a fully responsive layout, uses modern CSS3 transitions, and reacts to swipe gestures on mobile devices.

{{ pagination.totalCount }} Comments

You must be signed in to post a comment.
Prev
Next

Showing {{ pagination.fromCount }} - {{ pagination.toCount }} of {{ pagination.totalCount }}

How do I contact support?

If you need help with a product contact the shop owner here on the product page! Just click the Message icon on the upper right. For anything else visit our FAQ

Where do I add custom CSS styles?

Custom CSS styles can be added to our custom field on the Options page. The field is located under Additional Options > CSS Styles.

Common Overlay Slider CSS styles to customize

The following CSS styles are commonly customized manually by developers. For convenience, we have included a text box field under Options, where you can add custom styles.

BUTTONS
.tbmndefault .overlaymenubutton button – Default button array in page corner.
.overlaymenubutton button:hover, .overlaymenubutton input[type=”button”]:hover – Controls button style on hover.
.float-button .overlaymenubutton button – Controls buttons applied through shortcodes within page content.
button.sdbar – Controls buttons embedded within a sidebar using the Overlay Slider Button widget.
button.btnsz – Controls buttons located in the default button array, usually in the corner of your page.

SLIDERS
.overlay – Change color and opacity of overlay background.
.liquid-slider.tbmn, span.menslide .ls-nav a:hover, span.menslide .ls-nav .current a – Change background color of the slider.

CONTENT
.liquid-slider.tbmn ul li:nth-child(even) – Styles background color on every other item in a list.
.liquid-slider.tbmn ul, .liquid-slider.tbmn ol, .liquid-slider.tbmn ul a, .liquid-slider.tbmn ol a – Change color of text on lists.
span.menslide – Change color on most other text on your slider.

Why doesn’t my page content shrink when I open a slider?

If your page content does not shrink when you activate your sliders, go to Overlay Sliders > Options tab and manually add the outermost CSS class or ID in Page Wrapper ID under Frontend Customization.

In order to get this CSS style:

1 - Visit any page on your website.
2 - Right-click on your page and select View Page Source (or Show Page Source, depending on the browser).
The outermost CSS class or ID will be located just after your body tag. The body tag looks something like: .
3 - In the source code screenshot below, page is the outermost ID, so you would enter #page. If it were a ‘class’ you would enter .class, using a period (.) instead of (#).

What happened to my RSS Feed Widget title link after installing Overlay Sliders?

In order to make Overlay Sliders tabs display properly, Wordpress widgets that has live URLs on their titles must have those links disabled. The default RSS Feed widget has a live URL on its title and it is deactivated when you launch the plug-in, in order to make it available for your overlay sliders.

How is Overlay Sliders installed?

Upload the Overlay Sliders plugin to your website through FTP or any file upload tool, placing it in your "plugins" folder. Then activate it through the "Plugins" page or your Admin area.