Embedded Files
High-Level Steps for Formatting
1. Update page title (category xx%) and objectives section.
2. Duplicate reference toggle.
3. Update toggle name to topic title.
4. Duplicate necessary elements and paste content. Refer to details per element type below for more info.
TIP: use ctrl+shift+v to paste without formatting (doesn't work 100% of the time though)
5. Update review cards.
6. Check how toggle looks like in mobile view.
7. Repeat steps 2-6 for every toggle.
Adding new elements from the left panel is discouraged (because it won't be pre-formatted properly), except for videos.
Video of Formatting (Basic Elements)
Details Per Element Type
Click here to see layout template.
General Layout
- Most content should be boxed by section except for introduction, intro diagram, tables, videos, and learn more.
- Check spacing if it looks OK (e.g. borders and negative space are more or less equal.)
Toggle-level objectives
straightforward (duplicate + edit)
Introduction
straightforward (duplicate + edit)
Text/Paragraph
- You may use separate elements for regular paragraphs/sentences and bullet points (because sometimes the indentation becomes inconsistent).
*Specifications:
- Headings should be Roboto #00a6dc 21px on desktop and 16px on mobile
- Body text should be Lato #2f4050 18px on desktop and 15px on mobile
- Note: this should be automatic as long as the reference toggle elements are duplicated then edited.
*For bullet points and code:
- If there are sub bullets, the element must be indented by 40px on the left. Other bullets under sub bullets must be indented by 80px. Avoid having more than 3 levels of bullet points and check with Sara/Martin.
- If there is a chunk of code, use the font Courier New, Courier, monospace. It needs to have its own element box to avoid messing up the formatting of non-code text. If code is below a paragraph, indent the code element with 20px on the left side. If code is below a heading, no need to indent.
Images
- Need to duplicate both image title box (with the camera icon) and the image box. Exception: when there's already a title in the diagram, no need to add the caption box on top.
- Adding a caption is optional; placeholder text can be used.
- Replace image:
- If existing image will be used: click on the placeholder image, click on "CHANGE IMAGE" from the left panel, type the filename of the image (the filename can be found on the image link from the live site), click "Insert into post" button.
- If image needs to be uploaded: click on the placeholder image, click on "CHANGE IMAGE" from the left panel, click on the "Upload Files" tab, select file, click "Insert into post" button.
- Image link on left panel needs to have the correct URL (same as the actual image link); "Open in new tab" ticked
- Note: Annotation on images should be in red boxes with red text with a readable font size. If it has to be changed, use Jing, Snaggit or Greenshot software (both free).
Tables
- Ideally, only two columns should be used. Duplicate the existing table and edit as needed.
- If more cells have to be added: click on the table element and the left panel will show table options. See this video.
Video
Drag a new video element from the right panel to the desired area, add URL in the left panel, then press enter.
Needs to be added last as the video breaks easily when changes are made to other elements on the page (especially when it moves the position of the video, e.g. by adding or removing an element or linebreak).
Learn More
- Check the link first if it shows the content properly. If you find the following, inform Sara: broken links, 404 pages, pages where login is needed to access content. (Sometimes Salesforce changes URLs or requires login)
- If link is working fine: duplicate links as needed > edit link text > through the mini menu that pops up, add correct link, check if correct text is used, tick "Open in new tab", click Update button.
- Note: the link color can get tricky sometimes after updating
*Specifications:
- Learn More links should be Lato #0e5392 18px on desktop and 15px on mobile
What to Watch Out For
- Even if it looks fine on desktop, sometimes the mobile version is not.
- Check the line height on mobile. Sometimes, even if the number is the same, the actual heights can vary on the page. Use your eyes and do not rely on the number in the line height box.
Steps for changing the background colors of table cells:
Google Sites
Report abuse