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	20	});
21	21	</script>
22	22	</div>
	23	+
	24	+<div id="search-header">
	25	+ <%= render :partial => 'shared/profile_search_form' %>
	26	+</div>
	27	+
...	...
...	...	@@ -46,6 +46,10 @@ body {
46	46	);
47	47	}
48	48
	49	+#profile-header {
	50	+ min-height: 150px;
	51	+}
	52	+
49	53	#site-title { top: -40px; }
50	54
51	55	#user { top: -30px; }
...	...	@@ -65,6 +69,33 @@ body {
65	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	99	/* Title Header */
69	100
70	101	#content .main-block h1,
...	...	@@ -200,6 +231,14 @@ div#article-parent {
200	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	242	/* Editorial Area */
204	243
205	244	#content .box-1 .news-area {
...	...	@@ -240,6 +279,11 @@ div#article-parent {
240	279	background-image: none;
241	280	}
242	281
	282	+.blog-post {
	283	+ background: none !important;
	284	+ margin: 0px;
	285	+}
	286	+
243	287	/* Block My Network style */
244	288
245	289	#content .my-network-block {
...	...