Customizations

Custom themes

If the default themes are not visually compatible with your WordPress theme or you simply want to customize your slider as much as possible, you can easily create a custom theme. All you need is some knowledge of CSS. This chapter will help you get started.

To aid you in writing your custom theme’s CSS, here is the basic HTML structure of the slider:

<div class="theiaPostSlider_nav _upper">
    <a class="_prev">
        <span class="_1"></span>
        <span class="_2">Previous</span>
        <span class="_3"></span>
    </a>
    <span class="_text"></span>
    <a class="_next">
        <span class="_1"></span>
        <span class="_2">Next</span>
        <span class="_3"></span>
    </a>
</div>
<div class="theiaPostSlider_slides">...</div>
<div class="theiaPostSlider_nav _lower">
    [same as the first navigation bar]
</div>

If disabled, the previous and next buttons use a <span> tag instead of an <a> tag and have the “_disabled” class:

<span class="_prev _disabled">...</span>

First, go into the plugin’s CSS folder wp-content/plugins/theia-post-slider/css and copy the base.css file and paste it with another name such as my-theme.css. The file now contains the basic CSS rules needed for the slider to function, and you can now edit it to your liking. You should also review some other themes’ CSS files to see how they are made.

Second, you need to activate the new theme. Go into the plugin’s settings page Settings -> Theia Post Slider in the admin panel and select your new theme, which should be entitled My Theme if you named your file my-theme.css.

CSS Examples

Here are some CSS rules you can use for common scenarios.

Hiding the “Previous” button on the first slide:

.theiaPostSlider_nav._slide_number_0 ._prev {
    display: none;
}

Showing a full-width “Next” button:

.theiaPostSlider_nav ._buttons {
    display: block !important;
}

.theiaPostSlider_nav ._button {
    display: block;
    background: lightgrey;
}

Showing fully custom buttons:

.theiaPostSlider_nav ._button {
    background: lightgrey;
    border: 1px solid darkgray;
    border-radius: 16px;
    color: purple;
}

Using custom widths and hiding the previous button on the first slide

.theiaPostSlider_nav ._button {
    font-size: 30px;
    padding: 10px 0;
}
.theiaPostSlider_nav ._button svg {
    vertical-align: middle;
}
.theiaPostSlider_nav ._prev {
    width: 32% !important;
}
.theiaPostSlider_nav ._next {
    width: 62% !important;
}
.theiaPostSlider_nav._slide_number_0 ._prev {
    display: none;
}
.theiaPostSlider_nav._slide_number_0 ._next {
    width: 100% !important;
}

In this example you also need to set Navigation Bar -> Horizontal Position to Full-width. Here is the end result: