Skip to content
This repository was archived by the owner on May 5, 2021. It is now read-only.

Commit afb45d4

Browse files
gilbitrongilbitron
committed
v2.6 Adding themes. Also tweaked demo.
1 parent 1598267 commit afb45d4

23 files changed

+293
-81
lines changed

‎demo/demo.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<html lang="en">
44
<head>
55
<title>Nivo Slider Demo</title>
6+
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
7+
<link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
8+
<link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
69
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
710
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
811
</head>
@@ -11,8 +14,8 @@
1114

1215
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
1316

14-
<div id="slider-wrapper">
15-
17+
<div class="slider-wrapper theme-default">
18+
<div class="ribbon"></div>
1619
<div id="slider" class="nivoSlider">
1720
<img src="images/toystory.jpg" alt="" />
1821
<a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
@@ -22,7 +25,6 @@
2225
<div id="htmlcaption" class="nivo-html-caption">
2326
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
2427
</div>
25-
2628
</div>
2729

2830
</div>

‎demo/images/background.png

-14.2 KB
Binary file not shown.

‎demo/images/bullets.png

-1.36 KB
Binary file not shown.

‎demo/images/slider.png

-11.4 KB
Binary file not shown.

‎demo/style.css

+12-78
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,16 @@ aside, nav, article, figure {
5757
/*===================*/
5858
body {
5959
font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
60-
color:#2d3536;
61-
background:#e8e0c0 url(images/background.png) repeat;
62-
text-shadow:0 1px 0 #fff;
60+
color:#333;
61+
background:#eee;
6362
}
6463

6564
a, a:visited {
66-
color:#2d3536;
65+
color:blue;
6766
text-decoration:none;
68-
border-bottom:1px dotted #826a4d;
6967
}
7068
a:hover, a:active {
71-
color:#9e805c;
69+
color:#000;
7270
text-decoration:none;
7371
}
7472

@@ -84,78 +82,14 @@ a:hover, a:active {
8482
text-indent:-9999px;
8583
}
8684

87-
/*============================*/
88-
/*=== Custom Slider Styles ===*/
89-
/*============================*/
90-
#slider-wrapper {
91-
background:url(images/slider.png) no-repeat;
92-
width:998px;
93-
height:392px;
94-
margin:0 auto;
95-
padding-top:74px;
96-
margin-top:50px;
97-
}
98-
99-
#slider {
100-
position:relative;
101-
width:618px;
102-
height:246px;
103-
margin-left:190px;
104-
background:url(images/loading.gif) no-repeat 50% 50%;
105-
}
106-
#slider img {
107-
position:absolute;
108-
top:0px;
109-
left:0px;
110-
display:none;
111-
}
112-
#slider a {
113-
border:0;
114-
display:block;
115-
}
116-
117-
.nivo-controlNav {
118-
position:absolute;
119-
left:260px;
120-
bottom:-42px;
121-
}
122-
.nivo-controlNav a {
123-
display:block;
124-
width:22px;
125-
height:22px;
126-
background:url(images/bullets.png) no-repeat;
127-
text-indent:-9999px;
128-
border:0;
129-
margin-right:3px;
130-
float:left;
131-
}
132-
.nivo-controlNav a.active {
133-
background-position:0 -22px;
134-
}
135-
136-
.nivo-directionNav a {
137-
display:block;
138-
width:30px;
139-
height:30px;
140-
background:url(images/arrows.png) no-repeat;
141-
text-indent:-9999px;
142-
border:0;
143-
}
144-
a.nivo-nextNav {
145-
background-position:-30px 0;
146-
right:15px;
147-
}
148-
a.nivo-prevNav {
149-
left:15px;
150-
}
151-
152-
.nivo-caption {
153-
text-shadow:none;
154-
font-family: Helvetica, Arial, sans-serif;
155-
}
156-
.nivo-caption a {
157-
color:#efe9d1;
158-
text-decoration:underline;
85+
.theme-default #slider {
86+
margin:100px auto 0 auto;
87+
width:618px; /* Make sure your images are the same size */
88+
height:246px; /* Make sure your images are the same size */
89+
}
90+
.theme-pascal.slider-wrapper,
91+
.theme-orman.slider-wrapper {
92+
margin-top:150px;
15993
}
16094

16195
/*====================*/

‎demo/images/arrows.png renamed to ‎themes/default/arrows.png

File renamed without changes.

‎themes/default/bullets.png

1.25 KB
Loading

