-
Webmaster Resources
Below is a series of videos to help guide you through some of the more routine tasks you will be asked to perform as webmaster of your school's website and/or as editor of your teacher section. If you have a question that is not addressed below and you are a teacher, please contact your school webmaster (generally the Media Specialist); if you are the school webmaster and you need assistance, please email me and I will be happy to help out.
1. Website Terminology
2. Teacher Section Overview
3. Assigning Editors to Sections
4. Calendar App
5. Updating the Homepage Photo Gallery
6. Photo Gallery App for Other Pages
7. Creating a New Page, Changing Its Layout, and Adding Apps
8. Content App - Adding a Hyperlink
9. Content App - Uploading a Document
10. Content App - Uploading a Picture
11. File Library App
12. Link Library App
13. Headlines and Features App
14. Embed Code App vs. Content App's Embed Code Feature
15. Creating Sections and/or Pages That Exclusively Link Elsewhere
16. Embedding PowerPoint Presentations
17. Google Folder App
18. Multimedia Gallery
19. Announcements App
20. Accordion App
Accordian App Modification Code
-
Instructions for Using Code
Watch the below (#21) video for full instructions. But in a nutshell, put an embed code app on the same page with the accordian app. Copy the code and paste into the embed code app. Make sure the embed code app is active and the code will modify the accordian app.
-
Modification Code Itself
<style>
.ui-widget.app.content-accordion .content-accordion-toolbar {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.ui-widget.app.content-accordion .content-accordion-toolbar a {
color: inherit;
text-decoration: underline;
padding: 0px;
margin: 0px;
display: inline-block;
}.ui-widget.app.content-accordion .ui-articles,
.ui-widget.app.content-accordion .ui-article {
padding: 0px 0px 10px 0px;
}.ui-widget.app.content-accordion .ui-article.active .ui-article-title {
background-color: #f7f7f7;
color: #000000;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
position: relative;
}.ui-widget.app.content-accordion .ui-article .ui-article-title {
background-color: #f7f7f7;
color: #000000;
padding: 10px;
position: relative;
cursor: pointer;
}/* Original style below */
.ui-widget.app.content-accordion .content-accordion-button {
font-size: 18px;
cursor: pointer;
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}.ui-widget.app.content-accordion .content-accordion-button:after {
content: "\e900";speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: inherit;
font-size: 14px;
-ms-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
position: relative;
right: 10px;
}
.ui-widget.app.content-accordion .ui-article.active .content-accordion-button:after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.ui-widget.app.content-accordion .content-accordion-button span {
padding-right: 30px;
}
.ui-widget.app.content-accordion .content-accordion-panel {
display: none;
margin-top: 10px;
}
.ui-widget.app.content-accordion .content-accordion-panel p:first-of-type {
margin-top: 0px;
}
.ui-widget.app.content-accordion .content-accordion-panel p:last-of-type {
margin-bottom: 0px;
}
</style>
21. Tabbed Content App
Tabbed Content App Modification Codes
-
Instructions
Watch the above video for full instructions. But in a nutshell, put an embed code app on the same page with the tabbed content app. Copy one of the versions and paste into the embed code app. Make sure the embed code app is active and the code will modify the tabbed content app.
-
Version 1
<style>
/** TABS **/
.ui-widget.app.tabbed-content .tabbed-content-tab[aria-selected="true"] {
border-color: #f2f2f2 #cccccc #f7f7f7 #f2f2f2;
background: #f7f7f7;
}
.ui-widget.app.tabbed-content .tabbed-content-tab[aria-selected="false"] {
border-color: #f7f7f7;
background: #f2f2f2;
}
.ui-widget.app.tabbed-content .tabbed-content-tab {
border-radius: 10px 10px 0px 0px;background-image: linear-gradient(white, white);
border-color: #f7f7f7;
cursor: pointer;
position: relative;
border: solid 1px #e2e2e2;
border-bottom: none;
font: 300 20px/1.3 'Open Sans', sans-serif;
padding: 5px 15px;
margin-right: 12px;
-ms-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}div.ui-widget-tabs {
cursor: pointer;
position: relative;
padding: 10px 0 0 0;
border-bottom: none;
-ms-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
/** PANELS/CONTENT **/.ui-widget.app.tabbed-content .ui-article.tabbed-content-panel-wrapper {
padding: 17px 17px 10px 17px;
font: normal 18px "PT Sans", Arial, sans-serif;
background: #f2f2f2;
border-color: #f7f7f7;
}</style>
-
Version 2
<style>
.this{text-decoration:none;
color:black;
pointer-events:none;}
.rs{float:left;}
.ui-widget.app.content-accordion .content-accordion-button{padding:10px;color:#fff;
background:#0C48B7;}
/*version 2*/
.ui-widget.app.tabbed-content .tabbed-content-tab[aria-selected=true]{padding:10px; background: #0C48B7;color:#fff;}
</style> -
Version 3
<style>
.ui-widget-tabs.ui-article{padding:0px;}
.ui-widget.app.tabbed-content .tabbed-content-tab[aria-selected=true]{background:#cecece;
border-right:4px outset #9E9E9E;border-top:2px outset #9E9E9E;border-left:1px solid #9E9E9E;}
.ui-widget.app.tabbed-content .tabbed-content-tab{margin:0px;padding:15px;}
.ui-widget.app.tabbed-content .tabbed-content-tab::after{background:#000;top: -5px;
left: 12px;
transform: skewX(20deg);
transform-origin: 100%;}
.ui-widget.app.tabbed-content .ui-article.tabbed-content-panel-wrapper[aria-hidden=false]{background:#cecece;padding:15px;-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
border-left:1px solid #9E9E9E;}
.ui-widget.app.tabbed-content .tabbed-content-tab{border:none;}
</style>
