Meet Laurel! Our latest Blog & Shop WordPress theme.

Okay
  Print

How to customize Rosemary's Featured Area Slider

Please note: This FAQ Article is specifically for the Rosemary theme.



Customization Options:

1. Adjust the slider's white overlay box opacity/transparency
2. Hide the slider's white box overlay completely
3. Make the slider's large images clickable
4. Adjust the slider's height
5. Adjust the slider's speed
6. How to disable the slider's auto-slide feature
7. Have slider display 1 static image & remove slide function entirely




1) Adjust the slider's white overlay box opacity/transparency

Slider Overlay Transparency Screenshot

Rosemary's featured area slider's white overlay box is set to be completely opaque (completely solid) by default. If you'd like to add some transparency, you can do so by adding the following into Appearance > Customize > Custom CSS:

.feat-overlay {background: rgba(255,255,255,.8); box-shadow: none;}


In the above code, there are 4 number values listed.
The 3 different "255" number values determine the color (in this case, it's the code for the color white).
The final decimal number represents the opacity/transparency of the overlay box.

The opacity options range from "0" up to "1".
"0" means it is completely transparent, while "1" means it is completely opaque.

I've set the above example to an opacity level of ".8" which offers slight transparency. Feel free to adjust to a lower decimal number for more transparency, or a higher decimal number for less transparency.
Experiment and find what works best for you!





2) Hide the slider's white box overlay completely

Hiding the white box overlay on the slider is a piece of cake! Simply copy & paste the following into Appearance > Customize > Custom CSS:

.feat-overlay {display: none;}


Slider Hide Overlay Screenshot






3) Make the slider's large images clickable

By default, Rosemary's featured area slider images are not clickable and they won't link to the post. Visitors can instead click through to the post via the slide's overlay which features the post category, title, date, etc.
To make the actual slider image link to the post, you can follow these steps:

You'll need to be able to access the theme's "featured.php" file, which is located within the theme's "inc" folder and then within the "featured" folder. Because the file is not within the main theme directory, you won't be able to simply access it via Appearance > Editor. You will need to do so via FTP, or, via a code editor plugin such as WPide (recommended).

Within "featured.php", on blank Line 18, you can copy and paste the following code:

<a href="<?php echo get_permalink(); ?>" style="position: absolute; height: 100%; width: 100%; top: 0; z-index: 999999; display: block;"></a>


Slider Clickable Image Link Screenshot


Be sure to save when you're finished editing the file.






4) Adjust the slider's height

Rosemary's slider dimensions are 1080px in width & 660px in height.
If you would like to reduce Rosemary's slider height, it's as simple as copying & pasting some code.

Adjusting the overlay's padding to accommodate the new slider height can be a bit complicated, so we've created a few pre-styled slider heights, including responsive CSS, for your convenience. A screenshot of what each height looks like follows each height option. Simply choose the slider height that appeals to you & copy its code into Appearance > Customize > Custom CSS:



Slider height of 580px:

.feat-item {height: 580px; padding: 17.2% 32.5%;}
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 510px; padding: 16.2% 28.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 444px; padding: 17.2% 25.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 16.2% 16.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 19.2% 20.5%;}}

Slider Height 580 Screenshot



Slider height of 500px:

.feat-item {height: 500px; padding: 13.2% 32.5%;} 
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 474px; padding: 15.2% 28.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 354px; padding: 12.2% 25.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 19.2% 22.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 14.2% 20.5%;}}





Slider height of 460px:

.feat-item {height: 460px; padding: 11.0% 32.5%;} 
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 375px; padding: 10.2% 29.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 350px; padding: 11.2% 26.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 15.2% 21.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 18.2% 20.5%;}}


Slider Height 460 Screenshot



Slider height of 400px:

.feat-item {height: 400px; padding: 9.3% 32.5%;} 
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 380px; padding: 10.2% 29.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 380px; padding: 12.2% 25.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 18.2% 19.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 18.2% 20.5%;}}


Slider Height 400 Screenshot

Please note: Adjusting the slider's width is unfortunately more complicated and would require more customization than we're able to assist with within basic theme support. If it's important to you, we would recommend looking into hiring a freelancer.






5) Adjust the slider's speed

Rosemary's slider is set to change slides every 6 seconds by default. You can change this by making a small adjustment within the "solopine.js" file.

