LCC eLearning
Share
Explore
Web Design Onboarding Plan

Site Structure

CSS Classes / IDs
We have a few custom CSS cases that are regularly used for page formatting; it’s helpful to know these. The ones you’ll use most regularly are:
class="skip-nav" - For the bubble navigation buttons found at the top of pages w/ multiple sections
class="kaltura-video" - used for adding a Kaltura video embed
class="highlight" - the green highlight text for calling out specific buttons or intractable objects in documentation steps
class="file-path" - an italics class, used for identifying a menu step in a process. Probably will deprecate this.
2022-08-31_23-13-50.png
Instructor / Student Instances
The instructor / student instances were setup improperly, and are functionally working as nested Wordpress installations, where subdomains are not redirecting correctly.
I eventually need to work with Ariel Lonchar on getting this corrected. Subdomain structure should be as follows
eLearning Site Subdomains
0
Directory
Domain
Directory
Domain
Accessibility Fixes Page
This is a custom page template, housed at /template-accessiblity.php. It also theoretically inherits custom styling in style.css, but I think it’s broken currently. At present taking a “it’s good enough so I’m not touching it ‘cause I don’t have time” approach.
Submenus
This functionality was cobbled into Bootstrap, which doesn’t natively support nested menus, but we needed them for organization. Relevant code sections are:
/wp_bootstrap_navwalker-multilevel.php
/js/customz.js - Lines 109-122

// Make Secondary Dropdown on Click
$('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function(e){
$('.dropdown-submenu ul').removeAttr('style');
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
// Clear Submenu Dropdowns on hidden event
$('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
$('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
});
});
});
Style.css - 844-933
/* NEW 2nd-Level Dropdown CSS START */
nav ul.nav.navbar-nav li.open ul.dropdown-menu > ul.dropdown-submenu > li a:hover, {
position: relative;
background-color:#ececec;
color:#333;
font-weight:bold;
}
.dropdown-submenu .caret{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);}
.dropdown-submenu > .dropdown-menu {
top:-6%;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.open > a:after{
border-left-color:#fff;
}
.dropdown-submenu.open > .dropdown-menu, .dropdown-submenu.open > .dropdown-menu {
display: block;
}
.dropdown-submenu .dropdown-menu{
margin-bottom: 8px;
}
.navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{
background-color: #f6f6f6;
}
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{
background-color:#333;
}
.navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{
padding-left: 30px;
}
@media screen and (min-width:768px){
.dropdown-submenu .dropdown-menu{
margin-bottom: 2px;
}
.navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{
padding-left: 25px;
}
.navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{
background-color:#fff;
top: 0%;
}
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{
background-color:#fff;
}
}
/* NEW 2nd-Level Dropdown CSS END */
Themes
Both the Instructor and Student Resource Sites have a strange theme structure—they use a custom theme LCC eLearning Instructor Resource Site (yes, this theme is used for the student site as well). This theme is a child of IAMSocial.
2022-08-31_22-40-32.png
To compound this complication, the Student resource site actually calls back to the Instructor site for it’s stylesheet.


Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.