Commit f3c7ef5453e32b16740a2647368a1d266876d455
1 parent
e50b4ce5
Exists in
master
and in
29 other branches
ActionItem1: Layout Bar
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@473 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing
12 changed files
with
293 additions
and
76 deletions
Show diff stats
26.2 KB
215 Bytes
223 Bytes
225 Bytes
212 Bytes
211 Bytes
217 Bytes
238 Bytes
229 Bytes
278 Bytes
public/artwork/newbar/menu.css
| 1 | +body { | ||
| 2 | +margin:0px; | ||
| 3 | +padding: 0px; | ||
| 4 | +} | ||
| 5 | + | ||
| 6 | +#wrap { | ||
| 7 | +border: 3px solid #204a87; | ||
| 8 | +} | ||
| 9 | + | ||
| 10 | +/* Core do Tango na Barra | ||
| 11 | +* Azul Escuro - 204a87 | ||
| 12 | +*/ | ||
| 13 | + | ||
| 14 | + | ||
| 15 | +#noosfero_bar { | ||
| 16 | + position: fixed; | ||
| 17 | + background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x; | ||
| 18 | + top: -3px; | ||
| 19 | + height: 35px; | ||
| 20 | + margin-left: -3px; | ||
| 21 | + margin-top: 3px; | ||
| 22 | + margin-right: 3px; | ||
| 23 | + padding: 0px; | ||
| 24 | + font-family: serif-Sans, Verdana, Arial; | ||
| 25 | +} | ||
| 26 | + | ||
| 27 | +#noosfero_bar *:focus { | ||
| 28 | + color: red !important; | ||
| 29 | +} | ||
| 30 | + | ||
| 1 | #accessibility_menu { | 31 | #accessibility_menu { |
| 2 | float: left; | 32 | float: left; |
| 33 | + font-size: 10px; | ||
| 34 | + padding: 1px; | ||
| 35 | + color: #dfdfdf; | ||
| 3 | } | 36 | } |
| 4 | 37 | ||
| 5 | -#navigation_bar { | ||
| 6 | - float: right; | ||
| 7 | -} | ||
| 8 | -#search_box { | ||
| 9 | - clear: both; | 38 | +#accessibility_menu a { |
| 39 | + padding-left: 7px; | ||
| 40 | + margin-left: 2px; | ||
| 41 | + background: url("./images/icon_enter_mini.png") 0px 5px no-repeat; | ||
| 42 | + color: #dfdfdf; | ||
| 43 | + text-decoration: none; | ||
| 10 | } | 44 | } |
| 11 | 45 | ||
| 46 | +#accessibility_menu a:hover { | ||
| 47 | + color: #fff; | ||
| 48 | +} | ||
| 12 | 49 | ||
| 13 | -#navigation_bar ul{ | ||
| 14 | - margin: 0px; | 50 | +#navigation_bar ul { |
| 51 | + float: right; | ||
| 52 | + margin: 7px; | ||
| 15 | padding: 0px; | 53 | padding: 0px; |
| 54 | + right: 0px; | ||
| 55 | + text-align: right; | ||
| 56 | + top: 0px; | ||
| 16 | } | 57 | } |
| 17 | 58 | ||
| 18 | -#navigation_bar ul li{ | 59 | +#navigation_bar ul li { |
| 19 | list-style: none; | 60 | list-style: none; |
| 20 | - margin: 0px 0px 0px 15px; | ||
| 21 | - position: relative; | ||
| 22 | display: inline; | 61 | display: inline; |
| 23 | - font-family: sans-serif; | ||
| 24 | - font-weight: 800; | ||
| 25 | - font-size: 12px; | 62 | + font-size: 17px; |
| 63 | + margin-right: 5px; | ||
| 26 | } | 64 | } |
| 27 | 65 | ||
| 28 | -#navigation_bar ul ul li{ | ||
| 29 | - font-weight: 500; | ||
| 30 | - float: none; | ||
| 31 | - margin: 0px 0px 0px -40px; | ||
| 32 | - padding: 0px; | ||
| 33 | - border: none; | ||
| 34 | - border-top: 1px solid #F8F8F8; | ||
| 35 | - border-bottom: 1px solid #C0C0C0; | ||
| 36 | - display: block; | ||
| 37 | - float: left; | ||
| 38 | - width: 100px; | 66 | +#navigation_bar ul li a { |
| 67 | + padding-left: 5px; | ||
| 68 | + padding-right: 5px; | ||
| 69 | + padding-top: -2px; | ||
| 70 | + padding-bottom: 3px; | ||
| 71 | + color: #fff; | ||
| 72 | + text-decoration: none; | ||
| 39 | } | 73 | } |
| 40 | -#navigation_bar.msie ul ul li{ | ||
| 41 | - margin-left: 0px; | 74 | + |
| 75 | +#navigation_bar ul li ul { | ||
| 76 | + padding: 10px; | ||
| 42 | } | 77 | } |
| 43 | 78 | ||
| 44 | -#navigation_bar ul ul{ | ||
| 45 | - margin: 0px; | ||
| 46 | - clear: left; | ||
| 47 | - display: none; | ||
| 48 | - position: absolute; | ||
| 49 | - top: 20px; | ||
| 50 | - left: 0px; | ||
| 51 | - background-color: #E0E0E0; | ||
| 52 | - border: 1px solid #808080; | ||
| 53 | - width: 150px; | 79 | +#navigation_bar ul li ul li { |
| 80 | + display: block; | ||
| 81 | + float: right; | ||
| 82 | + margin: 5px; | ||
| 54 | } | 83 | } |
| 55 | -#navigation_bar.msie ul ul{ | ||
| 56 | - width: 180px; | 84 | + |
| 85 | + | ||
| 86 | +/* ITEM 1 */ | ||
| 87 | + | ||
| 88 | +#noosfero_bar.category1 { | ||
| 89 | + background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x; | ||
| 57 | } | 90 | } |
| 58 | 91 | ||
| 59 | -#navigation_bar ul ul ul{ | ||
| 60 | - top: 5px; | ||
| 61 | - left: 50px; | 92 | +#wrap.category1 { |
| 93 | +border: 3px solid #204a87 !important; | ||
| 62 | } | 94 | } |
| 63 | 95 | ||
| 64 | -#navigation_bar a:link, | ||
| 65 | -#navigation_bar a:active, | ||
| 66 | -#navigation_bar a:visited{ | ||
| 67 | - text-decoration: none; | ||
| 68 | - color: #707070; | ||
| 69 | - overflow: hidden; | 96 | +#category1 a { |
| 97 | + border: 1px outset #6692c4; | ||
| 98 | + background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x; | ||
| 99 | +} | ||
| 100 | + | ||
| 101 | +#category1 a:hover, li#category1.active a:hover { | ||
| 102 | + border: 1px inset #6692c4 !important; | ||
| 103 | + background: #3b6096 url("./images/bg_item_bar_blue_on.png") repeat-x !important; | ||
| 104 | +} | ||
| 105 | + | ||
| 106 | +li#category1.active a { | ||
| 107 | + border: 1px inset #6692c4; | ||
| 108 | + background: #719ece url("./images/bg_item_bar_blue_active.png") repeat-x; | ||
| 109 | +} | ||
| 110 | + | ||
| 111 | +li#category1 ul li a { | ||
| 112 | + border: 1px outset #6692c4 !important; | ||
| 113 | + background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x !important; | ||
| 114 | +} | ||
| 115 | + | ||
| 116 | +#category1 ul { | ||
| 117 | + background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x; | ||
| 118 | +} | ||
| 119 | + | ||
| 120 | + | ||
| 121 | +/* ITEM 2 red */ | ||
| 122 | + | ||
| 123 | +#noosfero_bar.category2 { | ||
| 124 | + background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x; | ||
| 125 | +} | ||
| 126 | + | ||
| 127 | +#wrap.category2 { | ||
| 128 | +border: 3px solid #a40000 !important; | ||
| 129 | +} | ||
| 130 | + | ||
| 131 | +#category2 a { | ||
| 132 | + border: 1px outset #a40000; | ||
| 133 | + background: #a40000 url("./images/bg_item_bar_red_off.png") repeat-x; | ||
| 134 | +} | ||
| 135 | + | ||
| 136 | +#category2 a:hover, li#category2.active a:hover { | ||
| 137 | + border: 1px inset #a40000; | ||
| 138 | + background: #ae1c1c url("./images/bg_item_bar_red_on.png") repeat-x; | ||
| 139 | +} | ||
| 140 | + | ||
| 141 | +li#category2.active a { | ||
| 142 | + border: 1px inset #a40000; | ||
| 143 | + background: #ee2828 url("./images/bg_item_bar_red_active.png") repeat-x; | ||
| 144 | +} | ||
| 145 | + | ||
| 146 | +#category2 ul { | ||
| 147 | + background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x; | ||
| 148 | +} | ||
| 149 | + | ||
| 150 | + | ||
| 151 | +/* ITEM 3 */ | ||
| 152 | + | ||
| 153 | +#noosfero_bar.category3 { | ||
| 154 | + background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x; | ||
| 155 | +} | ||
| 156 | + | ||
| 157 | +#wrap.category3 { | ||
| 158 | +border: 3px solid #204a87 !important; | ||
| 159 | +} | ||
| 160 | + | ||
| 161 | +#category3 a { | ||
| 162 | + border: 1px outset #6692c4; | ||
| 163 | + background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x; | ||
| 70 | } | 164 | } |
| 71 | 165 | ||
| 72 | -#navigation_bar ul ul a{ | ||
| 73 | - padding: 0px 2px 0px 5px; | ||
| 74 | - display: block; | ||
| 75 | - width: 100px; | ||
| 76 | - background-color: #DCDCDC; | 166 | +#category3 a:hover, li#category3.active a:hover { |
| 167 | + border: 1px inset #6692c4 !important; | ||
| 168 | + background: #3b6096 url("./images/bg_item_bar_blue_on.png") repeat-x !important; | ||
| 77 | } | 169 | } |
| 78 | 170 | ||
| 79 | -#navigation_bar ul ul a:hover{ | ||
| 80 | - background-color: #EEE; | 171 | +li#category3.active a { |
| 172 | + border: 1px inset #6692c4; | ||
| 173 | + background: #719ece url("./images/bg_item_bar_blue_active.png") repeat-x; | ||
| 81 | } | 174 | } |
| 82 | 175 | ||
| 83 | -#navigation_bar ul ul a.linkSubMenu:link, | ||
| 84 | -#navigation_bar ul ul a.linkSubMenu:active, | ||
| 85 | -#navigation_bar ul ul a.linkSubMenu:visited{ | ||
| 86 | - font-weight: 800; | 176 | +li#category3 ul li a { |
| 177 | + border: 1px outset #6692c4 !important; | ||
| 178 | + background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x !important; | ||
| 179 | +} | ||
| 180 | + | ||
| 181 | +#category3 ul { | ||
| 182 | + background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x; | ||
| 183 | +} | ||
| 184 | + | ||
| 185 | + | ||
| 186 | +/* ITEM 4 red */ | ||
| 187 | + | ||
| 188 | +#noosfero_bar.category4 { | ||
| 189 | + background: #a40000 url("./images/bg_noosfero_red.png") repeat-x; | ||
| 190 | +} | ||
| 191 | + | ||
| 192 | +#wrap.category4 { | ||
| 193 | +border: 3px solid #a40000 !important; | ||
| 194 | +} | ||
| 195 | + | ||
| 196 | +#category4 a { | ||
| 197 | + border: 1px outset #a40000; | ||
| 198 | + background: #a40000 url("./images/bg_item_bar_red_off.png") repeat-x; | ||
| 199 | +} | ||
| 200 | + | ||
| 201 | +#category4 a:hover, li#category4.active a:hover { | ||
| 202 | + border: 1px inset #a40000; | ||
| 203 | + background: #ae1c1c url("./images/bg_item_bar_red_on.png") repeat-x; | ||
| 204 | +} | ||
| 205 | + | ||
| 206 | +li#category4.active a { | ||
| 207 | + border: 1px inset #a40000; | ||
| 208 | + background: #ee2828 url("./images/bg_item_bar_red_active.png") repeat-x; | ||
| 209 | +} | ||
| 210 | + | ||
| 211 | +#category4 ul { | ||
| 212 | + background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x; | ||
| 213 | +} | ||
| 214 | + | ||
| 215 | + | ||
| 216 | + | ||
| 217 | + | ||
| 218 | +#navigation_bar ul ul { | ||
| 219 | +margin: 0px; | ||
| 220 | +padding: 0px; | ||
| 221 | +width: 100%; | ||
| 222 | +left: 0px; | ||
| 223 | +position: absolute; | ||
| 224 | +margin-top: 34px; | ||
| 225 | +display: none; | ||
| 226 | +} | ||
| 227 | + | ||
| 228 | +#search_box { | ||
| 229 | +display: none; | ||
| 230 | +clear: both; | ||
| 87 | } | 231 | } |
public/artwork/newbar/menu.html
| @@ -7,23 +7,38 @@ | @@ -7,23 +7,38 @@ | ||
| 7 | <script type="text/javascript" src="menu.js"></script> | 7 | <script type="text/javascript" src="menu.js"></script> |
| 8 | </head> | 8 | </head> |
| 9 | <body> | 9 | <body> |
| 10 | - | 10 | +<div id="wrap" class='category1'> |
| 11 | + | ||
| 12 | +<div id='noosfero_bar' class='category1'> | ||
| 11 | <div id='accessibility_menu'> | 13 | <div id='accessibility_menu'> |
| 12 | - <a href='#'>Acesibilidade</a> | | ||
| 13 | - <a href='#'>Central de Buscas</a> | | ||
| 14 | - <a href='#'>Ir para conteúdo</a> | 14 | + <a href='#'>Acessibilidade</a> |
| 15 | + <a href='#'>Central de Buscas</a> | ||
| 16 | + <a href='#'>Ir para conteúdo</a> | ||
| 15 | </div><!-- accessibility_menu --> | 17 | </div><!-- accessibility_menu --> |
| 16 | 18 | ||
| 17 | <div id='navigation_bar'> | 19 | <div id='navigation_bar'> |
| 18 | <ul> | 20 | <ul> |
| 19 | - <li id='category1'> | ||
| 20 | - Noosfero | 21 | + <li id='category1' class='active'> |
| 22 | + Noosfero | ||
| 21 | <ul> | 23 | <ul> |
| 22 | - <li><a href=''><span>Item 1</span></a></li> | ||
| 23 | - <li><a href=''><span>Item 2</span></a></li> | ||
| 24 | - <li><a href=''><span>Item 3</span></a></li> | ||
| 25 | - <li><a href=''><span>Item 4</span></a></li> | ||
| 26 | - <li><a href=''><span>Item 5</span></a></li> | 24 | + <li><a href=''><span>Iteam 1</span></a></li> |
| 25 | + <li><a href=''><span>Itemdasd 2</span></a></li> | ||
| 26 | + <li><a href=''><span>Iteaam 3</span></a></li> | ||
| 27 | + <li><a href=''><span>Iteaam 4</span></a></li> | ||
| 28 | + <li><a href=''><span>Itemdasds 5</span></a></li> | ||
| 29 | + <li><a href=''><span>Itesdm 2</span></a></li> | ||
| 30 | + <li><a href=''><span>Iteam 3</span></a></li> | ||
| 31 | + <li><a href=''><span>Iteasdasdm 4</span></a></li> | ||
| 32 | + <li><a href=''><span>Itesdasm 5</span></a></li> | ||
| 33 | + <li><a href=''><span>Itesdm 2</span></a></li> | ||
| 34 | + <li><a href=''><span>Itedsadm 3</span></a></li> | ||
| 35 | + <li><a href=''><span>Itedsm 4</span></a></li> | ||
| 36 | + <li><a href=''><span>Itessdsm 5</span></a></li> | ||
| 37 | + <li><a href=''><span>Itessasm 2</span></a></li> | ||
| 38 | + <li><a href=''><span>Isssssstesm 3</span></a></li> | ||
| 39 | + <li><a href=''><span>Iteasdm 3</span></a></li> | ||
| 40 | + <li><a href=''><span>Itessm 4</span></a></li> | ||
| 41 | + <li><a href=''><span>Iteasdm 5</span></a></li> | ||
| 27 | </ul> | 42 | </ul> |
| 28 | </li> | 43 | </li> |
| 29 | 44 | ||
| @@ -31,21 +46,32 @@ | @@ -31,21 +46,32 @@ | ||
| 31 | Territorios | 46 | Territorios |
| 32 | <ul> | 47 | <ul> |
| 33 | <li><a href=''><span>Item 1</span></a></li> | 48 | <li><a href=''><span>Item 1</span></a></li> |
| 34 | - <li><a href=''><span>Item 2</span></a></li> | ||
| 35 | - <li><a href=''><span>Item 3</span></a></li> | 49 | + <li><a href=''><span>Itssssem 2</span></a></li> |
| 50 | + <li><a href=''><span>Itsssssem 3</span></a></li> | ||
| 36 | <li><a href=''><span>Item 4</span></a></li> | 51 | <li><a href=''><span>Item 4</span></a></li> |
| 37 | - <li><a href=''><span>Item 5</span></a></li> | 52 | + <li><a href=''><span>Itssssem 5</span></a></li> |
| 38 | </ul> | 53 | </ul> |
| 39 | </li> | 54 | </li> |
| 40 | 55 | ||
| 41 | - <li id='category2'> | 56 | + <li id='category3'> |
| 42 | Lalala | 57 | Lalala |
| 43 | <ul> | 58 | <ul> |
| 44 | <li><a href=''><span>Item 1</span></a></li> | 59 | <li><a href=''><span>Item 1</span></a></li> |
| 45 | - <li><a href=''><span>Item 2</span></a></li> | ||
| 46 | - <li><a href=''><span>Item 3</span></a></li> | 60 | + <li><a href=''><span>Issstem 2</span></a></li> |
| 61 | + <li><a href=''><span>Itsssem 3</span></a></li> | ||
| 47 | <li><a href=''><span>Item 4</span></a></li> | 62 | <li><a href=''><span>Item 4</span></a></li> |
| 48 | - <li><a href=''><span>Item 5</span></a></li> | 63 | + <li><a href=''><span>Itssem 5</span></a></li> |
| 64 | + </ul> | ||
| 65 | + </li> | ||
| 66 | + | ||
| 67 | + <li id='category4'> | ||
| 68 | + Lalala | ||
| 69 | + <ul> | ||
| 70 | + <li><a href=''><span>Iaaaatem 1</span></a></li> | ||
| 71 | + <li><a href=''><span>Item 2</span></a></li> | ||
| 72 | + <li><a href=''><span>Itaaaem 3</span></a></li> | ||
| 73 | + <li><a href=''><span>Itaaem 4</span></a></li> | ||
| 74 | + <li><a href=''><span>Itaaaaaaaaem 5</span></a></li> | ||
| 49 | </ul> | 75 | </ul> |
| 50 | </li> | 76 | </li> |
| 51 | </ul> | 77 | </ul> |
| @@ -60,6 +86,53 @@ | @@ -60,6 +86,53 @@ | ||
| 60 | <input type='submit' value='Buscar'> | 86 | <input type='submit' value='Buscar'> |
| 61 | </form> | 87 | </form> |
| 62 | </div><!-- id='search_box' --> | 88 | </div><!-- id='search_box' --> |
| 89 | +</div> | ||
| 90 | + <div id="header"> | ||
| 91 | + <div id="virtual_community_identification">Default Virtual Community</div> | ||
| 92 | + </div> | ||
| 93 | + | ||
| 94 | + <div id='content'> | ||
| 95 | + <!-- <a name='main_content'/></a> --> | ||
| 96 | + <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? --> | ||
| 97 | + <!-- | ||
| 98 | + <div id='header_content'> | ||
| 99 | + </div> | ||
| 100 | + --> | ||
| 101 | + | ||
| 102 | + <div id="boxes"><h1>Account options</h1> | ||
| 103 | +<h1>Account options</h1> | ||
| 104 | +<h1>Account options</h1> | ||
| 105 | +<h1>Account options</h1> | ||
| 106 | +<h1>Account options</h1> | ||
| 107 | +<h1>Account options</h1> | ||
| 108 | +<h1>Account options</h1> | ||
| 109 | +<h1>Account options</h1> | ||
| 110 | +<h1>Account options</h1> | ||
| 111 | +<h1>Account options</h1> | ||
| 112 | +<h1>Account options</h1> | ||
| 113 | +<h1>Account options</h1> | ||
| 114 | +<h1>Account options</h1> | ||
| 115 | +<h1>Account options</h1> | ||
| 116 | +<h1>Account options</h1> | ||
| 117 | +<h1>Account options</h1> | ||
| 118 | +<h1>Account options</h1> | ||
| 119 | +<h1>Account options</h1> | ||
| 120 | +<h1>Account options</h1> | ||
| 121 | +<h1>Account options</h1> | ||
| 122 | +<h1>Account options</h1> | ||
| 123 | + | ||
| 124 | +</div> | ||
| 125 | + | ||
| 126 | + </div> | ||
| 127 | + | ||
| 128 | + <div id="footer"> | ||
| 129 | + <!-- <a name='footer'/></a> --> | ||
| 130 | + nothing in the footer yet | ||
| 131 | + <div action="list" class="none_back back"></div> | ||
| 132 | + </div> | ||
| 133 | + </div> | ||
| 134 | + </div> | ||
| 135 | + <img alt="Image for Loading..." id="spinner" src="/images/loading.gif?1186069142" style="display:none; float:right;" /> | ||
| 63 | 136 | ||
| 64 | </body> | 137 | </body> |
| 65 | </html> | 138 | </html> |