Difference between revisions of "Template:UiOslo Norway"
| Line 3: | Line 3: | ||
<style> | <style> | ||
| − | /********************************* DEFAULT WIKI SETTINGS ******************************* | + | /********************************* DEFAULT WIKI SETTINGS ******************************* |
#sideMenu, #top_title {display:none;} | #sideMenu, #top_title {display:none;} | ||
| Line 10: | Line 10: | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
| − | /********************************* MENU ******************************** | + | /********************************* MENU ******************************** |
| − | /* Wrapper for the menu | + | /* Wrapper for the menu |
.menu_wrapper { | .menu_wrapper { | ||
width:150px; | width:150px; | ||
| Line 22: | Line 22: | ||
} | } | ||
| − | /* styling for the menu items | + | /* styling for the menu items |
.menu_item { | .menu_item { | ||
width:100%; | width:100%; | ||
| Line 33: | Line 33: | ||
} | } | ||
| − | /* when hovering on a menu item | + | /* when hovering on a menu item |
.menu_item:hover { | .menu_item:hover { | ||
color:#000000; | color:#000000; | ||
| Line 39: | Line 39: | ||
} | } | ||
| − | /* decoration icon for the menu buttons | + | /* decoration icon for the menu buttons |
.icon { | .icon { | ||
float:right; | float:right; | ||
| Line 46: | Line 46: | ||
} | } | ||
| − | /* this is the icon for when the content is collapsed | + | /* this is the icon for when the content is collapsed |
.plus::before { | .plus::before { | ||
content: "+"; | content: "+"; | ||
} | } | ||
| − | /* this is the icon for when the content is expanded | + | /* this is the icon for when the content is expanded |
.less::before { | .less::before { | ||
content: "–"; | content: "–"; | ||
} | } | ||
| − | /* styling for the ul that creates the buttons | + | /* styling for the ul that creates the buttons |
ul.menu_items { | ul.menu_items { | ||
width:100%; | width:100%; | ||
| Line 63: | Line 63: | ||
} | } | ||
| − | /* styling for the li that are the menu items | + | /* styling for the li that are the menu items |
.menu_items li { | .menu_items li { | ||
width:90%; | width:90%; | ||
| Line 90: | Line 90: | ||
} | } | ||
| − | /* When hovering on a menu item | + | /* When hovering on a menu item |
.menu_items li:hover { | .menu_items li:hover { | ||
background-color:#72c9b6; | background-color:#72c9b6; | ||
| Line 96: | Line 96: | ||
} | } | ||
| − | /* styling for the submenus | + | /* styling for the submenus |
.submenu { | .submenu { | ||
width:100%; | width:100%; | ||
| Line 105: | Line 105: | ||
} | } | ||
| − | /* moving the margin for the submenu ul list | + | /* moving the margin for the submenu ul list |
ul.submenu { | ul.submenu { | ||
width: 100%; | width: 100%; | ||
| Line 112: | Line 112: | ||
} | } | ||
| − | /*styling for the submenu buttons | + | /*styling for the submenu buttons |
.submenu li { | .submenu li { | ||
width: 100%; | width: 100%; | ||
| Line 120: | Line 120: | ||
| − | /* hover state for the submenu buttons | + | /* hover state for the submenu buttons |
.submenu li a { | .submenu li a { | ||
width: 100%; | width: 100%; | ||
| Line 139: | Line 139: | ||
| − | /* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that | + | /* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that |
.collapsable_menu_control { | .collapsable_menu_control { | ||
width:100%; | width:100%; | ||
| Line 156: | Line 156: | ||
} | } | ||
| − | /* when hovering on that button | + | /* when hovering on that button |
.collapsable_menu_control:hover { | .collapsable_menu_control:hover { | ||
background-color: #72c9b6; | background-color: #72c9b6; | ||
| Line 162: | Line 162: | ||
} | } | ||
| − | /********************************* CONTENT OF THE PAGE ****************************** | + | /********************************* CONTENT OF THE PAGE ****************************** |
| − | /* Wrapper for the content | + | /* Wrapper for the content |
.content_wrapper { | .content_wrapper { | ||
width: 85%; | width: 85%; | ||
| Line 173: | Line 173: | ||
} | } | ||
| − | /*LAYOUT | + | /*LAYOUT |
.column { | .column { | ||
padding: 10px 0px; | padding: 10px 0px; | ||
| Line 220: | Line 220: | ||
/*STYLING */ | /*STYLING */ | ||
| − | /* styling for the titles | + | /* styling for the titles |
.content_wrapper h1, .content_wrapper h2 { | .content_wrapper h1, .content_wrapper h2 { | ||
padding:5px 15px; | padding:5px 15px; | ||
| Line 234: | Line 234: | ||
| − | /* font and text | + | /* font and text |
.content_wrapper p { | .content_wrapper p { | ||
padding:0px 15px; | padding:0px 15px; | ||
| Line 241: | Line 241: | ||
} | } | ||
| − | /* Links | + | /* Links |
.content_wrapper a { | .content_wrapper a { | ||
font-weight: bold; | font-weight: bold; | ||
| Line 254: | Line 254: | ||
} | } | ||
| − | /* hover for the links | + | /* hover for the links |
.content_wrapper a:hover { | .content_wrapper a:hover { | ||
text-decoration:none; | text-decoration:none; | ||
| Line 260: | Line 260: | ||
} | } | ||
| − | /* non numbered lists | + | /* non numbered lists |
.content_wrapper ul { | .content_wrapper ul { | ||
padding:0px 20px; | padding:0px 20px; | ||
| Line 267: | Line 267: | ||
} | } | ||
| − | /* numbered lists | + | /* numbered lists |
.content_wrapper ol { | .content_wrapper ol { | ||
padding:0px; | padding:0px; | ||
| Line 274: | Line 274: | ||
} | } | ||
| − | /* Table | + | /* Table |
.content_wrapper table { | .content_wrapper table { | ||
width: 97%; | width: 97%; | ||
| Line 282: | Line 282: | ||
} | } | ||
| − | /* table cells | + | /* table cells |
.content_wrapper td { | .content_wrapper td { | ||
padding: 10px; | padding: 10px; | ||
| Line 290: | Line 290: | ||
} | } | ||
| − | /* table headers | + | /* table headers |
.content_wrapper th { | .content_wrapper th { | ||
padding: 10px; | padding: 10px; | ||
| Line 299: | Line 299: | ||
} | } | ||
| − | /* Button class | + | /* Button class |
.button_click { | .button_click { | ||
margin: 10px auto; | margin: 10px auto; | ||
| Line 314: | Line 314: | ||
} | } | ||
| − | /* button class on hover | + | /* button class on hover |
.button_click:hover { | .button_click:hover { | ||
background-color:#000000; | background-color:#000000; | ||
| Line 322: | Line 322: | ||
/********************************* RESPONSIVE STYLING ********************************/ | /********************************* RESPONSIVE STYLING ********************************/ | ||
| − | /* IF THE SCREEN IS LESS THAN 1000PX | + | /* IF THE SCREEN IS LESS THAN 1000PX |
@media only screen and (max-width: 1000px) { | @media only screen and (max-width: 1000px) { | ||
| Line 335: | Line 335: | ||
| − | /* IF THE SCREEN IS LESS THAN 680PX | + | /* IF THE SCREEN IS LESS THAN 680PX |
@media only screen and (max-width: 680px) { | @media only screen and (max-width: 680px) { | ||
| Line 367: | Line 367: | ||
| + | <nav class="navbar navbar-inverse"> | ||
| + | <div class="container-fluid"> | ||
| + | <div class="navbar-header"> | ||
| + | <a class="navbar-brand" href="#">WebSiteName</a> | ||
| + | </div> | ||
| + | <ul class="nav navbar-nav"> | ||
| + | <li class="active"><a href="#">Home</a></li> | ||
| + | <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <li><a href="#">Page 1-1</a></li> | ||
| + | <li><a href="#">Page 1-2</a></li> | ||
| + | <li><a href="#">Page 1-3</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li><a href="#">Page 2</a></li> | ||
| + | <li><a href="#">Page 3</a></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </nav> | ||
| − | + | <!-- | |
<div class="menu_wrapper" > | <div class="menu_wrapper" > | ||
| Line 523: | Line 542: | ||
| − | </script> | + | </script>--> |
</html> | </html> | ||
Revision as of 19:11, 4 July 2016
