This project is read-only.

Nivo Slider as HTML Widget

Topics: Writing themes
Apr 19, 2011 at 1:17 AM

Has anyone had experience using the jQuery Nivo Slider ( in Orchard? I have it running the script the fine and the images are placed within a DIV that I created as an HTML widget to display on the home page only. The problem I seem to be having is that CSS is getting all dorked up and I can't figure out what Orchard might be wrapping around the HTML widget that could be causing it.

I think it may have something to do with "display: block" that Nivo slider uses. When I inspect the HTML, this CSS style is being overridden by something, but I can't see what. Here's a quick snippet of the really simple CSS for the main div in Nivo

#slider {
    position: relative;
    width: 618px;
    height: 246px;

#slider a {
    border: 0;
    display: block;


It's the display: block that is getting overridden. When I hover over the images, the current one shifts down about 30 pixels to display the navigation arrows which aren't placed where they should be according to how the CSS works when it's not inside Orchard.

I'll keep playing with it...I was just hoping that someone had experience using something like this inside an HTML widget and could save me a few hours of research =) Thanks!

Apr 19, 2011 at 1:18 AM

For anything CSS, Firebug (or your favorite browser's equivalent) is your friend.

Apr 19, 2011 at 10:33 PM

Yep...I'm using Chrome, so I use the Developer Tools, especially when doing CSS work. It ended up being a missing style sheet. The demo they created for the slider has 2 style sheets and they put them in different directories. Once I added the 2nd set of styles, everything started working fine. Not sure why they split the styles and put them in different directories.

Aug 11, 2011 at 5:09 PM

psenchal check your codeplex mail! greets