In Part 1 of this post you learned how to prepare a Bootstrap theme to make it easier to create a new Sites Cloud Service (SCS) theme.
Step 5: Add Bootstrap theme files to SCS theme
In this step you will add files from ‘Modern Business’ theme converted to use SCS folder structure to the ModernBusinessTheme that you created in Step 2:
- Copy HTML files from the ‘modern-business/layouts’ folder to ‘layouts’ folder in the SCS theme
- Copy content of the ‘modern-business/assets’ folder to ‘assets’ folder in the SCS theme
Note: Both SCS ModernBusinessTheme and Bootstrap ‘Modern Business’ theme contain index.html file. Youi can rename original SCS file or simply overwrite it with a new index.html coming from the Bootstrap theme.
After sync of files is complete (check status in the Sync Manager), open ‘ModernBusiness’ site in the Site Builder. If you decided to overwrite index.html file, the Home page of you site will look something like that:
To restore the look and feel, you need to make path to the ‘assets’ folder relative to the SCS theme. Open ModernBusinessTheme (<user_name>)/layouts/index.html file on the desktop in your favorite HTML editor and replace all entries of:
../assets to _scs_theme_root_/assets
Note: If path to the ‘assets’ folder is explicitly used in JavaScript files in the Bootstrap theme that you selected, then instead of the above replacement you should use SCS Render API to obtain path to the ‘assets’ folder in the theme – SCSRenderAPI.getThemeUrlPrefix() returns URL for SCS theme root.
Save the file. Once file sync is completed, you should see Home page correctly rendered in the Site Builder:
If this is the only HTML file from the Bootstrap theme that you want to convert into SCS page layout, you can proceed to the next step. Otherwise, you should re-create page hierarchy of the Bootstrap theme in the Site Builder and configure each SCS page to use corresponding HTML file as a page layout:
Edit remaining HTML files in the ModernBusinesTheme and replace all entries of:
../assets to _scs_theme_root_/assets
Checkpoint 2
Using Site Tree in the Builder open site pages that you created and confirm that each page renders correctly in the Site Builder. At this point you need to use Site Tree in the left palette to navigate site pages. On step 7 you will implement navigation bar that uses dynamically generated links to SCS pages in your site.
Step 6: Add SCS Pre-requisites to page layout files
In this step you will modify Bootstrap HTML files in the ModernBusinessTheme (<user_name>)/layouts folder to add code snippets that each SCS page layout should have.
Open ModernBusinessTheme (<user_name>)/layouts/index.html file in your favorite HTML editor and add the following code snippets:
1. After the <head> tag add
<!-- Avoid FOUC issue in FF with async loading of style sheets -->
<style> body {opacity: 0;}</style>
2. Just before the closing </head> tad add
<!-- SCS components styles - design.css --> <link rel="stylesheet" type="text/css" href="_scs_theme_root_/designs/_scs_design_name_/design.css"> <!-- SCS Renderer data --> <!--$SCS_RENDER_INFO--> <!--$SCS_SITE_HEADER--> <!--$SCS_PAGE_HEADER-->
3. Just before the closing </body> tags add:
<!-- SCS JS libraries -->
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js">
<!--$SCS_PAGE_FOOTER-->
<!--$SCS_SITE_FOOTER-->
<!-- Avoid FOUC issue in FF with async loading of style sheets -->
<style> body {opacity: 1;}</style>
Note: jQuery library that is used in SCS internally is ‘sandboxed’ (it is used in the noConflict mode), i.e. in your SCS theme, you can use any version of jQuery library that is included in the original Bootstrap theme as is.
Edit other page layouts and repeat the above steps.
Checkpoint 3
Using Site Tree in the Builder open site pages that you created and confirm that each page renders correctly in the Site Builder.
Now you can add any page from the original Bootstrap theme an make it render in SCS. However, you can’t use menu on the site to navigate between pages. In Part 3 of this post you will learn how to create navigation menu for your SCS theme that dynamically render link to pages that you add in the Site Builder.
Igor's Musings About Technology 
1 Comment