Donation bar replaced w/ slider bar?

[ybike]

Hi Bill,

I’m not sure if this question has already been addressed, but I’m wondering if it is possible to change the donation bar to a slider control bar.

Something that looks like this?
http://farm9.staticflickr.com/8063/8265204870_0cde54275b_b.jpg

Also is it possible to make the Featured images clickable links? I want visitors of our site to be less concerned w/ making a donation and explore our other programs. I was thinking of having images that link to different program pages as our featured images.

Thanks so much Bill! Everything has been going well so far with the site.

Brian

[Bill Robbins]

Brian,

Great question. That can be done rather easily with the current version of the theme (2.0 and up). It uses a different slideshow script which includes pagination for your slides. The theme has it turned off by default, but you can add it in. Here’s how:

1. Go to the Appearance section and select “edit.”
2. From the list of files on your right, choose custom-js.php and look for this spot:

   
   controlNav          :	false,
   

   and change it to this:

   
   controlNav          :	true,
   

3. Save your changes and next edit style.css. Scroll down to the bottom and paste this:

   
   .flexslider {
   	margin: 0 0 30px; 
   }
   
   .flex-control-nav {
   	display: block;
   } 
   
   .flex-control-nav {
   	width: 100%; 
   	position: absolute; 
   	bottom: -50px; 
   	text-align: center;
   }
   
   .flex-control-nav li {
   	margin: 0 6px; 
   	display: inline-block; 
   	zoom: 1; *display: inline;
   }
   
   .flex-control-paging li a {
   	width: 11px; 
   	height: 11px; 
   	display: block; 
   	background: #666; 
   	background: rgba(0,0,0,0.5); 
   	cursor: pointer; 
   	text-indent: -9999px; 
   	-webkit-border-radius: 20px; 
   	-moz-border-radius: 20px; 
   	-o-border-radius: 20px; 
   	border-radius: 20px; 
   	box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
   }
   
   .flex-control-paging li a:hover { 
   	background: #333; 
   	background: rgba(0,0,0,0.7); 
   }
   
   .flex-control-paging li a.flex-active { 
   	background: #000; 
   	background: rgba(0,0,0,0.9); 
   	cursor: default; 
   }
   

   and save your changes.

That will add in the pagination and also move the donation bar and/or widgets down just a bit. You can still turn off the donation bar if you want to though.

If you have questions or trouble, just let me know,
Bill

[Author]

Posts