There are a couple of ways to find the styles being used on a page within your school website. It's important to know which style is being used so you can edit the correct style.This is the default way to determine what style is being used on a page for a specific element.
- From the list in the top left select School Website
- Navigate to Website Management > Websites
- Click the ellipses icon next to the desired site and select Edit Website
- On the Pages & Menus tab find the page with the content you want to edit
- Click the wrench button to the right of the page name and click Edit Style
- Click on an element and see the name that shows up under Applied Style
- Take note of the name and find it under Styles to edit it.
Tip: If the style name is too long, it could get clipped. If you click the dropdown menu, you'll be able to see the full name.
- Once you're under Styles, you can use the search to find it. Keep in mind that many styles will have similar names, so be sure you're editing the correct style.
Find the style using Chrome DevTools (Developer Tools):
While this is slightly more advanced and requires some basic HTML knowledge, it is the quickest way to find what exactly what style is being used, based on the style's id number.
If you have never used Chrome DevTools before, take a look at the DevTools documentation. There are developer tools in other browsers like Firefox and Safari, but the methods of using them will vary slightly.
Navigate to the page of your site that contains the content you want to edit
Right-click on the element that you want to edit the style for, and click Inspect Element
In the window that pops up, you will see the HTML with the element you selected highlighted. Moving up the hierarchy, look for the first instance of style-###### (i.e. style-12514) that you see in the div that contains your element.
Double click on that number once, then double click again to select that text and copy it to your clipboard.
Navigate to School Website > Website Management > Website > Edit Website > Styles
In the search box, paste the number from the previous step and click the magnifying glass or hit Return/Enter
This will return the exact style that is being used
If you are unsure what type of content to edit, look at the HTML again from step 3 and look at the div directly above your content. In this example, you'll see:
<div class="content text">
From this, we can determine that this is a Text element under Content Types.