Add cta-buttons.jpg, change the floating call to action buttons, modify the css to match the changes. (3f4289666)

Add cta-buttons.jpg, change the floating call to action buttons, modify the css to match the changes.

Andrew Lewman commited on 2011-06-06 02:54:21
Zeige 9 geänderte Dateien mit 157 Einfügungen und 34 Löschungen.

css/ie6.css 76eb8236c..613d7f890
css/ie7-and-down.css 15f12876e..c34bf3fa0
css/layout-rtl.css 2dd6f96bc..04191aa4d
css/layout.css c9da080a2..ff8f08573
donate/en/donate.wml f3e57159a..186166f69
en/navigation.wmi cf3127eea..e16614260
images/cta-buttons.jpg 000000000..d4d812eea
include/head.wmi 78afba28c..34851e7c0
include/navigation.wmi 7ba1c9459..dd9990b25

css/ie6.css

@@ -13,7 +13,22 @@ border: 0;
 #home #sidecol { width: 290px; }
 
 #calltoaction {
+	width: 300px;
+}
+
+#calltoaction ul {
+	width: 300px;
+	}
+
+#calltoaction ul li {
+	padding: 0;
+	margin: 0px;
+	width: 100px;
+	}
+
+#calltoaction ul li a {
 	margin: 0;
+	width: 100px;
 	}
 	
 #banner ul li { list-style: url(../images/white-bullet.gif) outside; }

css/ie7-and-down.css

Zeige Datei @ 3f4289666

@@ -2,10 +2,10 @@
 /* IE7 and Lower */
 
 
-#nav { margin: 0; }
+#nav { margin: 0; display: block; }
 #nav ul li a:link,
 #nav ul li a:visited {
-	display: block;
+	display: inline;
 	height: 50px;
 }
 
@@ -28,6 +28,15 @@ p.desc { margin: -10px 0 10px; }
 		border-bottom: 1px solid #ddd;
 	}
 
+#calltoaction ul li:first-child a:link,
+#calltoaction ul li:first-child a:visited {
+   background: url(../images/cta-buttons.jpg) top center no-repeat;
+	}
+	
+#calltoaction ul li:hover:first-child a {
+   background: url(../images/cta-buttons.jpg) bottom center no-repeat #ff9800;
+	}
+
 .hlist {
 	text-align: center;
 	display: block;

css/layout-rtl.css

Zeige Datei @ 3f4289666

@@ -26,6 +26,7 @@ h1#logo a:visited {
 			
 #calltoaction {
 	float: left;
+   margin-left: 5px;
 }
 	
 #calltoaction ul {
@@ -33,15 +34,13 @@ h1#logo a:visited {
 }
     
 #calltoaction ul li {
-  float: right;
-  margin-right: 10px;
+  float: left;
+  margin-right: 0px;
 }
 
 #calltoaction ul li a:link,
 #calltoaction ul li a:visited{
-  border-right: 1px solid #6ab334;
-  border-left: 1px solid #5a952b;
-  float: right;
+  float: left;
 }
 
 #banner {
