Have you ever pasted content into the CMS, and it just doesn’t look r
ight? You’re probably carrying old formatting code into the new CMS. Common culprits are copying from a Word document, copying text from one browser and pasting it into another, or copying text that was formatted in-line (using <span> and <style> tags directly in the code instead of letting the preformatted stylesheets do the work.)
Adding content with this type of formatting is bad for a couple of reasons:
- It doesn’t let your page update with the rest of the CMS. We may decide to change the font size or style to make the site more accessible or to keep up with modern design trends. By using the standard heading (<h1>, <h2>, etc) and paragraph (<p>) tags, your content will be ready to shift in an instant. If you leave hard-coded styles in the page, your look won’t automatically change.
- It can look strange on different devices. Everything on our new template is designed to expand and contract with the user’s screen size. Hard-coded styles may not change in the right way between desktop and mobile.
- It’s annoying for you, the CMS user. Sometimes you’ll have lines and lines of needless code – annoying when you’re trying to find one or two words in pages of <span>s and <color>s. For example, look at the coding on the links below—the <u> and <span> tags make for messy code on the back and and ugly links on the front end.
Google has some great help pages for using analytics, but there is a lot of information because there are so many things you can track.
Google Analytics is updated daily. You will be able to see information for yesterday and before. If you do not have access to analytics for a CMS site that you manage, contact email@example.com for access.
This snippet is traditionally used for information about people that are not employees, such as alumni or student award winners, this snippet can include a photo and text on the left with a short description on the right to be used on a listing page with several other profiles. The short listing then includes a link to a full-page listing.
This snippet can show a progress bar towards a goal for a Tech Fund account along with button options for users to donate. It can be used to create a listing page with multiple accounts shown and a full-page listing for one account. The full-page listing includes social media sharing and comments.
If you are going to use both the multiple listing and full-page options for one account, you must create the snippet as an Asset.
- Insert the title for the Gift Box. This will be displayed in the multiple listing.
- Enter a couple sentences of text about the account in the Callout field. This is a short description that will be displayed in the multiple listing.
- In the Body field, include all of the content you want to appear in the content area of the full page. This can include sliders and other snippets.
- Insert the image for the account in the Image field. This image size should be a 515 Sub-Banner if you will have a right sidebar on the full listing page or an 800 Banner if you will not have a right sidebar. It will scale appropriately for the multiple listing.
- The Link is used to get from the multiple listing to the full page. Type any text in the field (url for example) and link that text to the full page index.pcf file in the CMS. The link on the live page will show [ read more ] and go to the page you set.
- Enter the Michigan Tech Fund account number in the Account field in the format Account-####-Description where #### is the account number and Description is a short description of what the account is for.
- If you want to display a progress bar, enter a goal amount, without a dollar sign or comma.
- To increase the progress amount, enter a number in the Given field without a dollar sign or comma.
- To decrease the progress amount, enter a number in the Zero Total Value field without a dollar sign or comma.
- The Buttons field will determine what donation amount buttons are available for a user to select. You can have up to three. The defaults are $25, $50, and a user-entered value. You can change or delete any of these button amounts.
- Button Code is used for tracking donations made through this online form. It must be a unique four-character code.
Once created, the asset (or snippet itself if you are only doing one listing) can be inserted into a Boxed Section Even Columns snippet to create the multiple listing and inserted directly onto the Main Content Region to create the full-page listing.
This snippet creates a formatted blockquote that includes the quote and the author.
After inserting the snippet, edit the quote and author content. If you do not have an author, you must edit the code to remove <span class=”author”>Author Name</span>.
These snippets will create formatted H2-size headings. Graybar includes a gray bar around the heading that goes across the entire content area. Top Title includes a line beneath the titles that goes across the entire content area.
After inserting the snippet, select the default text of “Title” and change it to what your heading needs to be.
Today we’re launching our new headers and footers. For many years now, we’ve offered our headers and footers as iframe codes, which worked well, until our new template came along in 2016. The new brand brought in different dimensions, styling, and navigation. This caused us a bit of trouble as the new dimensions and functionality would not work with the iframe setup found across various Tech-associated properties. This led us to seek out a new, long-term approach for headers.
Iframes are an easy way to embed pieces of content from other websites. However, they are limited in their integration with subpages. Our main issue dealt with height: all iframes were locked at 100px high. Whereas the new header changes in height depending on navigation type, and if the header is loaded on a mobile device. The same issues were found on the footer as well; the footer iframes simply can’t show enough detail, leading to contact information and other relevant links being cut off.