MEET SITKA | A super-customizable modern WP 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:

Navigate to WP Dashboard > Appearance > Editor > open the "inc" folder > open the "featured" folder > and then open the file titled "featured.php". 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.

Navigate to WP Dashboard > Appearance > Editor > open the "js" folder > and then open the file titled "solopine.js". 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.

Navigate to WP Dashboard > Appearance > Editor > open the "js" folder > and then open the file titled "solopine.js". Within "solopine.js", look from Line 11 - Line 20

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");
          }
    });

Replace that block of code with the following instead. 

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

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 remove the scrolling effect.

Navigate to WP Dashboard > Appearance > Editor > "js" folder > and open up the file titled "solopine.js".

Between Lines 11-20, 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. Please note that if you have a cache plugin running or a cache tool on your web browser (desktop or mobile), you'll need to clear the cache(s). 

Next, navigate to WP Dashboard > Pages > Add New. Create a new page and give it any title you'd like, for example "Slider Image". Then, assign this page a Featured Image of your desired image you'd like to show in the slider. Publish the page when finished. While still on the page edit screen, look in your web browser's address bar at the top. Here, you'll see the page's URL which may look something like:

http://example.com/wp-admin/post.php?post=329&action=edit

Do you see the bit in the address that looks like "post=329"? This means that 329 is your new page's unique ID number (your page's ID number will be different than this example, of course). Note down this ID number. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Featured Area Settings > Select Featured post/page ID number > and type in your page's ID number (example: 329) into the field. Further down, check the boxes for the options "Hide all Categories", "Hide Featured Slider Title", "Hide Featured Slider Date", and "Hide Featured Slider Read More Button". Save changes. 

Now, your slider should display that 1 image without scrolling!