@@ -189,7 +188,7 @@ table tr img {
 .windows,
 .mac,
 .linux,
-.android { padding: 5px 20px 5px 0; }
+.android { padding: 5px 30px 5px 0; }
 
 .windows { background-position: right center; }
 .mac { background-position: right center; }
@@ -215,7 +214,14 @@ table tr img {
 .warning {
 	background-position: right center;
 }
-.warning p { padding-right: 40px; }
+	.warning h2 {
+ 	  background: url("../images/warning2.jpg") no-repeat scroll right top transparent;
+		padding-right: 40px;
+		}
+	
+	.warning p {
+		padding-right: 20px;
+		}
 	
 .focus .icon {
 	float: right;
@@ -250,6 +256,40 @@ select#lang {
 	padding-left: 20px;
 }
 
+/* DONATION ADDITIONS ----------- */
+.dbox {
+	margin: 0px 10px 0px 0px;
+	}
+
+	.dbox input ,
+	.dbox select {
+	   padding: 0px 5px 0px 0px;
+	   }
+	
+	.dbox select.cur {
+		margin-right: 0px;
+		margin-left: 5px;
+		text-align: right;
+		}
+
+.dbox.donate {
+	text-align: right;
+	}
+
+	.dbox.donate .drow {
+		margin: 0px 20px 0px 0px;
+		}
+
+	.dbox.donate ul.amounts {
+		padding-left: 40px;
+		padding-right: 0px;
+		}
+
+.dbox.dl {
+	margin: -50px 20px 20px 0px;
+	float: left;
+  	}
+
 #footer .about {
 	padding-left: 30px;
 	border-left: 1px solid #ddd;

css/layout.css

Zeige Datei @ 3f4289666

@@ -71,11 +71,13 @@ body {
 		height: 30px;
 		float: right;
 		margin-top: 10px;
+		margin-right: 5px;
+		text-align: center;
 	}
 	
     #calltoaction ul {
       padding: 0;
-      margin: 0;
+      margin: 0px;
       height: 30px;
       list-style: none;
       float: right;
@@ -84,30 +86,78 @@ body {
       #calltoaction ul li {
         list-style: none;
         display: inline;
-        float: left;
-        width: auto;
-        margin-left: 10px;
+        float: none;
+        width: 100px;
+        margin-left: 0px;
       }
       
       #calltoaction ul li a:link,
       #calltoaction ul li a:visited {
-        background: #96c35a;
-        border-top: 1px solid #6ab334;
-        border-left: 1px solid #6ab334;
-        border-bottom: 1px solid #5a952b;
-        border-right: 1px solid #5a952b;
+        background: url(../images/cta-buttons.jpg) top center no-repeat;
         padding: 8px 8px 0px;
-        color: #222c14;
+        color: #FFFFFF;
         font-weight: bold;
         text-decoration: none;
-        font-size: 1.167em;
-        line-height: 1.167em;
+        font-size: 1.067em;
+        line-height: 1.067em;
         height: 22px;
+        width: 84px;
         float: left;
+        text-shadow: 0px -1px 2px #111111, 0px 1px 2px #666666;
+      }
+
+      #calltoaction ul li:first-child a:link,
+      #calltoaction ul li:first-child a:visited {
+        background: url(../images/cta-buttons.jpg) top left no-repeat;
+        -webkit-border-top-left-radius: 7px;
+		  -webkit-border-bottom-left-radius: 7px;
+		  -moz-border-radius-topleft: 7px;
+		  -moz-border-radius-bottomleft: 7px;
+		  border-top-left-radius: 7px;
+		  border-bottom-left-radius: 7px;
+        padding-left: 7px;
+        width: 85px;
+        }
+
+      #calltoaction ul li:last-child a:link,
+      #calltoaction ul li:last-child a:visited {
+        background: url(../images/cta-buttons.jpg) top right no-repeat;
+		  -webkit-border-top-right-radius: 7px;
+		  -webkit-border-bottom-right-radius: 7px;
+		  -moz-border-radius-topright: 7px;
+		  -moz-border-radius-bottomright: 7px;
+		  border-top-right-radius: 7px;
+		  border-bottom-right-radius: 7px;
+        padding-right: 9px;
+        width: 83px;
+        color: #FFFFFF;
+       }
+      
+      #calltoaction ul li:hover a {
+        background: url(../images/cta-buttons.jpg) bottom center no-repeat #ff9800;
+        font-weight: bold;
+        text-shadow: 1px 1px 4px #111111;
         }
       
