Storefront Elegance theme. Change the size of the homepage slider

I have had a couple of people ask how to change the size of the slider on the homepage of Storefronts Elegance theme. So prepare to venture into some PHP code. This is really easy stuff, just changing a couple of numbers, show no fear and jump in even if you have never done it before.
New to PHP editing? see the Tools note at the end of this post

The line numbers here may change in other versions but I show enough code for you to be able to find the relevant parts, the code probably will not change much. You will need to maintain the PHP file when there are theme updates so keep a copy of it and what changes you made. The example code is from Elegance version 1.4.5.
On to the good stuff, you need to edit tpl-homepage.php which is in your theme folder. First make a backup copy of this file somewhere!

There are 2 numbers in the line of code highlighted below which are width and height in pixels. Change them to the values you want.

<div id="slider-frame">
	<div id="slider" class="nivoSlider">
			<?php //BEGIN Slider LOOP
			$loop = new WP_Query( array( 'post_type' => 'slide' ) );
			while ( $loop->have_posts() ) : $loop->the_post();
			$buttontext = get_post_meta($post->ID, "text", true);
			$buttonlink = get_post_meta($post->ID, "link", true);
			if(has_post_thumbnail()) {
			$thumb = get_post_thumbnail_id();
			$image = vt_resize( $thumb, '', 946, 360, true );
			}
			?>
			<a href="<?php echo $buttonlink; ?>" title="<?php the_title(); ?>"><img alt="<?php the_title(); ?>" title="<?php echo $buttontext; ?>" src="<?php echo $image['url']; ?>" width="<?php echo $image['width']; ?>" height="<?php echo $image['height']; ?>" /></a>
			
			<?php endwhile; //END SLIDER LOOP ?>

	</div><!-- /#slider -->
	<div class="clear"></div>
</div>

Close and save the file. You should be done. Remember if you mess up just replace the file with that backup copy you saved. You did save one right! Now you need to add some CSS.

Make it all fit with CSS

Now you just need a little CSS to make the slider fit. If you only changed the height the second slider margin: 0 auto rule is not required. See the notes below for where to put this code.

#slider img, #slider a, #slider a img, #slider {
height: 360px;
width: 946px;
}
/* center slider on page */
#slider {
margin: 0 auto;
}