• Website Editor Tips & Tricks

    Below you will find tips to aid you developing your webpages.    Feel free to submit suggestions for tasks that you feel should be added to the list to websupport@pisd.edu.

  • Calendar - Hide Google Contact Information

    Place an embed code app on your calendar page.

    Copy the following code in the embed code.  

    <style>
    .wcm-eventdetail-contact {
    min-width: 200px;
    visibility: hidden !important;
    }

    </style>

  • 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


      • 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 a Google Slides

      Embed a document, spreadsheet, or presentation

      1. Open a file in Google Docs, Sheets, or Slides.
      2. At the top, click File > Share > Publish to the web.
      3. In the window that appears, click Embed.
      4. Choose a publishing option:
        • Spreadsheet: Choose to publish the entire spreadsheet or individual sheets.
        • Presentation: Choose a presentation size and how quickly to change the slides.
      5. Click Publish.
      6. Copy the HTML in the text box and paste it into an embed code app.

    10. Embed a Google video on webpage

      1. Open Google Drive
      2. Find theVideo file and double click
      3. Click the"More Actions" icon (3 vertical Dots) upper right corner
      4. Select "Open in New Window"
        How to embed Google video 1  
      5. Click "More Actions"
      6. Select “Embed item…”
        How to embed Google video 2   
      7. Copy Embed Code
      8. Paste into Embed APP

       

    11. Embed Code for a Responsive Video

      For a responsive video, 

      1. Insert an Embed Code app on your page
      2. Copy and paste the following code on the page 
      3. Replace the red text with your video link.

      <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src="Your video link goes here" frameborder='0' allowfullscreen></iframe></div>

    12. 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.

    13. 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.

    14. 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.
       

    15. 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

    16. Images: Create Chalkboard Image

      Need a image for Region C ›Headlines & Features App on the homepage? Create a chalkboard image in about 3 minutes with the poster my template for free. 

      RECOMMENDED ACCENT IMAGE DIMENSIONS: 587PX X 486PX
      Image editor for Accent Image

    17. Images: Photo Dimensions (Home page)

      LARGE ROTATOR PHOTO DIMENSIONS: 1500PX X 915PX
      Image editor for the large rotator

      SMALL ROTATOR PHOTO DIMENSIONS: 1123PX X 618PX

      Region C ›Headlines & Features or Any App
      RECOMMENDED ACCENT IMAGE DIMENSIONS: 350PX X 290PX
      Image editor for Homepage Headlines & Features

      Image editor for Campus Spotlight 579PXx479PX

      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: 350PX X 290PX
       
      PISD Home Page Layout Map  
       

    18. 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

    19. 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?

    20. Social Media - Facebook Feed Embed Code

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

      <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> 

      Replace the bolded text above with your school social media handles without the @.

      Important Note: Social media accounts need to show in the following order:

      1. Facebook
      2. Twitter
      3. Instagram

    21. Social Media - Twitter Feed Embed Code

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

      <a class="twitter-timeline" data-width="560" 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>

      Replace the bolded text above with your school social media handles without the @.

      Important Note: Social media accounts need to show in the following order:

      1. Facebook
      2. Twitter
      3. Instagram

    22. Social Media - Instagram Embed Code

      Insert an Embed Code app on your page and follow the instructions below:

      1. Home page app location:
        1. if school has all three social media accounts, place embed app in section I;
        2. if school only has 1 or 2 social media account, place embed app in section H). 
      2. After you place the Embed app, named it: School Name - Social Media Type (example: Meadows Twitter)
      3. To get Instagram embed code:
        1. Go to your Instagram page and select the post that you want to feature.
        2. Open the post and click on the three dots in the upper right corner.
        3. Click embed.
        4. Copy embed code button. 
      4. Go back to your embed code app 
      5. Paste the embed code you copied from Instagram. Do not change the embed code copied from Instagram.

      Since Instagram is not a live feed, it is recommended that you routinely change the post displayed. You do this by repeating steps 3-5 above.

      Important Note: Social media accounts need to show in the following order:

      1. Facebook
      2. Twitter
      3. Instagram

    23. 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
       

    24. 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.

    25. Teacher Pages: Moving from hidden to live

      Moving pages from Hidden teacher page sections.

      If you only need to move a few at a 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 manager.
      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.

    26. Teacher Pages: Delete Existing

      1. Click on School name in site manager
      2. Click on Teacher Page Channel
      3. Select Delete net to the teacher section name.  

      \delete Teacher Page Screen shot

    27. 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.

    28. 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.