a-idea studio»WP Slide-up box»Customization tips

Customization tips

Table of contents


Animation modes

You can customize your slide-up box by adding special options to the shortcode:

mode="option"

Where values for “option” can be:

  • “bottom-up-full” (default)
  • “bottom-up-part”
  • “left-right”
  • “left-right-uncover”
  • “right-left”
  • “right-left-uncover”
  • “fade-in” (since v0.2)
  • “fade-out” (since v0.2)
  • “top-down-full” (since v0.2)
  • “top-down-part” (since v0.2)

Example:
[slideupbox id="539" mode="bottom-up-full" title="Example" desc="Some text..." size="medium"]

Result:

Example

Example

Some text...

Adding new sliding boxes

See the instructions here.


Editing the appearance of your sliding boxes

You can customize the look of the slide covers by using the mode names as .cover classes in your CSS file, like in this example:

If it’s not enough of customization for you, since v0.2 you can add class=”something” to your slideupbox shortcode. This class will appear in the HTML markup as a class of the cover container (since v0.4) div, so you’ll be able to add custom CSS codes to it. Example:

[slideupbox id="539" mode="bottom-up-full" title="Example" desc="Some text..." class="my_class"]

In your CSS files:


Customize every slide

If you’d like to customize your sliding boxes one-by-one, you can simply do it by using their id (”#slideup_xx”, where xx is the image id in the WP database). Since v0.4, this is added to the .wpsub-boxgrid container, not to the .cover!


Using WP Slide-up Box in your theme files

Since v0.2, you can use the plugin in your template files. This way you can even automatize the use of the plugin. You can do it with the wpsub_slideupbox( $arr ) function in your PHP code, where $arr is an associative array.

Example:

The ‘id’ parameter is obligatory as the plugin won’t show anything without it. All the other parameters are optional (the ‘target’ and ‘size’ parameters have been added in v0.3).

Result:


ALT attribute for the bottom image

Since v0.2, you can add the alt=”xy” parameter to your slideupbox shortcode, which will set the alt attribute of the img element behind the cover div.

Code:
[slideupbox id="539" alt="Some alternative text"]

If not set, the title of the box will be used as the alt text by default.


Adding links to the description

Since v0.4, you can add hyperlinks to the description part of the cover layer using a shorttag. This way you don’t have to be afraid that you break anything using a HTML anchor tag inside the shortcode.

Usage of the shorttag:

{{Link text|http://example.com}}

So it goes between double braces ({{ and }}) and a pipe (|) character separates the link text from the URL.

Example:

[slideupbox id="539" mode="bottom-up-part" title="Example" desc="Some text with a {{link to our website|http://a-idea.studio}}..." size="medium"]

Result:

Example

Example

Some text with a link to our website...

 

Please note:

  • obviously, because of this syntax, you can’t use the | character in the link text nor in the URL
  • if you use a link in the cover layer and a target link for the full box, then the latter will be disabled, because the HTML specification doesn’t allow links inside links
    • it means that a cover link has higher priority than the target (full box) link

Using custom image URLs instead of IDs

Since v0.4 you can use any image URL instead of an image ID as the id=”” parameter. It means that you can now “slideupize” even those pictures that are not uploaded to your site via wp-admin.

Example:

In this example I will add a slideup layer to the banner of the a-staff plugin which is located on the wordpress.org server.

[slideupbox id="https://ps.w.org/a-staff/assets/banner-772x250.png" mode="bottom-up-full" title="Example" desc="Some text ..."]

Result:

Example

Example

Some text ...

 

Please note: you can’t use the size parameter if you’re using a URL as the id.