Skip to content

Instantly share code, notes, and snippets.

@PoomSmart
Last active March 4, 2018 10:18
Show Gist options
  • Save PoomSmart/51232a1e5d18aedc5eb9c3df1bcb8aba to your computer and use it in GitHub Desktop.
Save PoomSmart/51232a1e5d18aedc5eb9c3df1bcb8aba to your computer and use it in GitHub Desktop.
Recoloring and various interface adjustments for MUICT My Courses & E-Learning (using Stylish to apply)
/* Advanced Adjustments */
/* Star background + Transparent UI */
#page, #nav-drawer {
background-image: url("https://i.ytimg.com/vi/EZ7la-hMNuk/maxresdefault.jpg");
}
body, #page {
background-color: rgba(0,0,0,0) !important;
}
.card, .list-group {
background-color: rgba(250,250,250,0.16) !important;
}
.modal-content .list-group, .modal-content .list-group-item {
background-color: inherit !important;
}
.list-group-item-action:focus, .list-group-item-action {
background-color: rgba(250,250,250,0.16) !important;
color: #999 !important;
}
/* Thinner dashboard header */
#page-header .card-block {
padding: 10px 15px 10px 15px;
}
#page-header form {
margin-bottom: 0 !important;
}
.page-context-header .page-header-headings {
padding-top: 10px;
}
.page-context-header .page-header-image {
margin-right: 0 !important;
margin-bottom: 0 !important;
}
.page-header-image img {
width: auto !important;
height: 50px !important; /* Height will be based on the profile image */
}
/* Wider right pane */
#region-main-settings-menu.has-blocks, #region-main.has-blocks {
width: calc(100% - 350px) !important;
}
[data-region="blocks-column"] {
width: 320px !important;
}
/* Minimalistic Upcoming Events */
.block_news_items .date, .block_news_items .name {
resize: both;
margin: 0px 5px 0px 0px;
display: inline-block;
}
/* Event popup over mini calendar shows at left */
.yui3-overlay-content.yui3-widget-stdmod {
width: auto !important;
margin-left: 0px !important;
margin-top: 180px !important;
}
/* Smaller course names + spacing (Course Overview) */
.block_course_overview .content h2.title {
font-size: 18px;
margin: 0 0 0.2em 0;
}
.path-my .coursebox {
margin: 0;
padding: 5px !important;
}
.page-header-image img {
display: inline-block !important; /* Show hidden profie image in dashboard heading */
}
#site-news-forum .posting img {
margin: auto; /* No oversized images on announcement posts */
max-width: 50% !important;
}
/* Better MUICT logo */
img[alt="My Courses"] {
opacity: 1 !important;
content: url("https://www.ict.mahidol.ac.th/en/wp-content/uploads/2017/11/site-logo.png");
}
header .logo img {
margin-top: -20px;
margin-right: 5px;
width: 150px !important;
height: auto !important;
max-height: 60px !important;
}
/* General Start */
/* Link colors */
a {
color: #77c !important;
}
a:focus,
a:hover {
color: #77e !important;
}
/* Color of "My Courses" text */
.site-name {
color: #999 !important;
}
/* Color of navigation bar */
.navbar-light {
background-color: #222222 !important;
border-color: #080808;
}
/* Color of page items */
.page-link {
color: #08b;
background-color: #ddd;
}
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
color: #ccc;
background-color: #08b;
}
/* Color of modals */
.modal-content,
.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
background-color: #666;
}
/* Color of card headers */
.card-header {
background-color: rgba(0, 0, 0, 0);
}
/* Color of tables */
td,
th {
color: #888 !important;
background-color: #333;
}
td:hover,
tr:hover,
th:hover {
background-color: #444;
}
/* Color of buttons */
button {
color: #888;
background-color: #555;
}
/* Color of text input entries */
input[type='text'],
.form-control,
.form-control-danger,
.form-control:focus,
textarea {
color: #888;
background-color: #555 !important;
}
/* Color of WYSIWYG editor toolbar */
div.editor_atto_toolbar,
div.editor_atto_toolbar div.atto_group {
background-color: #555;
background: #555;
}
div.editor_atto_toolbar button {
background-color: #444;
}
div.editor_atto_toolbar button[disabled] {
background-color: #222;
}
/* Color of radio buttons */
input[type='radio'] {
background-color: #555;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
outline: none;
border: 3px solid gray;
}
input[type='radio']:before {
content: '';
display: block;
margin: 20% auto;
border-radius: 50%;
}
input[type="radio"]:checked:before {
background: #ccc;
}
input[type="radio"]:checked {
border-color: #55a;
}
/* Color of filename labels */
.fp-iconview .fp-filename-field .fp-filename {
background-color: inherit;
}
/* Color of cards + Rounded */
.card,
#page-enrol-users #filterform,
.path-calendar .maincalendar .calendar-event-panel,
.block .calendar-event-panel .yui3-overlay-content,
.que .history,
.userprofile .profile_tree section,
.groupinfobox,
.forumpost,
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax .yui-layout-unit-right,
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax .yui-layout-unit-bottom,
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax #chat-messages .chat-message.course-theme,
.well {
color: #888;
background-color: #222 !important;
border-radius: 8px !important;
}
/* General fixup */
.region_main_settings_menu_proxy {
background-color: rgba(0, 0, 0, 0);
}
.path-grade-report-user .user-grade.generaltable .levelodd {
background-color: #333;
}
.generaltable tbody tr:nth-of-type(odd) {
background-color: inherit;
}
.nav-tabs .nav-link.active,
.nav-link.active:hover {
background-color: #aaa !important;
}
#page-wrapper::after {
display: none !important;
}
/* Color of dropdown menus */
.dropdown-menu {
background-color: #444 !important;
}
.dropdown-menu a,
.path-mod-forum .activesetting,
.path-mod-forum .subscriptionmode {
color: #aaa !important;
}
/* Color of primary buttons */
.btn-primary,
.btn-primary:hover {
color: #aaa;
background-color: #07a;
border-color: #07a;
}
/* Color of select menu */
.custom-select {
color: #888 !important;
background-color: #555 !important;
}
/* Span color on cards, discarding its background color */
.card span {
background-color: inherit !important;
}
/* Colors of left menu */
.list-group-item-action:focus,
.list-group-item-action {
background-color: #444 !important;
color: #999;
}
/* Text color of left menu */
.list-group-item-action:hover {
color: #777;
}
/* Body background color */
body,
#nav-drawer,
#page {
background-color: #666;
}
/* Button background color */
.btn-secondary,
.btn-default {
background-color: #888 !important;
}
/* Even course box color (dark) */
.courses .coursebox.even {
background-color: #222;
}
/* Even course box highlight color */
.courses .coursebox.even:hover {
background-color: #333;
}
/* Course box highlight color */
.courses .coursebox:hover {
background-color: #333
}
/* Even column background color of (notification) preferences */
.preferences-container .preference-table tr th:nth-child(even),
.preferences-container .preference-table tr td:nth-child(even) {
background-color: #333;
}
/* Darker danger table type color */
.table-danger,
.table-danger>th,
.table-danger>td {
background-color: #922 !important;
}
/* Darker success table type color */
.table-success,
.table-success>th,
.table-success>td {
color: #bbb !important;
background-color: #292 !important;
}
/* General Stop */
/* Chat Start */
.popover-region-messages .content-item {
height: auto; /* Normalize height of popover chat entry */
}
/* Chat background color */
div.messaging-area-container {
background-color: #444;
}
/* Chat message background color */
.messaging-area-container .messaging-area .messages-area .messages .message .content {
background-color: #444;
border: 1px solid #666;
}
/* Bottom border color of chat header */
.messaging-area-container .messaging-area .messages-area .messages-header {
border-bottom: 1px solid #777;
}
/* Background color of outer chat search entry */
.messaging-area-container .messaging-area .contacts-area .searchtextarea,
.messaging-area-container .messaging-area .contacts-area .searchtextarea.searching,
.messaging-area-container .messaging-area .contacts-area .tabs .tab {
background-color: #555;
}
/* General colors of chat box */
.messaging-area-container .messaging-area .messages-area .response .message-box .message-text-container textarea,
.messaging-area-container .messaging-area .messages-area .response.messaging .message-box .message-text-container textarea {
background-color: #333;
color: #aaa;
}
.messaging-area-container .messaging-area .messages-area .response,
.messaging-area-container .messaging-area .messages-area .response.messaging {
background-color: #444;
}
/* Background color of inner search entry */
.messaging-area-container .messaging-area .contacts-area .searchtextarea input,
.messaging-area-container .messaging-area .contacts-area .searchtextarea.searching input {
background-color: #444 !important;
}
/* General colors of pop-over chat */
div.popover-region-content-container {
background-color: #444;
color: #888;
}
/* Pop-over chat header and footer color */
div.popover-region-footer-container,
.popover-region-header-container {
background-color: #333;
}
/* Color of "New message" and "See all" texts on pop-over chat */
div.popover-region-seeall-text,
.popover-region-header-container a {
color: #eee;
}
/* Darker "Online" text color */
.messaging-area-container .status .online-text {
color: #383;
}
/* Chat Stop */
/* Calendar Start */
td[data-core_calendar-title*="Today "] a,
.today a,
td.today {
font-weight: bold; /* Highlight current date */
color: red !important;
}
/* Color of calendar event boxes */
.calendar_event_course {
background-color: #da8;
border-color: #eb9;
}
.calendar_event_group {
background-color: #dc8;
border-color: #ed9;
}
/* Font size of events */
.events-new {
font-size: 0.8em;
}
/* Better location of calendar pop-up */
.yui3-overlay-content.yui3-widget-stdmod {
margin-left: -200px !important;
width: 150px !important;
position: absolute !important;
}
.comment-area {
max-width: 100% !important;
}
/* Better calendar spacing */
.path-calendar .maincalendar .calendarmonth ul li {
margin-top: 0 !important;
}
.path-calendar .maincalendar .calendartable li {
padding-left: 4px !important;
}
.calendartable ul {
padding-left: 0.1rem !important;
}
/* Calendar Stop */
/* Scroll Bar Start */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
/* Scroll Bar Stop */
body {
width: 75%; /* content is 75% width of that of browser */
min-width: 800px; /* for good */
margin: auto;
}
#page,
#content,
#header-home,
#footer,
#layout-table,
.navbar,
.menubar,
.wrapper,
.searchbox,
.FrontSlideshow,
#slideshow,
#slideshow > div {
width: 100% !important;
}
.navbar {
padding-left: 0px;
padding-right: 0px;
}
.navbar .breadcrumb {
padding-left: 0.4em;
}
.navbar .navbutton {
padding-right: 0.4em;
}
#page {
margin: auto;
display: block;
}
#footer,
#header-home {
background-repeat: no-repeat !important;
background-size: 100% !important;
}
#slideshow > div > img {
background-size: 100% !important;
width: 100% !important;
}
#layout-table #right-column {
padding-right: 0px;
}
.sideblock .content {
padding: 0px;
margin: 2px;
}
#left-column .sideblock, #right-column .sideblock {
width: 100%;
}
/* the following CSS hooks normalize images in forum posts */
tr .forumpost .content img {
max-width: 100%;
}
#layout-table #middle-column>div {
word-break: break-word;
}
/* glow effect and round display for user avatar */
.userpicture,
.defaultuserpic {
border-radius: 50%;
box-shadow: 0 0 1.5vh green;
}
/* blocks shadow effect in block users list */
.listentry .userpicture {
box-shadow: none;
}
/* background color of our lovely website */
#content,
#page,
#layout-table #left-column,
#layout-table #middle-column,
#layout-table #right-column,
.forumpost .content,
.sideblock .content,
.navbar {
background-color: #eeffdd; /* default: cream, #ffffcc */
}
/* border color for all */
.forumheaderlist,
.forumpost,
table.minicalendar,
#course-view .section td {
border-color: green; /* default: light gray, #DDDDDD */
/* border-style: none; */ /* uncomment if you don't like borders */
}
/* post's header color */
.forumpost .starter {
background-color: rgba(160, 210, 150, 0.7);
}
/* post's left sidebar color */
.forumpost .left {
background-color: rgba(170, 210, 170, 0.7);
}
/* color for most links in our website (default: orange) */
a,
a:link,
a:visited {
color: green; /* default:*#F57110 */
}
/* header/footer bars (default: dark orange) */
.menubar, #footer {
border-top-color: green; /* default: dark orange, #F57110 */
}
#header-home {
border-bottom-color: green; /* default: #F57110 */
}
/* emphasize the deadline of events */
.event .date {
font-weight: bold;
}
/* fix oversize table if placed at middle column, also maximizes when appropriate */
#layout-table {
table-layout: fixed;
width: 100%;
}
td#right-column>div>div {
max-width: 100%;
}
table.topics {
max-width: 100%;
}
.summary table {
width: 100%;
}
/* general tune-up */
.tabtree {
font-weight: bold;
}
.userpicture, .picture user, .picture teacher {
width: 35px;
height: 35px;
}
.pix img {
width: 20px;
height: 20px;
margin: 0.5em;
}
.coursesearchbox {
margin: 1em;
}
.indentation {
width: 6vw;
}
.headingblock {
display: none;
}
#middle-column>div>.categorybox {
display: none;
}
#coursesearch {
display: none;
}
.forumheaderlist th {
padding: 5px;
}
.forumheaderlist td {
padding-left: 6px;
padding-right: 6px;
}
.today {
border-radius: 6px;
}
.event_course {
border-radius: 6px;
padding: 2px;
margin: 2px;
}
.block_online_users .content,
.block_calendar_month .content,
.block_course_list .content {
width: 100%;
}
.groupselector,
.reportlink {
padding: 10px;
font-weight: bold;
}
.user-grade td,
.user-grade th {
padding: 3px;
}
/* menu bar's boring orange? */
.menubar {
-webkit-filter: grayscale(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment