• Managing PISD Websites


    Bb Web Community Manager is a content management system which allows the district to create robust websites that not only represents your school community professionally but also provides numerous tools to help maximize your web presence.  

    Accessible Design       |       Responsive Design       |      Web-based Editor   |    Flexible

    Training Resources

    The resources below will help get you started on maintaining your web content.   Before starting please review the mandatory PISD accessibility requirements for web content.  


  • Tips & Tricks

  • Calendars - Syncing with Google Calendar

    Google Calendar Sync Guide


    Google Calendar Integration Limitations

    (excerpted from the guide above)

    Here are some limitations to Google Calendar Integration.

    • A Calendar App can only be synced with a Google Calendar that has been made public.
    • When deleting a single occurrence of a recurring event in a Calendar App, the event will not be removed in Google Calendar.
    • Editing a single occurrence of a recurring event is only available in Google Calendar.
    • If a Google Calendar is in a different time zone from the Calendar App, it will yield unfavorable results. If you switch the time zone for a calendar that is already synced, it will still use original time zone.
    • A Calendar App will not automatically refresh if an event is added in Google while viewing the Calendar App. You will need to manually refresh your Calendar App.
    • Google Calendar End On and the Calendar App End On dates are handled differently for recurring events. The Calendar App does not include the last date, while Google Calendar does.
    • Google Calendar supports recurring events without an end date. Google Calendar recurring events without an end date are not pulled into a Calendar App.
    • Yearly Recurring Events from Google Calendars are pulled into a Calendar App. Google Calendar Events with a yearly occurrence greater than one year are not pulled into a Calendar App.
    • We Community Manager calendar events that are role protected or pushed from other calendars will not be pulled into Google Calendar.
    • Web Community Manager calendar events synced from Schedule Star and assignments that have been posted from an Assignments App will not be pulled into Google Calendar.
    • Recurring events that have been imported into Google Calendar will not be pulled into a Calendar App.
    • When you initially sync a Calendar App and a Google Calendar, only events from that day forward will display on the targeted calendar.
    • Creating, editing and deleting recurring events is only available in Google Calendar if you are using Sync Both Ways Google Calendar Integration.

  • Content Accordion

    •    Add a Content Accordion App to your page
     
    1. Drag the Custom Content Accordion to your page.  
            Content Accordion Icon clip
      • Use the Accordion  Embed Code to change the app style to the PISD custom accordion style. 
      1. Select Use Existing
      2. Select Embed Code from the dropdown.
      3. Search for 'accordion' in the search box
      4. Select and Drag the 'Accordion Style Embed Code' to your page.      
                 ""

        • Set app options to make the bullets work
        1. Select 'App Option'
        2. Click 'Settings'
        3. Check the 'Show Bullets' Box
        4. Click Save   
                    ""

      1. Content: Images - Alignment

        insert edit image editor
         
        Image Left of Text
        float: left; 
        Image Right of Text
        float: right; 
         
        Distance between Image and Text 
        margin-bottom: 10px;
         margin-right: 10px; 
         margin-left: 10px;  
         margin-top: 10px; 
         
        For all margins
        margin:10px; 
         

      2. Content: CallOut Box

        Using a content app, place the following code in the HTML Editor.  
         
        <p><strong><span class="color_background_plano" style="font-size: large;">Contact Us</span></strong><span class="color_border_plano">some text here<br />some text here</span></p> 

        Contact Ussome text here
        some text here


        Put a link in the Title (remove blue link color)

        APPLY NOW

         

        1.  Create your link.  
        2.  Edit Code
        3.  Find the link '<a' tag.
        4.  Copy following text to make the text white again:  style="color: #fff;"
         
        <a style="color: #fff;" href="https://fans.pisd.edu/fma" target="_blank"> 
         
         

      3. Content: Headings

        Note: you first select which heading size you want, then the formatting option.

        Heading options:

        Title (H1) Example

        Sub-Title (H2) Example

        Heading (H3) Example

        Sub-Heading (H4) Example

        Formatting options:

        Site_color: (set in Template, usually site's primary color

        Color_border_plano

        Color_background_plano

        Two_tone_color_background

      4. Content: Linking Documents

        Upload documents in pdf format to Files & Folders in Tools tab.

        At the far right of item uploaded is a More button.

        Click to get drop down options.

        Select Get Link.

        Copy the Relative Web Address (Control + C). Close window.

        Return to where you want to link the document.

        Highlight text, right click, choose Link, then Paste (Control + V) copied address into Url box, click OK.

      5. Content: Remove default editor formatting

        Remove default editor formatting

        1. Highlight the text for which you want to remove formatting. 

        2. Press the template styles button.  You can clear multiple formats at one time. template Styles Button

        Works on most of the editor default styles.  

        Schoolwires Editor bar

        • Bold, Italics, Underline, Strikethrough, and default header styles and font color

      6. Directory: Filters - How they work

        The directories displayed throughout campus sites are filtered from the contact directory found on the campus Contact "PESH Staff Directory" page.  

        1.  Each filtered directory is managed from the Department Contacts page found in the  'About Us' channel and the 'Contact Us' section. 
          • ""
        2. The Embed Code apps on this page contain the filters for each department/academic directory.  The directories are filtered on 'Department' field (Field3 in the embed code) from the Campus Staff Directory.   So, the Department field for each staff member must match one of the filtered Department names in the filtered directory for the staff to display on a specific department/academic directory.  
          • Multiple filters can be included for each filtered directory.
            • Example Filter: 

              There are no records to display.

            • ""

      7. Directory: Linking Teacher Pages

        You will need the domain number or page number from each staff member's website.   It will be found in the URL address bar on the teacher page. "https://www.pisd.edu/Domain/1469"

        The bold item is the domain for a teacher’s individual page in the Faculty Pages channel.  Paste the domain/### into the Link field in the Contact Directory minibase app.

        Example:

        Domain/1469 or Page/1200

        Paste the code into the Links field in the Contact Directory mini-base app. Change the Domain number to correspond with the appropriate Teacher. Remember to Save changes.

        'Easy' way to do this is to export your Contact Directory, paste the text into the Link column, make changes, save new directory (must be in CSV format). Purge the old directory (download and save a back-up copy of the file first--keep it as CSV format), and import the new directory with the link codes.

      8. Directory: Updating Campus Staff Directory

        Where to edit the directory

        Helpful TIPS

        Staff Member Leaving - I know the replacement information

        • Edit old staff member information in the directory.   Replace the name, email, phone # and link.  

        Staff Member Leaving - I DO NOT know the replacement information

        • Find the staff member in the directory.  Delete the contact.   IMPORTANT - take note of the existing information.  Especially the department.  The department field is used to filter and display the correct contact information throughout the website.  You will want to use the same department for the new staff once known.  

      9. Embed Video on web page

        All video must be closed captioned. 

          1. Drag the Embed Code App onto your page.

        ""

        1. On a computer, go to the YouTube video you want to embed.
        2. Under the video, click Share Share.
        3. Click Embed.
        4. From the box that appears, copy the HTML code.
        5. Paste the code into your blog or website HTML in the embed code app.

      10. Facebook Feed Embed Code

        Insert an Embed Code app on your page and copy and paste the following code on the page:

        <div id="fb-root"></div>
        <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-page" data-href="https://www.facebook.com/schoolname facebook account/" data-tabs="timeline" data-width="500" data-height="800" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div> 

      11. Files & Folders: Uploading Documents and Photos

        You need to be in the Section in which you want to use the document or photo. Next to the Summary tab at top of editor is a Tools tab.

        Click on Tools tab.

        Select Files & Folders from the list.

        New window opens. (You can create subfolders if you need to organize a lot of items for the site.)

        Click on green Upload button.

        Drag and drop desired files into the box. You can select multiple items to drag together. Be sure file names do not include invalid characters; i.e. parenthesis.

        Click black Upload button at bottom LH of window. A list of all uploaded files will now appear in the Upload window.

        See Linking Documents for further information.

      12. Guidelines: Accessibility

        The PISD websites are accessed and used by a diverse group of people. Some of our users, including students, parents and employees, have visual or hearing impairments that create challenges in accessing websites and require the use of assistive technologies such as screen readers and text-only browsers.
         

      13. Guidelines: Style

        The Plano ISD website uses a stylesheet—a set of instructions that helps manage the way text displays on a website—to ensure that all pages are created using similar fonts and styles. While many font choices, sizes, styles and colors are available, users are encouraged to maintain template defaults. it is a goal to keep the style sheets as clean as possible and to maintain consistency between all pages on the site.
         
        View the PISD Style Guide. 
         

        • Use the H1_Plano Style as the title of each page.  
        • Do not underline text.
        • Documents MUST be accessible by people with disabilities.
        • No animated GIF
        • Do not change default font colors

      14. Images: Photo Dimensions (Home page)

        LARGE ROTATOR PHOTO DIMENSIONS: 1500PX X 915PX

        SMALL ROTATOR PHOTO DIMENSIONS: 1123PX X 618PX
         

        Region C ›Headlines & Features or Any App RECOMMENDED ACCENT IMAGE DIMENSIONS: 587PX X 486PX

        Region D › Any App Region E › Any App

        Region F ›Headlines & Features or Any App

        RECOMMENDED ACCENT IMAGE DIMENSIONS: 587PX X 486PX

        Region G › Any App

        Region H ›Headlines & Features or Upcoming Events RECOMMENDED ACCENT IMAGE DIMENSIONS: 587PX X 486PX
         
        PISD Home Page Layout Map  
         

      15. Images: Photo Editing Software

        **Plano ISD Communications and Instructional Technology do not provide technical support for photo editing.
         
        If you have trouble sizing or cropping images, we recommend Pixlr
          • On the Pixlr website, choose the Express program option.
          • Click Browse and open your image.
          • Click Adjustments, and then Resize.
          • In the little box at the bottom put in your width (do not enter a height).
          • Make sure the toggle for Keep Proportions is turned on (blue).
          • Hit Apply.
          • Click Crop and put in your image dimensions.
          • Drag the box to the position on the photo that you think looks best.
          • Hit Apply and then click Save.
          • Now your image should be sized correctly and ready to upload into your photo gallery app

      16. Images: Photo Release Information

        Location:
        • TEAMS or Campus Portal  - The school administrators & CTA will have access to this information.  

        There are three overarching questions to be asked before uploading a photo of student:

        • Is it legal?
        • Will the school support my decision?
        • Is it likely that parents will support my decision?

      17. Links: Open in new window

        Applies to areas which don't have the option built in.    
         
        Paste the following text after the link: (includes the leading quotation)
         
        "target=_blank 

      18. Staff Directory: (PISD Custom)

        A MiniBase configuration is the structure of your MiniBase. It includes Field Names, Filter Types, Sort Orders and Sort Levels. The configuration does not include the records in the MiniBase. 

        Here is how you import a MiniBase configuration.

        1. In Site Manager, navigate to the workspace where you wish to add the MiniBase.
        2. Click the Tools tab.
        3. Select MiniBase. The App Manager window displays.
        4. In the App Instances column, click Import Configuration.
        5. Click Browse and locate the MiniBase zip file containing the structure you wish to import.
        6. Click Import.
        7. Click I'm Done.
        Tip: You can now populate the MiniBase with data manually or import records into it using a CSV file.
         
        Download the configuration file below
         

      19. Teacher Pages: Linking from Directory to Teacher Page

        You will need the domain number or page number from each staff member's website.   It will be found in the URL address bar on the teacher page. "https://www.pisd.edu/Domain/1469"

        The bold item is the domain for a teacher’s individual page in the Faculty Pages channel.  Paste the domain/### into the Link field in the Contact Directory minibase app.

        Example:

        Domain/1469 or Page/1200

        Paste the code into the Links field in the Contact Directory mini-base app. Change the Domain number to correspond with the appropriate Teacher. Remember to Save changes.

        'Easy' way to do this is to export your Contact Directory, paste the text into the Link column, make changes, save new directory (must be in CSV format). Purge the old directory (download and save a back-up copy of the file first--keep it as CSV format), and import the new directory with the link codes.

      20. Teacher Pages: Moving from hidden to live

        Moving pages from Hidden teacher page sections.

        If you only need to move a few at time the method is described below.   If you need to move over the entire hidden teacher page section please email websupport@pisd.edu to request to move the entire channel. 

        1.  Click on School name in the site manger.
        2.  Click on Hidden Teacher Page Channel
        3.  Select Move button to move the teacher's section.

        Moving Teacher Pages: Screenshot depicting steps 1 - 3 above.

      21. Teachers / Staff Pages: Add New or Missing

        If you have missing teachers or staff on your teacher/faculty pages, you will need to create the sections manually.  

        From teacher/faculty page channel on the site manager:

        1. Select New Section Button
        2. On the New Section Window:
          1. Section Name:  Enter the staff member name as lastname, firstname
          2. Section Configuration:  Choose Single Page Teacher Section - Default Teacher Layout
          3. Click Save
        3. After adding the teacher section be sure to give them editing rights to their section.
          1. Select the teacher section
          2. Click on the editors and viewers tab
          3. On the section editors tab select assign user
          4. Search for the user by lastname or username
          5. Click select
          6. Click add

        screen shot depicting steps described above.

      22. Twitter Feed Embed Code

        Insert an Embed Code app on your page and copy and paste the following code on the page.  Insert

        <a class="twitter-timeline" data-height="800" data-dnt="true" data-link-color="#000066" href="https://twitter.com/{insert_twitter_handle}">Tweets by #####</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

      23. Website Accessible Colors

        Hexadecimal Code

        Color

        Where Commonly Used

        #135C81

        ""

         Active Navigation Item Text Color

        #156189

        ""

         Region C Accent Color, Region D/E Accent Color

        #168ACB

        ""  Section Dropdown Text Hover Color

        #1976A6

        ""

         Channel Bar Background Color, Section Dropdown Text Hover Color, Region C App Name Bar Background Color, Region D/E App Name Bar Background Color, Default Link Color, Footer Background Color

        #1EF81E

        ""

         Editor Style Dark Accent Color

        #21648C

        ""

         Editor Style Dark Accent Color

        #264867

        ""

         /*dark blue*/

        #2A665F

        ""

         Editor Style Dark Accent Color

        #31847A

        ""

         Default Inside PISD Color

        #335868

        ""

         Inside PISD Channel Bar Background Color, App name, H1, H3, and H5

        #335905

        ""

         /*dark green*/

        #337C74

        ""

         

        #3B70A0

        ""

         /*lighter blue*/

        #3D787C

        ""

         

        #417206

        ""

         /*lighter green*/

        #51445F

        ""

         /*dark purple*/

        #59712C

        ""

         Region F Accent Color

        #5A8206

        ""

         Scroll Down Button Background Color/ Mystart Icon Color, Scroll To Top Background Color

        #5C1700

        ""

         /*dark red*/

        #6E5C80

        ""

         /*lighter purple*/

        #7C9D3D

        ""

         Region F App Name Bar Background Color

        #862200

        ""

         /*lighter red*/

        #A0803D

        ""

         

        #B45014

        ""

         /*dark orange*/

        #D36929

        ""

         /*lighter orange*/

        #E45A27

        ""

        Region G App Name Bar Background Color and Accent Color

        #E65722

        ""

        BACKGROUND ONLY: Text on this background must be 18px (x-large) or larger. Editor Style Accent Color

        #FAA21D

        ""

        BACKGROUND USE ONLY: Text on this background must be BLACK. Scroll Down Button Background Color  

        #FBC243

        "'

        BACKGROUND USE ONLY: Text on this background must be BLACK.