Parent Portal Design: Custom CSS

Overview 

Within Settings > Portal > Parent Portal Design, you can add custom CSS to change the design of certain aspects of your portal. This article provides a simple overview of how to add basic CSS elements and what they will affect.

Who can access this feature?
Admin Account Types: System Admins and Admins
Permissions: Any

---

In this article

• Introductory Notes
• Basic Definitions of Some Common CSS Elements
• Adding a Background
• Adjusting the Top of the Page
• Adjusting the Bottom of the Page
• CSS Learning Resources

---

Introductory Notes

What is CSS and where can I add it?
CSS is the language used to style an HTML document (website). Custom CSS can be added to your parent portal within Settings > Portal > Parent Portal Design. Adding custom CSS to your parent portal will control the way certain parts of the portal appear.

Helpful Notes Regarding Adding Custom CSS to your site:

• You have to save the changes (bottom of the page) to see them in action in the parent portal.
  
  
• It's very important to preview any changes you make to the custom CSS to ensure they look as you expect. Click here to review how to view the parent portal from the parent's perspective.
  
  
• If you need to go back to the default simply delete all of the custom CSS and then save.
  
  
• It's best practice to save your coding within a text editor, like Sublime. Saving the coding within a text editor will help you keep track of what you are adding.

Basic Definitions of Some Common CSS Elements

CSS group selector: The label of the area where you'd like to adjust. For example, "footer" is the selector for editing the footer of a page. See the Adjusting the Bottom of the Page section below for a visual example.

CSS id selector (#): The label for editing a more specific area of the page. It starts with a hashtag. For example, #content-body will specifically adjust the top of the parent portal box. See the Adjusting the Top of the Page section below for a visual example.

CSS class selector (.): The label or editing of a specific area of the page. It starts with a period. For example, .btn will adjust the styling of the buttons within your parent portal.

Box-Shadow: A shadow effect for the area around a box (or area of the screen).

Border-Radius: Rounds the corners of an area or box (can be added to round the top or bottom of the parent portal screen in front of the background).

Border-Top: Sets up the properties of how the border will appear.

Margin-Bottom: This dictates the margin area of the bottom of an area or box (the margin at the bottom of the parent portal where the background shows).

Hex code: A code that describes the hexadecimal color syntax of a color. It's used within portal design to designate the color of different aspects of the parent portal. Hex codes can also be used to customize other items within your site such as checklist item descriptions and email templates. 

Margin (right, left, top, bottom): Sets the margin area of the sides of an element within your site. For example, in the coding provided below, margins are set in the Background and Footer page elements.

Adding a Background

If you have a background image that you would like to set within your portal you can use the CSS selector background followed by opening and closing brackets. Within the brackets, add your code.

Please note, adding background images can be a bit complex and many different options affect the layout/view of the image. You'll want to test and preview the update in the parent portal to ensure the background looks like you'd want it to.

Here is an external resource for understanding the coding elements of adding a background: https://www.w3schools.com/css/css_background.asp

If you'd like to add a solid background color as opposed to an image, you can add the HEX code for the color within the Parent Portal Design page within the Background Color box.

Here is an example of custom CSS code created to add a background.

body {
background-position: top center;
background-image: url(INSERT THE URL OF THE IMAGE);
background-repeat: none;
background-size: cover;
background-position: top center;
background-attachment: fixed;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding: 0px;
}

Please note, regarding the above code snippet, you won't be able to just copy/paste the above code, you first must insert the URL that you would like to use where it's noted: background-image: url(INSERT THE URL OF THE IMAGE);

Example image of a Parent Portal background using a solid color rather than adding a background image using custom CSS. The Hex code (color) of the background in this example is: fefae0

Example image of a Parent Portal background was added using the custom CSS in the example above

Adjusting the Top of the Page

For the top of the parent portal, you can use a CSS id selector to edit the top of the white box (in front of the background). You can use the id selector #content-body followed by opening and closing brackets. Within the brackets, add your code. 

Here is an example of CSS code used to design the top of the Parent Portal page.

#content-body {
border-top: none;
border-radius: 8px 8px 0 0;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
}

Example image of the portal before adding custom CSS to design the top of the page. Notice the top of the white box and edges that are right angles (not curved).

Example image of the portal after adding custom CSS to design the top of the page. Notice the top of the white box has changed and the edges now are curved.

Adjusting the Bottom of the Page

To add CSS that adjusts the footer area of the parent portal which is the area at the bottom of the screen, you can start with the text footer followed by opening and closing brackets. Within the brackets, add your code. 

Here is an example of CSS code used to design the footer area of the Parent Portal:

footer {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
border-radius: 0 0 8px 8px;
margin-bottom: 80px;
}

Example image of the portal before adding the above code. Notice there is no margin at the bottom to view the background.

Example image of the portal after adding custom CSS to redesign the way the footer appears. Notice the background is now visible (because a margin was added) and the edges of the box are curved (because a border-radius was added).

CSS learning resources

You can learn more about CSS through an online resource such as W3 Schools: https://www.w3schools.com/css/default.asp

Their site includes a sandbox feature that allows you to explore while learning about different CSS elements.

---

Additional Resources

• Office Hours & Past Session Recordings
• Parent Portal Design
• W3 Schools CSS Tutorial
• Sublime: text editor