How to Use Schoology Packages?
Contents
Click on a title to navigate to that section
- Installing Ispring for PowerPoint
- Remove Branding and Adding Styles
- Uploading to Schoology
- Video Walkthrough
- Merging Multiple Slides (To be completed)
1. Installing Ispring for PowerPoint
Go to https://ispringsoluitions.com
Enter your email and click Download for Free
Run the installation by opening the file as seen at the bottom of the browser window and wait for it to complete.
Open your PowerPoint presentation and you should see the iSpring Extension installed within the top menu panel.
2. Remove Branding and Adding Styles
Go to the folder where the project is saved, right click on the file index.html and open with notepad.
If you do not see the option to open with notepad, right click on the file, go to Choose another app.
Scroll down to the end and click More Apps.
Then you should see Notepad as one of the available selections.
Copy and paste the following codes above the closing style tag.
CODES
Remove Logo
/*hide branding*/
.free-logo{
display:none;
}Remove Title Text
/*remove-title-text*/
.course-title__text{
display:none;
}Remove All Controls
/*hide all controls*/
div.universal-control-panel__container,.landscape_bottom_panel,.bottom_panel,.top_panel{
display:none;
}
/*fix mobile layering for accessing menu button*/
.universal_mini {
background-color: transparent !important;
}
.universal_mini, .universal_mini > div {
position: relative !important;
}
.modal_layer {
display:none !important;
}Disable PowerPoint Keyboard Controls
Copy and paste this code before the closing script tag to disable keyboard advancement of slides.
/*remove keyboard keystroke advancement on slides*/
document.onkeydown = function (e) {
return false;
}3. Uploading to Schoology
Video Walkthrough
Merging Multiple Slides With a Menu
Add Menu Button Styles
/*styling for menu button container*/
.navbar {
overflow: hidden;
background-color: rgba(255, 255, 255, 0);/*transparent*/
font-family: Arial, Helvetica, sans-serif;
}
/*styling for dropdown menu panel contents*/
.dropdown {
overflow: hidden;
text-align: center;
}
/*styling for menu buttom*/
.dropdown .dropbtn {
font-size: 16px;
border:1px solid black;
outline: none;
color: black;
padding: 5px 8px;
background-color: #ffffff;
font-family: inherit;
}
/*styling for menu button on hover*/
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f0efef;
border-color: rgb(141, 141, 141);
color:rgb(141, 141, 141);
}
/*styling for dropdown menu panel*/
.dropdown-content {
display: none;
position: absolute;
left:calc(50% - 80px);
background-color: #ebebeb;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*styling for dropdown menu links*/
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
/*styling for dropdown links background on hover*/
.dropdown-content a:hover {
background-color: #39FF14;;
color:#000
}
/*styling for dropdown panel over button*/
.dropdown:hover .dropdown-content {
display: block;/*block | inline-block*/
}Adding Menu
CODE
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Lessons
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="../pp1/index.html">Lesson 1</a>
<a href="../pp2/index.html">Lesson 2</a>
<a href="../pp3/index.html">Lesson 3</a>
</div>
</div>
</div>
Additional steps coming soon…