-      #calltoaction ul li a:hover,
-      #calltoaction ul li a.active { background: #6ab334; }
+      #calltoaction ul li:hover:first-child a {
+        background: url(../images/cta-buttons.jpg) bottom left no-repeat #ff9800;
+        -webkit-border-top-left-radius: 7px;
+		  -webkit-border-bottom-left-radius: 7px;
+		  -moz-border-radius-topleft: 7px;
+		  -moz-border-radius-bottomleft: 7px;
+		  border-top-left-radius: 7px;
+		  border-bottom-left-radius: 7px;
+        }
+
+      #calltoaction ul li:hover:last-child a {
+        background: url(../images/cta-buttons.jpg) bottom right no-repeat #ff9800;
+		  -webkit-border-top-right-radius: 7px;
+		  -webkit-border-bottom-right-radius: 7px;
+		  -moz-border-radius-topright: 7px;
+		  -moz-border-radius-bottomright: 7px;
+		  border-top-right-radius: 7px;
+		  border-bottom-right-radius: 7px;
+        }
 
 
 /* BANNER ------------*/
@@ -654,6 +704,12 @@ small {
 		   background-color: #FFFFFF;
 			}
 
+		.dbox input.radio {
+			border: 0px solid;
+			background: #ffffed;
+			padding: 0px 0px;
+			}
+
 	.dbox select.cur {
 		margin-right: 5px;
 		text-align: left;

donate/en/donate.wml

Zeige Datei @ 3f4289666

@@ -92,15 +92,15 @@ jQuery(function(){
 			   </select>
 			  </span>
 			  <ul class="amounts">	
-		      <li><input type="radio" name="amount" value="2000.00"><label for="2000">2000</label></li>
-	  	      <li><input type="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
-		      <li><input type="radio" name="amount" value="500.00"><label for="500">500</label></li>
-		      <li><input type="radio" name="amount" value="250.00"><label for="250">250</label></li>
-		      <li><input type="radio" name="amount" value="100.00"><label for="100">100</label></li>
-		      <li><input type="radio" name="amount" value="50.00"><label for="50">50</label></li>
-		      <li><input type="radio" name="amount" value="20.00" checked="checked"><label for="20">20</label></li>
-		      <li><input type="radio" name="amount" value="10.00"><label for="10">10</label></li>
-		      <li><input type="radio" name="amount" value="5.00"><label for="5">5</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="2000.00"><label for="2000">2000</label></li>
+	  	      <li><input type="radio" class="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="500.00"><label for="500">500</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="250.00"><label for="250">250</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="100.00"><label for="100">100</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="50.00"><label for="50">50</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="20.00" checked="checked"><label for="20">20</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="10.00"><label for="10">10</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="5.00"><label for="5">5</label></li>
 		    </ul>
 		   </div>
 		   <div>

en/navigation.wmi

Zeige Datei @ 3f4289666

@@ -17,8 +17,8 @@
     );
     my @calltoaction = (
         'download/download'                , 'Download',
+        'getinvolved/volunteer'            , 'Volunteer',
         'donate/donate'                    , 'Donate',
-        'getinvolved/volunteer'          , 'Get Involved',
     );
 
 :>

images/cta-buttons.jpg

Zeige Datei @ 3f4289666

include/head.wmi

Zeige Datei @ 3f4289666

@@ -21,6 +21,9 @@ type="application/rss+xml">">
   <ifeq "$(STYLESHEET)" "" "<link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/master.css">">
 
   #<link href="css/master.css" rel="stylesheet" type="text/css">
+  <!--[if lte IE 8]>
+  <link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/ie8-and-down.css">
+  <![endif]-->
   <!--[if lte IE 7]>
   <link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/ie7-and-down.css">
   <![endif]-->

include/navigation.wmi

Zeige Datei @ 3f4289666

@@ -17,8 +17,8 @@
     );
     my @calltoaction = (
         'download/download'                , 'Download',
+        'getinvolved/volunteer'            , 'Volunteer',
         'donate/donate'                    , 'Donate',
-        'getinvolved/volunteer'            , 'Get Involved',
     );
 
 :>


...	...	@@ -13,7 +13,22 @@ border: 0;
13	13	#home #sidecol { width: 290px; }
14	14
15	15	#calltoaction {
	16	+ width: 300px;
	17	+}
	18	+
	19	+#calltoaction ul {
	20	+ width: 300px;
	21	+ }
	22	+
	23	+#calltoaction ul li {
	24	+ padding: 0;
	25	+ margin: 0px;
	26	+ width: 100px;
	27	+ }
	28	+
	29	+#calltoaction ul li a {
