Subscribe:      
 

JQuery Image Slider for Announcement List in SharePoint 2007

Written By: Gayathri Narayanan -- 9/15/2011 -- join -- contribute -- (4091) comments -- printer friendly version

Rating: Rate --

Categories: Design, MOSS 2007, Navigation, Programming and Customizations, Visual Studio, Web Parts, WSS3

< Prev - 1 | 2 | 3 | 4 | 5 | 6 | - Next > | Become a paid author

Step 4:

The CSS file is the next most important part that runs the show exactly as it should. Copy and paste the given CSS file below to your existing css file that you have been using all along for your SharePoint site.

#contentcontainer 
	{
	width:520px;
	font-size:13px;
	font-weight:bold;
	margin-left:10px;
	float: left;
	}
	

.banner_shadow 
{
	margin-left:-20px;
	margin-top:5px;
	position:relative;
}	

#slider-wrapper 
{
	background:url('../tipimages/New_bannerbg.jpg') no-repeat;
    width:510px;
    height:290px;
	padding:5px 5px;
	margin-bottom:25px;
}

#contentcontainer .preview
{
    margin-left:30px;
	margin-top:-150px;
	position:absolute;
	z-index:999;
	width:460px;
	background:#FFF;
	display:none;
}


#contentcontainer .preview img
{
	float:left;
	width:123px;
	padding:5px 10px 5px 5px;
}

#contentcontainer .preview p
{
	padding:10px;
	color:#666;
	font-size:11px;
	font-weight:normal;
	line-height:14px;
}

#contentcontainer .preview p strong
{
	color:#000000;
	font-size:12px;
}

div.nivo-caption h4
{
	color:#ffcc00;
	font-size:14px;
	margin-bottom:5px;
}

.nivo-caption 
{
padding:8px 10px;
width:490px;
}

#description
{
    font-size:12px;
	font-weight:normal;
	line-height:14px;
}

#slider 
{
    width:510px;
    height:290px;
	overflow:hidden;
	background:url('../tipimages/loading.gif') no-repeat 50% 50%;
}
#slider a
 {
	border:0;
}

.indicator 
{
	
	display:block;
	width:60px;
	height:30px;
	z-index:999;
	position:absolute;
	margin-top:2px;
}

.first 
{
  left:170px;
}

.nivo-controlNav 
{
	color:#FFF;
	font-size:12px;
	margin:0 auto;
	margin-top:267px;
	position:relative;
	z-index:100;
}
.nivo-controlNav a 
{
	display:block;
	width:23px;
	height:23px;
	background:url('../tipimages/new_glossbar.jpg') no-repeat;
	color:#FFF;
	text-align:center;
	line-height:22px;
	float:left;
}
.nivo-controlNav a.active 
{
	color:#FFF;
	background:#ee9a03;
	
}

.nivo-caption 
{
    text-shadow:none;
}
.nivo-caption a 
{ 
    color:#efe9d1;
    text-decoration:underline;
}

< Prev - 1 | 2 | 3 | 4 | 5 | 6 | - Next >



Learn more about SharePoint



Sponsor Information




Copyright (c) 2010-2017 Edgewood Solutions, LLC All rights reserved
privacy | disclaimer | copyright | advertise | contribute | feedback | about
Some names and products listed are the registered trademarks of their respective owners.


MSSharePointTips.com | MSSQLTips.com