Customization

Changing the Visual Appearance Using CSS

You just need to edit a few CSS classes to change the visual appearance of VION. The sample CSS declarations for the gallery above can be seen below. The visual look has been completely changed by adding a few lines of CSS.

#custom-gallery {
    background: #fff;
    padding: 0px;
    height: 555px;
}

    #custom-gallery div.slide .image-holder {
        background: #999;
    }
    
    #custom-gallery div.slide .info h2 {
        font-size: 14px;
        color: #000;
    }

    #custom-gallery div.slide .info p {
        color: #000;
    }
    
    #custom-gallery div.thumbnails {
        width: 850px;
        height: 60px;
        margin-top: 28px;
    }
    
        #custom-gallery div.thumbnails ul {
            padding: 5px;
        }

        #custom-gallery div.thumbnails .indicator {
            border: 3px solid #be0016;
            padding: 2px;
            margin: -5px 0 0 -5px;
        }