Introduction

The following update removes the title and teaser text from the Azione slider and modifies it to fit full-width. This mod is best used for HD video/video settings above 720p.  If you just want to display one video, it is better to use the Content Widget set to 1 column instead of modding the slider.

[box -content=”Modifications are at your own risk! We are unable to provide support for modified widgets or templates. If you plan to make several modifications, we recommend creating a child theme as future updates will inevitably overwrite your mods. You will need to carry mods forward into future versions – never overwrite updated theme files with backups of modified older files.” -type=”alert” -style=”rounded” -border=”full”]Modifications are at your own risk! We are unable to provide support for modified widgets or templates. If you plan to make several modifications, we recommend creating a child theme as future updates will inevitably overwrite your mods. You will need to carry mods forward into future versions – never overwrite updated theme files with backups of modified older files..[/box]

The Solution

1. From a local copy of the theme, open slider-widget.php under ocmx/widgets.

2.Resave the file as slider-widget-full.php

3. Change the class names on lines 2 and 4 to something unique, like slider_posts_widget:

class feature_posts_widget extends WP_Widget {
/** constructor */
function feature_posts_widget() {

4. Scroll to the bottom and change the class name on the last line. This keeps your widget from conflicting with the original.

5. The image or video size is controlled by the image arguments found near the middle of the file, which look like this:

$args  = array('postid' => $post->ID, 'width' => 700, 'height' => 390, 'hide_href' => false, 'exclude_video' => $post_thumb, 'wrap' => 'div', 'wrap_class' => 'post-image fitvid', 'imglink' => false, 'imgnocontainer' => true, 'resizer' => '700x390');

Change these to 960 width and 535 height:

$args  = array('postid' => $post->ID, 'width' => 960, 'height' => 535, 'hide_href' => false, 'exclude_video' => $post_thumb, 'wrap' => 'div', 'wrap_class' => 'post-image fitvid', 'imglink' => false, 'imgnocontainer' => true, 'resizer' => '960x535');

Note that the resizer value is dependent on declarations made in the theme’s functions file, so while the width and height can be anything, the resizer must match the theme’s full-width image dimensions.

6. Open scripts/theme.js and change the gallery container height on line 3, highlighted in red below, from 420 to 559:

jQuery(".gallery-container ul").animate({"top": -(new_frame*420)}, {duration: 350});

You should now have:

jQuery(".gallery-container ul").animate({"top": -(new_frame*559)}, {duration: 350});

Now change the content box width on line 4 from 250 to 960:

jQuery(".copy ul").animate({"left": -(new_frame*960)}, {duration: 500});

7. Upload the  modified widget file to wp-content/themes/azione/widgets and the theme.js to wp-content/themes/azione/scripts via FTP.

8. From your WordPress admin panel, go to Appearance > Theme Options  and enter the following into the Custom CSS

.slider {
max-height: 900px;
}
.gallery-container {
float: none;
height: 529px;
width: 940px;
}
.gallery-container ul li {
height: 529px;
}
.slider .copy {
float: none;
width: 940px;
margin: 10px;
}
.slider .copy ul li {
width: 930px;
}

Note: If you want to hide the title and excerpt,

7. Click Update File to save the changes when finished.