Style Sheets

  1. All Style Sheets are located in the “VCS-Assets” folder at the path: Library/VCS-Assets
  2. There are multiple style sheets for different areas and elements across the site. The following is a rundown of the name, location, and purpose of each style sheet:
  3. new-global.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  4. The main css style sheet for the entire site.
  5. landing.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  6. Dedicated style sheet for home/landing page.
  7. portal.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  8. Style sheet used on portal landing pages.
  9. news-events.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  10. Style sheet for all news and events info pages.
  11. department.css (hcontent.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  12. Style sheet used for custom content on the department subsite.
  13. school-board.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  14. Style sheet used for custom content on school board subsite.
  15. customPage.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  16. Style sheet for all one column layout pages.
  17. subsites.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  18. Style sheet for all subsites / Two Column page layouts.
  19. alert.css (content.volusia.k12.fl.us/Style Library/VCSAssets/alert/css)
  20. Style sheet containing css for dynamic alert on landing page.
  21. tabs.css (content.volusia.k12.fl.us/StyleLibrary/VCS-Assets/departmentTabs/css)
  22. Style sheet containing css for custom department tabs/web parts.
  23. tabs.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/landingTabs/css)
  24. Style sheet containing css for tabs on landing page.
  25. slideShow.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/slideShow/css)
  26. Style sheet containing css styles for slide show on the landing page.
  27. slideShow.css (../StyleLibrary/VCS-Assets/portalslideShow/css)
  28. Style sheet containing css styles for static image on portal landing pages.
  29. tabs.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/subSiteTabs/css)
  30. Style sheet containing all new

Site Images Location

  1. All site images used in the branding and development of the site are stored with the style sheets in the “VCS-Assets” folder at the path:
    Library/VCS-Assets.
    More specifically the bulk of the images can be found in “imgs” folder, including the site background and logo images:
    Library/VCS-Assets/imgs
  2. bodyBackground.png – Site Background
  3. Final_Logo_PNG.png – Header Logo
  4. headerBackground.png – Header Image
  5. Simply replace the new image with the current one to update them.

Master Page

  1. The main master page “VCS-SP13-Public-Custom.master” for the entire public facing site is located at the path below:
  2. The mobile master page “VCS-SP13-Mobile-Custom.master” for the entire public facing site is located at the path below:

Page Layouts

  1. All custom and out of the box Page Layouts are located inside the “masterpage” folder alongside the master pages ( The following is a list and description of only the custom page layouts dataBridge created in the initial branding process:
  2. VCS-Landing-Layout.aspx
  3. Home/Landing page structure and content.
  4. VCS-Portal-Community.aspx
  5. Structure and content of Community Portal landing page.
  6. VCS-Portal-Parents.aspx
  7. Structure and content of Parents Portal landing page.
  8. VCS-Portal-Staff.aspx
  9. Structure and content of Parents Staff landing page.
  10. VCS-Portal-Students.aspx
  11. Structure and content of Parents Portal landing page.
  12. VCS-School-Board-Landing.aspx
  13. Structure for School Board landing page.
  14. VCS-School-Board-Bio.aspx
  15. Structure for School Board Bio page.
  16. VCS-Departments.aspx
  17. Structure for custom Departments sub-site landing page.
  18. VCS-School-Landing.aspx
  19. Structure for custom School sub-site landing page.
  20. VCS-all-news.aspxVCS-news.aspx
  21. Structure for all news and single news item pages, respectively.
  22. VCS-all-events.aspx& VCS-events.aspx
  23. Structure for all events and single events item pages, respectively.
  24. VCS-OneColumn.aspx
  25. Structure for all custom one column sub-site pages.
  26. VCS-TwoColumns-site.aspx
  27. Template for creating new Two Columns page layouts for new subsites.
  28. TwoColumnPCommunity.aspx
  29. Structure for Two Column pages on the Community portal subsite.
  30. TwoColumnPParents.aspx
  31. Structure for Two Column pages on the Parents portal subsite.
  32. TwoColumnPStaff.aspx
  33. Structure for Two Column pages onthe Staff portal subsite.
  34. TwoColumnPStudents.aspx
  35. Structure for Two Column pages onthe Students portal subsite.
  36. VCS-TwoColumns-Departments.aspx
  37. Structure for Two Column pages on the Departments subsite.
  38. VCS-TwoColumn-Employment.aspx
  39. Structure for Two Column pages on the Employment subsite.
  40. VCS-TwoColumns-Schools.aspx
  41. Structure for Two Column pages on the Schools subsite.
  42. VCS-TwoColumns-TechServices.aspx
  43. Structure for Two Column pages on the Tech Services subsite.
  44. VCS-TwoColumnSchoolBoard.aspx
  45. Structure for Two Column pages on the School Board subsite.
  46. VCS-TwoColumnSuperintendent.aspx
  47. Structure for Two Column pages on the Superintendent subsite.

Mobile Branding Assets

  1. All Assets are located in the “VCS-Assets” folder at the path: Library/VCS-Assets
  2. All mobile images are located in the “mobile-imgs” folder in “VCS-Assets”
  3. The following is a rundown of the name, location, and purpose of each style asset:
    Stylesheets
  1. mobile.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  2. The main css style sheet for the mobile site.
  3. mobile-landing.css (content.volusia.k12.fl.us/Style Library/VCS-Assets/css)
  4. Thecss style sheet for the mobile homepage.

Javascript

a)mobile.js (/Style Library/VCS-Assets/scripts/mobile.js)

  • Main javascript file for mobile site. Loads Slideshow as well as makes adjustments to site layout to accommodate a mobile device.