‎themes/default/default.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/*
2+
Skin Name: Nivo Slider Default Theme
3+
Skin URI: http://nivo.dev7studios.com
4+
Skin Type: flexible
5+
Description: The default skin for the Nivo Slider.
6+
Version: 1.0
7+
Author: Gilbert Pellegrom
8+
Author URI: http://dev7studios.com
9+
*/
10+
11+
.theme-default .nivoSlider {
12+
position:relative;
13+
background:url(loading.gif) no-repeat 50% 50%;
14+
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
15+
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
16+
box-shadow: 0px 1px 5px 0px #4a4a4a;
17+
}
18+
.theme-default .nivoSlider img {
19+
position:absolute;
20+
top:0px;
21+
left:0px;
22+
display:none;
23+
}
24+
.theme-default .nivoSlider a {
25+
border:0;
26+
display:block;
27+
}
28+
29+
.theme-default .nivo-controlNav {
30+
position:absolute;
31+
left:50%;
32+
bottom:-42px;
33+
margin-left:-40px; /* Tweak this to center bullets */
34+
}
35+
.theme-default .nivo-controlNav a {
36+
display:block;
37+
width:22px;
38+
height:22px;
39+
background:url(bullets.png) no-repeat;
40+
text-indent:-9999px;
41+
border:0;
42+
margin-right:3px;
43+
float:left;
44+
}
45+
.theme-default .nivo-controlNav a.active {
46+
background-position:0 -22px;
47+
}
48+
49+
.theme-default .nivo-directionNav a {
50+
display:block;
51+
width:30px;
52+
height:30px;
53+
background:url(arrows.png) no-repeat;
54+
text-indent:-9999px;
55+
border:0;
56+
}
57+
.theme-default a.nivo-nextNav {
58+
background-position:-30px 0;
59+
right:15px;
60+
}
61+
.theme-default a.nivo-prevNav {
62+
left:15px;
63+
}
64+
65+
.theme-default .nivo-caption {
66+
font-family: Helvetica, Arial, sans-serif;
67+
}
68+
.theme-default .nivo-caption a {
69+
color:#fff;
70+
border-bottom:1px dotted #fff;
71+
}
72+
.theme-default .nivo-caption a:hover {
73+
color:#fff;
74+
}

‎themes/default/loading.gif

1.7 KB
Loading

‎themes/orman/arrows.png

5.76 KB
Loading

‎themes/orman/bullets.png

3.29 KB
Loading

‎demo/images/loading.gif renamed to ‎themes/orman/loading.gif

1.7 KB
Loading

‎themes/orman/orman.css

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/*
2+
Skin Name: Orman Theme
3+
Skin URI: http://nivo.dev7studios.com
4+
Skin Type: fixed
5+
Description: A light and green skin for the Nivo Slider.
6+
Version: 1.0
7+
Author: Gilbert Pellegrom & Orman Clark
8+
Author URI: http://dev7studios.com
9+
*/
10+
11+
.theme-orman.slider-wrapper {
12+
background:url(slider.png) no-repeat;
13+
width:722px;
14+
height:337px;
15+
margin:0 auto;
16+
padding-top:18px;
17+
position:relative;
18+
}
19+
20+
.theme-orman .nivoSlider {
21+
position:relative;
22+
width:568px;
23+
height:268px;
24+
margin-left:77px;
25+
background:url(loading.gif) no-repeat 50% 50%;
26+
}
27+
.theme-orman .nivoSlider img {
28+
position:absolute;
29+
top:0px;
30+
left:0px;
31+
display:none;
32+
width:568px; /* Make sure your images are the same size */
33+
height:268px; /* Make sure your images are the same size */
34+
}
35+
.theme-orman .nivoSlider a {
36+
border:0;
37+
display:block;
38+
}
39+
40+
.theme-orman .nivo-controlNav {
41+
position:absolute;
42+
left:50%;
43+
bottom:-60px;
44+
margin-left:-30px; /* Tweak this to center bullets */
45+
}
46+
.theme-orman .nivo-controlNav a {
47+
display:block;
48+
width:10px;
49+
height:10px;
50+
background:url(bullets.png) no-repeat;
51+
text-indent:-9999px;
52+
border:0;
53+
margin-right:7px;
54+
float:left;
55+
}
56+
.theme-orman .nivo-controlNav a.active {
57+
background-position:0 -10px;
58+
}
59+
60+
.theme-orman .nivo-directionNav a {
61+
display:block;
62+
width:25px;
63+
height:200px;
64+
background:url(arrows.png) no-repeat 0% 50%;
65+
text-indent:-9999px;
66+
border:0;
67+
top:40px;
68+
}
69+
.theme-orman a.nivo-nextNav {
70+
background-position:100% 50%;
71+
right:-40px;
72+
padding-right:20px;
73+
}
74+
.theme-orman a.nivo-prevNav {
75+
left:-40px;
76+
padding-left:20px;
77+
}
78+
79+
.theme-orman .nivo-caption {
80+
font-family: Helvetica, Arial, sans-serif;
81+
}
82+
.theme-orman .nivo-caption a {
83+
color:#fff;
84+
border-bottom:1px dotted #fff;
85+
}
86+
.theme-orman .nivo-caption a:hover {
87+
color:#fff;
88+
}
89+
90+
.theme-orman .ribbon {
91+
background:url(ribbon.png) no-repeat;
92+
width:111px;
93+
height:111px;
94+
position:absolute;
95+
top:-3px;
96+
left:56px;
97+
z-index:300;
98+
}

‎themes/orman/readme.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Note: Images used in the slider for the Orman Theme should have the dimensions 568px x 268px

‎themes/orman/ribbon.png

12.5 KB
Loading

‎themes/orman/slider.png

35.2 KB
Loading

‎themes/pascal/bullets.png

3.23 KB
Loading

‎themes/pascal/controlnav.png

5.6 KB
Loading

‎themes/pascal/loading.gif

1.7 KB
Loading

0 commit comments

Comments
 (0)