16	30	margin: 0;
	31	+ width: 100px;
17	32	}
18	33
19	34	#banner ul li { list-style: url(../images/white-bullet.gif) outside; }

...	...	@@ -2,10 +2,10 @@
2	2	/* IE7 and Lower */
3	3
4	4
5		-#nav { margin: 0; }
	5	+#nav { margin: 0; display: block; }
6	6	#nav ul li a:link,
7	7	#nav ul li a:visited {
8		- display: block;
	8	+ display: inline;
9	9	height: 50px;
10	10	}
11	11
...	...	@@ -28,6 +28,15 @@ p.desc { margin: -10px 0 10px; }
28	28	border-bottom: 1px solid #ddd;
29	29	}
30	30
	31	+#calltoaction ul li:first-child a:link,
	32	+#calltoaction ul li:first-child a:visited {
	33	+ background: url(../images/cta-buttons.jpg) top center no-repeat;
	34	+ }
	35	+
	36	+#calltoaction ul li:hover:first-child a {
	37	+ background: url(../images/cta-buttons.jpg) bottom center no-repeat #ff9800;
	38	+ }
	39	+
31	40	.hlist {
32	41	text-align: center;
33	42	display: block;

...	...	@@ -26,6 +26,7 @@ h1#logo a:visited {
26	26
27	27	#calltoaction {
28	28	float: left;
	29	+ margin-left: 5px;
29	30	}
30	31
31	32	#calltoaction ul {
...	...	@@ -33,15 +34,13 @@ h1#logo a:visited {
33	34	}
34	35
35	36	#calltoaction ul li {
36		- float: right;
37		- margin-right: 10px;
	37	+ float: left;
	38	+ margin-right: 0px;
38	39	}
39	40
40	41	#calltoaction ul li a:link,
41	42	#calltoaction ul li a:visited{
42		- border-right: 1px solid #6ab334;
43		- border-left: 1px solid #5a952b;
44		- float: right;
	43	+ float: left;
