Customization and usage

Table of contents

  • Animation modes
  • Adding new sliding boxes
  • Editing or deleting your slide-up boxes
  • Editing the appearance of your sliding boxes
  • Customize every slide
  • Using WP Slide-up Box in your theme files
  • ALT attribute for the bottom image
  • 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” (from v0.2)
    • “fade-out” (from v0.2)
    • “top-down-full” (from v0.2)
    • “top-down-part” (from v0.2)

    Example:
    [slideupbox id="34" mode="bottom-up-full"]

    See the instructions here.

    Editing or deleting your slide-up boxes

    After you set up a slide-up box you can easily edit it on the admin page of the plugin (Appearance >> WP Slide-up box):
    Just edit the title, description and target url in the appropriate line and click on the Floppy Disk (Save) icon. Modify

    You can also easily delete slide-up boxes by clicking on the Delete (white “x” in red bubble) icon. Delete

    Editing the appearance of your sliding boxes

    If you’re familiar with editing CSS files, you can do many stylish modifications to the appearance of the sliding boxes by editing the slideupbox.css file in the plugin directory.

    You can also customize the different animation modes by using the mode names as .cover classes in your CSS file, like in this example:

    .cover.bottom-up-part h3 {
    // Some CSS code
    }
    .cover.fade-in p {
    // Some CSS code
    }

    If you’d like to customize your sliding boxes one-by-one, you can simply do it by using their id (class=”slideup_xx”, where xx is the image id in the WP database).

    If it’s not enough of customization for you, from 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 div, so you’ll be able to add custom CSS codes to it.

    Customize every slide

    Let’s say, you need to use the same picture several times, but with different Title and description text. From v0.2, you can do this easily using the title and desc shortcode parameters.

    Code:
    [slideupbox id="34 mode="bottom-up-part"]
    [slideupbox id="34" mode="bottom-up-part" title="Unique title" desc="Some other description."]

    Result:

    Some title

    Some title

    Some text with some more text, but not more than enough...

    Unique title

    Unique title

    Some other description.

    Using WP Slide-up Box in your theme files

    From v0.2, you can use the plugin with hard-coding into your theme files. This way you can even automatize the use of the plugin. You can do it with the slideupbox($arr) function in your PHP code, where $arr is an associative array.

    Example:

    <?php
    $arr = array (
        'id' => '34',
        'mode' => 'fade-in',
        'class' => 'yello',
        'title' => 'Yellow Submarine',
        'desc' => 'In the town where I was born,
                   Lived a man who sailed to sea,
                   And he told us of his life,
                   In the land of submarines',
        'alt' => 'Some alternative text',
    ) ;
    slideupbox ( $arr ) ;
    ?>
    
    CSS:
    .boxgrid .yello h3, .yello p {
    	color: yellow;
    }
    

    The ‘id’ parameter is obligatory as the plugin won’t show anything without it. All the other parameters are optional.

    Result:

    Some alternative text

    ALT attribute for the bottom image

    From 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="34 alt="Some alternative text"]

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

    « Next: Installation and Setup | Next: Download »