I am looking to change the color of the strip in the Dark Knight default 6.x skin and the frequency of the slides. Can someone help me with the location of the CSS controlling the banner or a video that tells me how?

Thanks,

Dave

That dark strip at the top and the gray area below it are a background image. If you want to change that in the Dark Knight skin, you'll have to replace the image.

The slide show uses jQuery Cycle and it is built into a special container. If you want to change the behavior of the slide show, you will need to edit the file Portals\_default\Containers\DarkKnight\Banner.ascx.

As an aside, this is not the way that I would have done things. You can build the required HTML structure containing the images in the contents of an HTML module. Then, you place the scripts to call jQuery.cycle in either the header of footer of the module.

If you look at the page source for http://investedinc.org and look for Module 355, you will see the sort of structure that is needed. (That actually uses the Engage Rotator module which builds the HTML structure and calls jQuery.cycle to do the work.)

On that same page, the "Featured Board Member" module uses a Razor script to build the structure to be rotated, and uses jQuery.cycle in the module's footer section to call the rotator. It rotates a bit more than just a picture.

Another alternative is to use Will Strohl's gallery module (codeplex.com) to simplify this.

I appreciate the information. This makes so much more sense now.

You're a stud Joe, thanks again.

Dave

I have figured out how to modify the slides but how can I get rid of the navigator attached to the slider?

I have figured out how to modify the slides but how can I get rid of the navigator attached to the slider?

The Banner container uses the jQuery cycle plugin.

Look in Portal/_default/containers/Dark Knight for the .ascx file and the container.css file.

If you simply want to suppress display of the navigation, this style will do it:

.RotatorNav {display:none}

It's probably best to do this in portal.css or add that in the header of the banner module rather than alter the container.

Your other choice, would be to copy the container ascx file and modify the copy to do exactly what you want it to do. That way, you'll still have the original, and you'll have your version.

Thank you very much, this is very useful information, I was able to remove the navegaiton bar from the slider. One issue that I have encountered though, I edited the module to reflect my images in the slider and while I am on edit mode the images work fine and the slider shows my pictures. If I go back to view my images show as static images.

In which other file I need to change the names of the images?

Thanks a lot for your help!

I have answered my question about not viewing the slideshow in View mode. I had selected not to show the container and since the container is needed it was not running the script. Sorry about the unecessary question.

One new issue relating to the slider. It seems that my needed images are bigger than the container used by the sidebar. When the images are fading out it shows the bottom of the container a little bit giving some distortion to the change. Is there a way to adjust the background image? If yes, can yo tell me which image I should adjust? Thanks!

I would add a style to all of the images to give them a proper height and width. If you specify a width, they will be scaled in height.

Can you let me know which is the file that calls the different images for the slider Banner? I want to try with my own images.

On the default site, this is done with an HTML module and a special container that uses the jquery cycle plugin.

If you edit the contents of the module, you can replace those pictures with your own.

If you understand how to incorporate jQuery into an existing module, you can do this without the special container.