If you are looking for a banner, use the following to display the WYSIWYG panel.
Purple with Connections
- Add the WYSIWYG panel to the modules section
- On the Contents tab insert title, label, and content within the first column
- Switch to the Settings tab and select Panel Background Color: White
- Open the ‘Edit existing JavaScript/CSS’ section (button outlined in red)
- Click the CSS option in the window, copy/paste the code below, then click Save
.site-section.site-section__bg–white {
background-color: #f3c465;
background-image: url(https://wp.stolaf.edu/newstudents/files/2020/03/connections1.png);
} - Publish the page before previewing the page to ensure code is inserted on the page
Teal with Boe Beams
Steps 1 and 2 are same as above, step 3 select Panel Background Color: Light gray, then leverage the code below to change the banner.
Click the CSS option in the window, copy/paste the code below, then click Save
.site-section.site-section__bg–gray {
background-color: #0e8284;
background-image: url(https://wp.stolaf.edu/newstudents/files/2020/03/boebeams2.png);
}
Note: Adjust the background color by editing CSS code and switching out the hexadecimal color code (e.g. #0e8284)
Examples of the panel are listed below.