45	44	}
46	45
47	46	#banner {
...	...	@@ -189,7 +188,7 @@ table tr img {
189	188	.windows,
190	189	.mac,
191	190	.linux,
192		-.android { padding: 5px 20px 5px 0; }
	191	+.android { padding: 5px 30px 5px 0; }
193	192
194	193	.windows { background-position: right center; }
195	194	.mac { background-position: right center; }
...	...	@@ -215,7 +214,14 @@ table tr img {
215	214	.warning {
216	215	background-position: right center;
217	216	}
218		-.warning p { padding-right: 40px; }
	217	+ .warning h2 {
	218	+ background: url("../images/warning2.jpg") no-repeat scroll right top transparent;
	219	+ padding-right: 40px;
	220	+ }
	221	+
	222	+ .warning p {
	223	+ padding-right: 20px;
	224	+ }
219	225
220	226	.focus .icon {
221	227	float: right;
...	...	@@ -250,6 +256,40 @@ select#lang {
250	256	padding-left: 20px;
251	257	}
252	258
	259	+/* DONATION ADDITIONS ----------- */
	260	+.dbox {
	261	+ margin: 0px 10px 0px 0px;
	262	+ }
	263	+
	264	+ .dbox input ,
	265	+ .dbox select {
	266	+ padding: 0px 5px 0px 0px;
	267	+ }
	268	+
	269	+ .dbox select.cur {
	270	+ margin-right: 0px;
	271	+ margin-left: 5px;
	272	+ text-align: right;
	273	+ }
	274	+
	275	+.dbox.donate {
	276	+ text-align: right;
	277	+ }
	278	+
	279	+ .dbox.donate .drow {
	280	+ margin: 0px 20px 0px 0px;
	281	+ }
	282	+
	283	+ .dbox.donate ul.amounts {
	284	+ padding-left: 40px;
	285	+ padding-right: 0px;
	286	+ }
	287	+
	288	+.dbox.dl {
	289	+ margin: -50px 20px 20px 0px;
	290	+ float: left;
	291	+ }
	292	+
253	293	#footer .about {
254	294	padding-left: 30px;
255	295	border-left: 1px solid #ddd;

...	...	@@ -71,11 +71,13 @@ body {
71	71	height: 30px;
72	72	float: right;
73	73	margin-top: 10px;
	74	+ margin-right: 5px;
	75	+ text-align: center;
74	76	}
75	77
76	78	#calltoaction ul {
77	79	padding: 0;
78		- margin: 0;
	80	+ margin: 0px;
79	81	height: 30px;
80	82	list-style: none;
81	83	float: right;
...	...	@@ -84,30 +86,78 @@ body {
84	86	#calltoaction ul li {
85	87	list-style: none;
86	88	display: inline;
87		- float: left;
88		- width: auto;
89		- margin-left: 10px;
	89	+ float: none;
	90	+ width: 100px;
	91	+ margin-left: 0px;
90	92	}
91	93
92	94	#calltoaction ul li a:link,
93	95	#calltoaction ul li a:visited {
94		- background: #96c35a;
95		- border-top: 1px solid #6ab334;
96		- border-left: 1px solid #6ab334;
97		- border-bottom: 1px solid #5a952b;
98		- border-right: 1px solid #5a952b;
	96	+ background: url(../images/cta-buttons.jpg) top center no-repeat;
99	97	padding: 8px 8px 0px;
100		- color: #222c14;
	98	+ color: #FFFFFF;
101	99	font-weight: bold;
102	100	text-decoration: none;
103		- font-size: 1.167em;
104		- line-height: 1.167em;
	101	+ font-size: 1.067em;
	102	+ line-height: 1.067em;
105	103	height: 22px;
	104	+ width: 84px;
106	105	float: left;
	106	+ text-shadow: 0px -1px 2px #111111, 0px 1px 2px #666666;
	107	+ }
	108	+
	109	+ #calltoaction ul li:first-child a:link,
	110	+ #calltoaction ul li:first-child a:visited {
	111	+ background: url(../images/cta-buttons.jpg) top left no-repeat;
	112	+ -webkit-border-top-left-radius: 7px;
	113	+ -webkit-border-bottom-left-radius: 7px;
	114	+ -moz-border-radius-topleft: 7px;
	115	+ -moz-border-radius-bottomleft: 7px;
	116	+ border-top-left-radius: 7px;
	117	+ border-bottom-left-radius: 7px;
	118	+ padding-left: 7px;
	119	+ width: 85px;
	120	+ }
	121	+
	122	+ #calltoaction ul li:last-child a:link,
	123	+ #calltoaction ul li:last-child a:visited {
	124	+ background: url(../images/cta-buttons.jpg) top right no-repeat;
	125	+ -webkit-border-top-right-radius: 7px;
	126	+ -webkit-border-bottom-right-radius: 7px;
	127	+ -moz-border-radius-topright: 7px;
	128	+ -moz-border-radius-bottomright: 7px;
	129	+ border-top-right-radius: 7px;
	130	+ border-bottom-right-radius: 7px;
	131	+ padding-right: 9px;
	132	+ width: 83px;
	133	+ color: #FFFFFF;
	134	+ }
	135	+
	136	+ #calltoaction ul li:hover a {
	137	+ background: url(../images/cta-buttons.jpg) bottom center no-repeat #ff9800;
	138	+ font-weight: bold;
	139	+ text-shadow: 1px 1px 4px #111111;