To access the theme's "solopine.js" file, which is located within the theme's "js" folder , you will likely need to do so via FTP, or, via a code editor plugin such as WPide (recommended).

Within "solopine.js", look from Line 11 - Line 19.
Here, you'll see the following block of code for the featured area slider:

    // BXslider
    $('.featured-area .bxslider').bxSlider({
        pager: false,
        auto: true,
        pause: 6000,
        onSliderLoad: function(){
            $("#sideslides").css("visibility", "visible");
          }
    });

Line 15, where it says "pause: 6000," is where we can adjust the slider's speed.
The timer is measured in milliseconds, so "6000," translates to 6 seconds per slide before it rotates to the next. If you wanted to increase the slider time to 9 seconds, for example, you would replace the "6000," with "9000," instead.

Be sure to save your changes in the file when finished.





6 ) How to disable the slider's auto-slide feature


It is possible to remove the slider's auto-slide feature entirely so that visitors must navigate through the slides by clicking the left & right navigation arrows.

To remove the slider's auto-slide, you will need to access the theme's "solopine.js" file.

To access the theme's "solopine.js" file, which is located within the theme's "js" folder , you will likely need to do so via FTP, or, via a code editor plugin such as WPide (recommended).

Within "solopine.js", look from Line 11 - Line 19.
Here, you will see the following block of code:

    // BXslider
    $('.featured-area .bxslider').bxSlider({
        pager: false,
        auto: true,
        pause: 6000,
        onSliderLoad: function(){
            $("#sideslides").css("visibility", "visible");
          }
    });


On Line 14 specifically, you will see this bit of code:

auto: true,


To remove the auto-slide feature from the slider, simply replace the "true" value you see on Line 14 with a value of "false". When you're done, Line 14 should look like this:

auto: false,


Be sure to save the changes you made to the file when you're finished.





7) Have slider display 1 static image & remove slide function entirely


If you'd like to have your slider display 1 image and not function as a slider at all, we can disable the left/right buttons and remove the auto-slide function on not only desktop but also on mobile devices.

First, we will assign our 1 image to the slider area manually.

Please note that, by doing this, we will be overriding the slider's ability to pull in post featured images in the future. If you ever want to revert your slider area back into being a real, dynamic slider, you will need to revert the code back to its original state.

We will need to access a theme file that is not within Rosemary's main theme folder; to do this, we recommend installing a code editor plugin such as WPide. Once WPide is installed/activated on your WordPress, navigate to WP Dashboard > WPide > themes > rosemary > "inc" folder > and open up the file titled "featured.php".

On Line 17, you will see this line of code:

<div class="feat-item" style="background-image:url(<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full-thumb' ); echo $image[0]; ?>);">


You can replace that line of code with the following instead:

<div class="feat-item" style="background-image:url('YOUR-IMAGE-URL-HERE');">


Please replace the YOUR-IMAGE-URL-HERE dummy text with the URL of the static image you'd like to display in the slider. The easiest way to host an image online to get its URL would be to add it to your WordPress Media Library. Once uploaded, click the image and note the URL in the box that pops up.

Save changes to the file when you're finished.

Next, to disable the auto-slider feature & swipe-able slider feature on mobile, you can navigate to WP Dashboard > WPide > themes > rosemary > "js" folder > and open up the file titled "solopine.js".

Between Lines 11-19, you will see this block of code for the slider:

// BXslider
$('.featured-area .bxslider').bxSlider({
    pager: false,
    auto: true,
    pause: 6000,
    onSliderLoad: function(){
        $("#sideslides").css("visibility", "visible");
      }
});


Replace that block of code with the following block of code instead:

// BXslider
$('.featured-area .bxslider').bxSlider({
    pager: false,
    auto: false,
    pause: 6000,
    touchEnabled: false,
    onSliderLoad: function(){
        $("#sideslides").css("visibility", "visible");
      }
});


Be sure to save changes to the file when finished.

Lastly, to hide the left/right arrows from displaying on hover, you can navigate to Appearance > Customize > Custom CSS and copy & paste in the following:

.featured-area .bx-controls-direction {display: none;}


For guidance on how to hide the white overlay box from the slider, you can scroll up and see Customization Option #2 above.