Changing the default slider height in Dandelion Theme

Please Note: Theme customizations go beyond the scope of our support services and this article is provided solely as a courtesy to our customers. Please take a moment to review the Scope of our Support.

In this article I will show you how to change the default slider height of the Nivo and Thumbnail sliders.

Instructions for Dandelion version 3.0.0 and newer:

Nivo Slider

1. In order to change the default height of the Nivo slider (to 500 pixels for example) you have to insert the following CSS into the Dandelion Options -> Styles Settings -> Additional Styles section:

@media screen and (min-width: 1010px) {
#nivo-slider {
min-height: 500px;
}
}

Please note that if you increase the default height, this modification will be applied when the site is visited from desktop computers in full-width, the default slider height will be still displayed on mobile devices.

2. If you have automatic image resizing enabled in the Nivo Slider section of the options panel, then you also have to modify the theme’s includes/slider-nivo.php file – you have to change line 65:

$path=pexeto_get_resized_image( $sliderImagesArray[$i], 980, 370 );

to be like this:

$path=pexeto_get_resized_image( $sliderImagesArray[$i], 980, 500 );

Thumbnail Slider

1. If you would like to decrease the default slider height you have to insert the following CSS into the Dandelion Options -> Styles Settings -> Additional Styles section:

#slider-img-wrapper, #slider {
height: 200px !important;
}

#slider img{
height:200px !important;
width:auto;
}

(replace the value of 200 with the height that you would like to apply)

OR if you would like to increase the default slider height, you have to insert the following CSS into the Dandelion Options -> Styles Settings -> Additional Styles section:

@media screen and (min-width: 1010px) {
#slider-img-wrapper, #slider, #slider img {
height: 500px !important;
}
}

(replace the value of 500 with the height that you would like to apply)

Please note that this modification will be applied when the site is visited from desktop computers in full-width, the default slider height will be still displayed on mobile devices.

2. If you have automatic image resizing enabled in the Thumbnail Slider section of the options panel, then you also have to modify the theme’s includes/slider-thumbnail.php file – you have to change line 65:

$path=pexeto_get_resized_image( $sliderImagesArray[$i], 980, 370 );

to be like this:

$path=pexeto_get_resized_image( $sliderImagesArray[$i], 980, 500 );

(replace the value of 500 with the height that you would like to apply)

Instructions for Dandelion version 2.9.1 and older:

Nivo Slider

To change the default height of the Nivo slider you have to insert the following CSS into the Dandelion Options -> Styles Settings -> Additional Styles section:

#nivo-slider {
height: 500px;
}

If you have automatic image resizing enabled in the Nivo Slider section of the options panel, then you also have to modify the theme’s includes/slider-nivo.php file – you have to change line 44:

$path=pexeto_get_resized_image($imgurl, 950, 350);

to be like this:

$path=pexeto_get_resized_image($imgurl, 950, 500);

Thumbnail Slider

To change the default height of the Thumbnail slider you have to insert the following CSS into the Dandelion Options -> Styles Settings -> Additional Styles section:

#slider-img-wrapper, #slider, #slider img {
height: 500px;
}

If you have automatic image resizing enabled in the Thumbnail Slider section of the options panel, then you also have to modify the theme’s includes/slider-thumbnail.php file – you have to change line 55:

$path=pexeto_get_resized_image($sliderImagesArray[$i], 980, 370);

to be like this:

$path=pexeto_get_resized_image($sliderImagesArray[$i], 980, 500);