- When adding or editing a picture in a slideshow, add a space after the "learn more", "read more" or whatever text you've chosen for the link. This prevents the text from flowing into the end-of-link decoration.
- There are numerous pages with page-specific styling located inside the html view. Please do not edit this unless you know what you are doing; editing it can break the page. When in doubt, stick to non-html edit view.
- Blockquotes are styled as a class. To add a blockquote, simply add
<div class"blockquote"> **Your Quote** </div>in html view to style it appropriately. If you're not certain how to do this, ask someone with CSS experience before making any changes. To edit a quote, you should be able to select it in the default editing view. - The CSS stylesheet is located in files -> CSS -> stylesheet.CSS. Please make all site-wide changes to the stylesheet. This stylesheet controls the Res-Life-specific look of the website (removes one of the top bars, makes color changes, adds support for various styles, etc).
- If you wish to modify the stylesheet, I recommend you have a basic understanding of how CSS works.
If, for some reason, the site-wide styling must be removed, this can be accomplished fairly easily; most of the styling for the site is in the stylesheet, and removal or renaming of that should (mostly) revert the site back to the UMSL defaults. Any remaining styling can be removed by navigating through the pages in Cascade, opening HTML view, and removing any code at the top. Please be aware that some pages (such as Virtual Tours, About Us, and the site index) heavily rely on styling to function properly. Removing the code is not recommended unless you know what you're doing.
CSS is essentially a list of instructions that tell the browser how it should display a website. It's fairly straightforward, but can get complex and difficult to maintain when you try to do more complicated things. For example, we could technically code a completely new website using CSS and HTML, and completely overwrite the default UMSL website, but it would be extremely challenging and prone to failure.
It is not difficult to get started with CSS, and I encouage everyone to at least know the basics. It's a simple coding language, and it's extremely well documented, with plenty of resources to help.
An amazingly good resource for getting started in CSS is W3Schools. They have an amazing CSS tutorial and CSS reference guide, and I can't recommend them enough.
- Other good resources for fixing problems and getting help are StackOverflow and /r/CSSHelp.
UMSL uses Bootstrap as a framework for the site. This lets us use Bootstrap functions to style the site and add functionality. For example, Bootstrap adds support for the circular profile pictures that have become popular recently, and we can style pictures as circles (or ovals) by simply adding class="img-circle" to the picture properties in code view.
If you have any questions about the above, please contact Ryan Brooks for help.
Add custom CSS to a page
Stylesheet snippet
Remove right sidebar
Change to two-column layout
Redesign slideshow
Banner quote
Hide Page Title
Highlight text
Fix Table Padding
Circular photos
Resize YouTube videos
These are snippets that may again be useful at some point, but have been replaced by other solutions.
Resize iFrames
Some pages have more extensive styling. They're backed up here; please keep them updated and submit pull requests if you make changes.
index
VirtualTours
MaintenanceRequest
The stylesheet controls the site-wide changes that have been made. Please test changes you make to it before publishing to the live site; if you must push to the live site before testing, please be prepared to roll it back quickly.
Please submit a pull request if you make changes to the stylesheet.
The Contact Us and Suggestions forms are powered by Google. Google Forms does not support emailing the full response from a form to a specific email, but it is possible to write a notification script that runs whenever a response is submitted.