107	140	}
108	141
109		- #calltoaction ul li a:hover,
110		- #calltoaction ul li a.active { background: #6ab334; }
	142	+ #calltoaction ul li:hover:first-child a {
	143	+ background: url(../images/cta-buttons.jpg) bottom left no-repeat #ff9800;
	144	+ -webkit-border-top-left-radius: 7px;
	145	+ -webkit-border-bottom-left-radius: 7px;
	146	+ -moz-border-radius-topleft: 7px;
	147	+ -moz-border-radius-bottomleft: 7px;
	148	+ border-top-left-radius: 7px;
	149	+ border-bottom-left-radius: 7px;
	150	+ }
	151	+
	152	+ #calltoaction ul li:hover:last-child a {
	153	+ background: url(../images/cta-buttons.jpg) bottom right no-repeat #ff9800;
	154	+ -webkit-border-top-right-radius: 7px;
	155	+ -webkit-border-bottom-right-radius: 7px;
	156	+ -moz-border-radius-topright: 7px;
	157	+ -moz-border-radius-bottomright: 7px;
	158	+ border-top-right-radius: 7px;
	159	+ border-bottom-right-radius: 7px;
	160	+ }
111	161
112	162
113	163	/* BANNER ------------*/
...	...	@@ -654,6 +704,12 @@ small {
654	704	background-color: #FFFFFF;
655	705	}
656	706
	707	+ .dbox input.radio {
	708	+ border: 0px solid;
	709	+ background: #ffffed;
	710	+ padding: 0px 0px;
	711	+ }
	712	+
657	713	.dbox select.cur {
658	714	margin-right: 5px;
659	715	text-align: left;

...	...	@@ -92,15 +92,15 @@ jQuery(function(){
92	92	</select>
93	93	</span>
94	94	<ul class="amounts">
95		- <li><input type="radio" name="amount" value="2000.00"><label for="2000">2000</label></li>
96		- <li><input type="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
97		- <li><input type="radio" name="amount" value="500.00"><label for="500">500</label></li>
98		- <li><input type="radio" name="amount" value="250.00"><label for="250">250</label></li>
99		- <li><input type="radio" name="amount" value="100.00"><label for="100">100</label></li>
100		- <li><input type="radio" name="amount" value="50.00"><label for="50">50</label></li>
101		- <li><input type="radio" name="amount" value="20.00" checked="checked"><label for="20">20</label></li>
102		- <li><input type="radio" name="amount" value="10.00"><label for="10">10</label></li>
103		- <li><input type="radio" name="amount" value="5.00"><label for="5">5</label></li>
	95	+ <li><input type="radio" class="radio" name="amount" value="2000.00"><label for="2000">2000</label></li>
	96	+ <li><input type="radio" class="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
	97	+ <li><input type="radio" class="radio" name="amount" value="500.00"><label for="500">500</label></li>
	98	+ <li><input type="radio" class="radio" name="amount" value="250.00"><label for="250">250</label></li>
	99	+ <li><input type="radio" class="radio" name="amount" value="100.00"><label for="100">100</label></li>
	100	+ <li><input type="radio" class="radio" name="amount" value="50.00"><label for="50">50</label></li>
	101	+ <li><input type="radio" class="radio" name="amount" value="20.00" checked="checked"><label for="20">20</label></li>
	102	+ <li><input type="radio" class="radio" name="amount" value="10.00"><label for="10">10</label></li>
	103	+ <li><input type="radio" class="radio" name="amount" value="5.00"><label for="5">5</label></li>
104	104	</ul>
105	105	</div>
106	106	<div>

...	...	@@ -17,8 +17,8 @@
17	17	);
18	18	my @calltoaction = (
19	19	'download/download' , 'Download',
	20	+ 'getinvolved/volunteer' , 'Volunteer',
20	21	'donate/donate' , 'Donate',
21		- 'getinvolved/volunteer' , 'Get Involved',
22	22	);
23	23
24	24	:>

...	...	@@ -21,6 +21,9 @@ type="application/rss+xml">">
21	21	<ifeq "$(STYLESHEET)" "" "<link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/master.css">">
22	22
23	23	#<link href="css/master.css" rel="stylesheet" type="text/css">
	24	+ <!--[if lte IE 8]>
	25	+ <link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/ie8-and-down.css">
	26	+ <![endif]-->
24	27	<!--[if lte IE 7]>
25	28	<link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/ie7-and-down.css">
26	29	<![endif]-->

tor-webwml.git