Chapter Leaders

The following instructions can also be found here:

• Updating Chapter Sliders (video)
• Updating Chapter Sliders (Google Doc)

 
Chapter Sliders are the interactive images found at the top of your chapter's homepage using a carousel widget. 

As a quick reminder, there are a few things that we would like you NOT to adjust when updating your Chapter Sliders:

• Please DO NOT change the theme (We have added your logo, your footer, and applied a theme consistent with all of the CSTA chapters)
• Please DO NOT delete the Sliders (We have added content and will update them by sending you code to do so)

Now, as noted above, below is a step-by-step guide to updating your Chapter Sliders in order to have the most current information and to remain consistent with the CSTA National site:

1. Navigate to your chapter's site and enter the Member Area.
   
2. Once in the Member Area, you'll find yourself on the "Chapter Administrator Dashboard". 
1. Navigate to the 'Website' Designer' by following the link in the "Manage My Chapter" tile.
3. From the "Page Home Designer", under 'Recent Pages', select your Home Page.
1. Hover over the words "Home Page"
2. Click the Blue 'Open' button.
4. On your open Home Page, you'll see the Chapter Sliders in the Full-Width Banner across the top of your page.
1. Hover over this widget/banner but do not click on it yet.
2. Near the top right corner, select the 'edit widget' icon that looks like a square with an arrow pointing to the upper right corner (not the gear icon).
5. Here we can edit the Carousel Content and update your Chapter's Sliders with new code.
1. Select the 'Source' button from the far right of the bottom row of the tools tray.
2. Click inside the source code and use "Ctrl-A" to select all.
3. Delete the code that is present.
6. Copy the code below, and paste it into the now blank Carousel Content space (as of 3/22/23):
   
   

   <style type="text/css">.carousel-content .carousel-title {font-size: 66px;}
    @media (max-width: 768px) {.carousel-content .carousel-title {font-size: 32px;}}
    .carousel-content .carousel-csta-red-text {background-color: rgba(255,59,0,0.8);}
    .carousel-content .carousel-csta-orange-text {background-color: rgba(254,153,2,0.9);}
    .carousel-content .carousel-csta-yellow-text {background-color: rgba(239, 220, 13, 0.9);}
    .carousel-content .carousel-csta-green-text {background-color: rgba(74,192,61,0.9);}
    .carousel-content .carousel-csta-light-blue-text {background-color: rgba(1,168,204,0.9);}
    .carousel-content .carousel-csta-blue-text {background-color: rgba(13,93,248,0.9);}
    .carousel-content .carousel-csta-purple-text {background-color: rgba(157,29,178,0.8);}
    .carousel-content .carousel-csta-pink-text {background-color: rgba(249,6,150,0.8);}
   </style>
   <div class="carousel carousel-container" id="carouselHeroBanner">
   <div class="carousel-scrollable swiper-container swiperc-hero-banner">
   <div class="swiper-wrapper"><!-- Slide #0 -->
   <div class="swiper-slide">
   <div class="item">
   <div class="carousel-background"><img class="carousel-img" src="https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/CSTA2023-Slider.png" /></div>
   &nbsp;

   
   <div class="carousel-content">
   <div class="content-container">
   <div class="content-block center-block-sm">
   <div class="col-xs-12">
   <h1 class="carousel-title">CSTA 2023 Annual Conference</h1>
   &nbsp;

   
   <div class="carousel-description hidden-xs hidden-sm">
   <div class="row">
   <div class="col-xs-12 col-md-6"><span class="carousel-csta-red-text">Connect with the world's largest computer science department at the CSTA 2023 Virtual Conference, set for July 11-13, 2023. </span></div>
   </div>
   </div>
   <a class="btn btn-primary" href="https://conference.csteachers.org/event/70540fe3-e9e1-42d9-bd29-10e67825b09b/summary">Register</a></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   <!-- Slide #0.5 -->

   
   <div class="swiper-slide">
   <div class="item">
   <div class="carousel-background"><img class="carousel-img" src="https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/CSTAletterSlider.png" /></div>

   
   <div class="carousel-content">
   <div class="content-container">
   <div class="content-block center-block-sm">
   <div class="col-xs-12">
   <h1 class="carousel-title">Join Our Global Community</h1>

   
   <div class="carousel-description hidden-xs hidden-sm">
   <div class="row">
   <div class="col-xs-12 col-md-6"><span class="carousel-csta-blue-text">CSTA is your place to belong, grow as a CS teacher, and impact your classroom and beyond. Join 19,000 teachers and counting and gain access to tools and resources to help take your teaching practice to the next level. </span></div>
   </div>
   </div>
   <a class="btn btn-primary" href="https://csteachers.org/page/individual-membership">Join</a></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   <!-- Slide #0.75 -->

   
   <div class="swiper-slide">
   <div class="item">
   <div class="carousel-background"><img class="carousel-img" src="https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/StateofCS2.png" /></div>

   
   <div class="carousel-content">
   <div class="content-container">
   <div class="content-block center-block-sm">
   <div class="col-xs-12">
   <h1 class="carousel-title">State of CS Report</h1>

   
   <div class="carousel-description hidden-xs hidden-sm">
   <div class="row">
   <div class="col-xs-12 col-md-6"><span class="carousel-csta-orange-text">The 2022 State of Computer Science Education: Understanding Our National Imperative is the annual report from Code.org, CSTA, and ECEP on K-12 computer science in the U.S. which includes policy trends, maps, state-by-state summaries, and implementation data. </span></div>
   </div>
   </div>
   <a class="btn btn-primary" href="https://advocacy.code.org/stateofcs">Read the Report</a></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   <!-- Slide #1 -->

   
   <div class="swiper-slide">
   <div class="item">
   <div class="carousel-background"><img class="carousel-img" src="https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/Virtualcommunity.png" /></div>

   
   <div class="carousel-content">
   <div class="content-container">
   <div class="content-block center-block-sm">
   <div class="col-xs-12">
   <h1 class="carousel-title">Join the Conversation on the CSTA Virtual Community</h1>

   
   <div class="carousel-description hidden-xs hidden-sm">
   <div class="row">
   <div class="col-xs-12 col-md-6"><span class="carousel-csta-purple-text">Connect with your fellow teachers and CS advocates on the new CSTA Virtual Community - available to all members!</span></div>
   </div>
   </div>
   <a class="btn btn-primary" href="https://community.csteachers.org/home">Join the Conversation</a></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   <!-- Slide #2 -->

   
   <div class="swiper-slide">
   <div class="item">
   <div class="carousel-background"><img class="carousel-img" src="https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/teacherreportslider.png" /></div>

   
   <div class="carousel-content">
   <div class="content-container">
   <div class="content-block center-block-sm">
   <div class="col-xs-12">
   <h1 class="carousel-title">2022 Teacher Landscape Report</h1>

   
   <div class="carousel-description hidden-xs hidden-sm">
   <div class="row">
   <div class="col-xs-12 col-md-6"><span class="carousel-csta-pink-text">CSTA teamed up with the Kapor Center and AIICE to create a full report and interactive dashboard based on a nationwide survey of CS teachers. The report focuses on teacher perceptions of moving towards a vision of equitable computer science. </span></div>
   </div>
   </div>
   <a class="btn btn-primary" href="https://landscape.csteachers.org/">View Report</a></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   <!-- Slide #3 -->

   
   <div class="swiper-slide">
   <div class="item">
   <div class="carousel-background"><img class="carousel-img" src="https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/TeacherStandardsResources.png" /></div>

   
   <div class="carousel-content">
   <div class="content-container">
   <div class="content-block center-block-sm">
   <div class="col-xs-12">
   <h1 class="carousel-title">New Standards Resources</h1>

   
   <div class="carousel-description hidden-xs hidden-sm">
   <div class="row">
   <div class="col-xs-12 col-md-6"><span class="carousel-csta-light-blue-text">CSTA recently published several teacher standards-aligned resources designed specifically for teachers, administrators, PD providers, schools of education, and policymakers.</span></div>
   </div>
   </div>
   <a class="btn btn-primary" href="https://csteachers.org/page/standards-for-cs-teachers-resources/">View Resources</a></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   <!-- Slide #5 -->

   
   <div class="swiper-slide">
   <div class="item">
   <div class="carousel-background"><img class="carousel-img" src="https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/newslide.png" /></div>

   
   <div class="carousel-content">
   <div class="content-container">
   <div class="center-block-sm content-block">
   <div class="col-xs-12">
   <h1 class="carousel-title">CS is Foundational</h1>

   
   <div class="carousel-description hidden-sm hidden-xs">
   <div class="row">
   <div class="col-md-6 col-xs-12"><span class="carousel-csta-green-text">The CSTA standards outline the computer science content and practices that every student should learn over their K-12 experience.</span></div>
   </div>
   </div>
   <a class="btn btn-primary" href="https://www.csteachers.org/page/standards">Explore the CS standards </a></div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>

   
   <div class="swiper-pagination swiperc-hero-banner-pagination">&nbsp;</div>

   
   <div class="swiper-controls">
   <div aria-label="Previous slide" class="carousel-control left swiper-button-prev swiperc-hero-banner-button-prev" role="button" tabindex="0"><!-- Icon Left - Below: remove to not show --><em aria-hidden="true" class="fa-chevron-left fas-icon swiper-icon"><span class="sr-only">&nbsp;</span></em> <!-- Do not remove sr-only: screen reader --> <span class="sr-only">Previous</span></div>

   
   <div aria-label="Next slide" class="carousel-control right swiper-button-next swiperc-hero-banner-button-next" role="button" tabindex="0"><!-- Icon Right - Below: remove to not show --><em aria-hidden="true" class="fa-chevron-right fas-icon swiper-icon"><span class="sr-only">&nbsp;</span></em> <!-- Do not remove sr-only: screen reader --> <span class="sr-only">Next</span></div>
   </div>
   </div>
   </div>
   <!-- alt
      https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/slider_1.1.jpg  https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/slider_2.1.jpg  https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/slider_3.2.png  https://clubrunner.blob.core.windows.net/00000305564/Images/Homepage%20Images/CarouselHeader/slider_4.1.jpg
    --><!-- Swiper CSS -->
   <link href="https://globalassets.azureedge.net/scripts/swiper/swiper.min.css" rel="stylesheet" type="text/css" /><!-- Swiper JS --><script src="https://globalassets.azureedge.net/scripts/swiper/swiper.min.js" type="text/javascript"></script><!-- Swiper Animation JS --><script type="text/javascript">
    $(function () {
     if (!$('#preview-container, #divThemeType').length) {
       startCCarousel();
     };
     
     function startCCarousel() {
       var SwiperItem = 'swiperCHeroBanner';
       var SwiperClass = 'swiperc-hero-banner';
       
       var PagingControl = SwiperClass + '-pagination';
       var SwipeNext = SwiperClass + '-button-next';
       var SwipePrev = SwiperClass + '-button-prev';
       
       SwiperItem = new Swiper('.swiperc-hero-banner', {
             // Optional parameters
             direction: 'horizontal',
             loop: true,
             preloadImages: true,
             // updateOnImagesReady: true, // optional
             slidesPerView: 'auto', 
             spaceBetween: 0, 
             effect: 'slide',  //"slide", "fade", "cube", "coverflow" or "flip"
             observer: true,
             observeParents: true,
             autoplay: {
               delay: 10000,
               speed: 3000,
               disableOnInteraction: true,
               stop: true,
             },
             pagination: {
               el: '.' + PagingControl,
               clickable: true,
               type: 'bullets', //"bullets", "fraction", "progressbar" or "custom"
               dynamicBullets: false, // only few bullets will display at one time
             },
             
             // Navigation arrows
             navigation: {
               nextEl: '.' + SwipeNext,
               prevEl: '.' + SwipePrev,
             },
             autoHeight: false,
             init: false,
           })
       
       swiperInit();
       
       function swiperInit() {
         SwiperItem.init();
       }
     }
   });
   </script>

7. To complete the update, click the Pink "Save and Publish" button in the bottom right-hand corner
8. Congratulations, your Chapter Sliders are now updated with the most current information from CSTA National (You can click the "View Live Page" button to see your work).
9. When we update sliders for the carousel widget, I will send this How-To again with the new code substituted above.

For those of you who feel like you're ready to add your own sliders to ours (like CSTA Arizona, CSTA Connecticut, CSTA Mid-Hudson Valley, and CSTA South Carolina), please see this fantastic Chapter Leader webinar from our Spring 2020 Chapter Leader Series, hosted by Chapter Leaders Rosemary Bianchi (CSTA South Carolina) & David Czechowski (CSTA Mid-Hudson Valley):

• Webinar: Web Content in MemberNova w/Rosemary Bianchi & David Czechowski

• Notes 
• Sample Code for Sliders

As always, if you have any questions, please feel free to reach out to me via email at Chapters@csteachers.org. 

------------------------------
Jason W. Bohrer | Chapter Relations Lead
Computer Science Teachers Association | @csteachersorg
------------------------------