Add search input on header

Valessio Brito
1 parent 391d0d64
Showing 2 changed files with 49 additions and 0 deletions Show diff stats
header.rhtml
style.css
@@ -20,3 +20,8 @@
   });
 </script>
 </div>
+
+<div id="search-header">
+  <%= render :partial => 'shared/profile_search_form' %>
+</div>
+
@@ -46,6 +46,10 @@ body {
     );
 }
+#profile-header {
+    min-height: 150px;
+}
+
 #site-title { top: -40px; }
 #user { top: -30px; }
@@ -65,6 +69,33 @@ body {
     border: 1px solid #E8E8E8;
 }
+#search-header {
+    position: relative;
+    width: 960px;
+    margin: auto;
+}
+#search-header .search-field {
+    width: 200px;
+    position: absolute;
+    top: 100px;
+    right: 20px;
+    z-index: 999;
+}
+#search-header input.button.with-text {
+    width: 22px;
+    text-indent: -1000px;
+    float: right;
+    height: 30px;
+    max-height: 30px;
+    border: none;
+    background-color: transparent;
+}
+#search-header #q {
+    width: 170px;
+    height: 25px;
+    border-radius: 5px;
+}
+
 /* Title Header */
 #content .main-block h1, 
@@ -200,6 +231,14 @@ div#article-parent {
     clear: both;
 }
+#content .box-1 .article-block {
+    background: none;
+}
+
+#content .blog-post .title {
+    text-align: left;
+}
+
 /* Editorial Area */
 #content .box-1 .news-area {
@@ -240,6 +279,11 @@ div#article-parent {
     background-image: none;
 }
+.blog-post {
+    background: none !important;
+    margin: 0px;
+}
+
 /* Block My Network style */
 #content .my-network-block {
	@@ -20,3 +20,8 @@		@@ -20,3 +20,8 @@
20	});	20	});
21	</script>	21	</script>
22	</div>	22	</div>
		23	+
		24	+<div id="search-header">
		25	+ <%= render :partial => 'shared/profile_search_form' %>
		26	+</div>
		27	+
	@@ -46,6 +46,10 @@ body {		@@ -46,6 +46,10 @@ body {
46	);	46	);
47	}	47	}
48		48
		49	+#profile-header {
		50	+ min-height: 150px;
		51	+}
		52	+
49	#site-title { top: -40px; }	53	#site-title { top: -40px; }
50		54
51	#user { top: -30px; }	55	#user { top: -30px; }
	@@ -65,6 +69,33 @@ body {		@@ -65,6 +69,33 @@ body {
65	border: 1px solid #E8E8E8;	69	border: 1px solid #E8E8E8;
66	}	70	}
67		71
		72	+#search-header {
		73	+ position: relative;
		74	+ width: 960px;
		75	+ margin: auto;
		76	+}
		77	+#search-header .search-field {
		78	+ width: 200px;
		79	+ position: absolute;
		80	+ top: 100px;
		81	+ right: 20px;
		82	+ z-index: 999;
		83	+}
		84	+#search-header input.button.with-text {
		85	+ width: 22px;
		86	+ text-indent: -1000px;
		87	+ float: right;
		88	+ height: 30px;
		89	+ max-height: 30px;
		90	+ border: none;
		91	+ background-color: transparent;
		92	+}
		93	+#search-header #q {
		94	+ width: 170px;
		95	+ height: 25px;
		96	+ border-radius: 5px;
		97	+}
		98	+
68	/* Title Header */	99	/* Title Header */
69		100
70	#content .main-block h1,	101	#content .main-block h1,
	@@ -200,6 +231,14 @@ div#article-parent {		@@ -200,6 +231,14 @@ div#article-parent {
200	clear: both;	231	clear: both;
201	}	232	}
202		233
		234	+#content .box-1 .article-block {
		235	+ background: none;
		236	+}
		237	+
		238	+#content .blog-post .title {
		239	+ text-align: left;
		240	+}
		241	+
203	/* Editorial Area */	242	/* Editorial Area */
204		243
205	#content .box-1 .news-area {	244	#content .box-1 .news-area {
	@@ -240,6 +279,11 @@ div#article-parent {		@@ -240,6 +279,11 @@ div#article-parent {
240	background-image: none;	279	background-image: none;
241	}	280	}
242		281
		282	+.blog-post {
		283	+ background: none !important;
		284	+ margin: 0px;
		285	+}
		286	+
243	/* Block My Network style */	287	/* Block My Network style */
244		288
245	#content .my-network-block {	289	#content .my-network-block {