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