Download and Install Stylebot
It will show up in your extensions bar as "CSS". Click on it to open the menu, then click "Open Stylebot". It will open a blue-ish tinted menu. At the very bottom, click the "Edit CSS" button. In the blank space, copy and paste the following code:
Code: Select all
body {
background: #FAFAFA;
font-family: Arial,Helvetica, sans-serif;
width: 100%;
max-width: 100%;
}
textarea {
line-height: 22px;
}
#OwnNotes textarea {
max-height: 100px;
}
.w3-tiny {
font-size: 13px;
}
.w3-container {
margin: 0 auto;
max-width: 1290px;
}
.w3-top {
max-width: 100%;
}
.w3-bar:nth-child(6) {
margin-top: 20px;
}
.w3-bar:nth-child(7) {
max-width: 1290px;
margin: 20px auto 0;
}
.formbig, .form500 {
background-color: #fff;
border-radius: 7px;
box-shadow: 0 0 2px rgba(0,0,0,0.12),0 0 4px rgba(0,0,0,0.24);
}
.w3-light-grey, .w3-light-gray {
background-color: #ffffff;
}
.sim-color-alt {
background: #CAE8EA;
margin: 10px auto 20px;
padding: 5px 10px;
}
.stallion-ad {
display: none;
}
.tabSelected, .tabSelected:hover {
background-color: #fff;
max-width: 1290px;
margin: 0 auto;
}
.TabbedPanels {
float: none;
margin: 30px auto 0;
max-width: 1290px;
padding: 0 15px;
}
.TabbedPanelsContent.sim-color-alt {
background: #ffffff;
}
table.dataTable td, table.supertable td {
font-size: 14px;
padding: 5px;
}
table.supertable {
margin-top: 15px;
width: 100%;
}
table#pastperform {
max-width: 100%;
}
tr.even td.sorting_1, tr.odd td.sorting_1 {
background-color: #f5f5f5;
}
.header a {
color: #FFFFFF;
}
.w3-dropdown-content a:hover {
background-color: #666666;
}
.w3-dropdown-hover .w3-card-4 {
background: #5E0A21;
}
footer .w3-col, footer .w3-left, footer .w3-right {
display: none;
}
input[type=submit], button[type=submit] {
border: none;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/*font-weight: bold;*/
font-size: 14px;
margin: 10px auto 10px;
padding: 5px 15px;
text-transform: uppercase;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
input[type=submit]:hover, button[type=submit]:hover, input[type=submit]:focus, button[type=submit]:focus {
background: #C21443;
box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
color: #ffffff;
}
You can always turn the styles off by clicking on the "CSS" logo and then clicking "Remove Styling" in the menu.
What does this do?
- Sets max width on the main content area. Useful for large(r) screens
- Increases the font sizes in all tables
- Edits the hover colors to meet current accessibility standards (color contrast ratio of 4.5:1)
- ADDED Dimmed background from pure white, toned down box shadow, edited some background colors
- ADDED Delayed dropdown menus in header bar