b)mobile-portal.js (/Style Library/VCS-Assets/scripts/mobile-portal.js)

  • Javascript file to adjust portal landing pages layout for mobile.

c)mobile-footerLinks.js (/Style Library/VCS-Assets/footerLinks/js)

  • Javascript to load footer links on mobile site.

d)mobile-portalLinks.js (/Style Library/VCS-Assets/portalLinks/js/mobile-portalLinks.js)

  • Javascript to load portal links on mobile site.
  • There are four separate javascript files for the Staff, Parents, Students, and community landing pages to load their portal links on mobile.

e)mobile-schoolLinks.js (/Style Library/VCS-Assets/schoolLinks/js/mobile-schoolLinks.js)

  • Javascript to load School links on mobile site.

f)mobile-schoolLinks-order-left.js (/Style Library/VCS-Assets/schoolLinks/js/mobile-schoolLinks-order-left.js)

  • Javascript to load School links in correct order on mobile site.

g)mobile-departmentLinks.js (/Style Library/VCS-Assets/departmentLinks/js/mobile-departmentLinks.js)

  • Javascript to load Department Links on mobile site.

h)mobile-departmentLinks-order-left.js (/Style Library/VCS-Assets/departmentLinks/js/mobile-departmentLinks-order-left.js)

  • Javascript to load Department Links in correct order on mobile site.

Right Button Panel for All School Sites

  1. The right button panel that scrolls with the page is now adjustable for all school sites at one on the root district site. In order to adjust the structure of the panel follow these steps.
  2. Find the “footerLinks.js” file at the following path:

volusia.k12.fl.us/Style Library/Schools-Assets/footerLinks/js

  1. Open the file and go to line 128 in SharePoint Designer 2013.
  2. Copy the entire line of code and paste it into a text editor. Edit only the part highlighted in orange below:
    $('#s4-workspace').after('<div<div id="pageshare"<div class="swrapper" id="wrapper"<div class="shidden" id="google_translate_element" style="display:none;"</div<div class="stopbutton" id="gt" title="Translate this Page"<a href="#" onclick="doTranslate()"<img id="ytimg" src=" alt="Translate This Page"</a</div</div<div class="sbutton" id="tw" title="Visit our Twitter page"<a href=" target="_blank"<img src=" alt="Twitter"</a</div<div class="sbutton" id="yt" title="Visit our YouTube Channel"<a href=" target="_blank"<img src=" alt="YouTube"</a</div<div class="sbutton" id="em" title="VCS Outlook Web Access"<a href=" target="_blank"<img src=" alt="VCS Outlook Web Access"</a</div<div class="sbutton" id="sa" title="VCS Staff Applications"<a href="/staff-portal/Pages/Staff-Applications.aspx"<img src=" alt="VCS Staff Applications"</a</div</div</div>');
  3. Insure that the code is all on one line and then paste your updated structure into the code at line 128.
  4. Save and check-in the file. The new structure will now be updated to all school sites at once.

Managed Metadata

  1. In order to edit and manage the metadata title and description for your site follow the steps below:
  2. Navigate to the root of your site at the home page.
  3. Click on the “Page” tab that is available in the ribbon.
  4. Find the “Edit Properties” button under the Page tab and click it.

  1. After you click Edit Properties, a form will open with fields associated with the page you are on. Find the “MetaTitle” and “MetaDescription”
  1. Fill these two fields with their desired content and click “Save” when done.

Home Page Tabs

  1. For the Home Page Tabs, the content in these tabs are managed in two ways.
    The content in the main tabs on the left side of the page “News, Events, & Calendar” are all managed via web parts. In order to customize or alter these web parts the page must be opened in SharePoint Designer. The page layout you need to open is the:

    Please be sure to check the page out before editing.
  2. For the right side tabs “Featured Video & Twitter”
  3. The Twitter tab is run by a widget that must be alerted in the code on the same layout page as linked above.
  4. To change the Featured Video, navigate to Site Actions -> View All Site Contentonce there find the “VCS Media” library and click it.
  5. Edit the “landing-video.txt” document with the youtube code for the new video.