Custom Blocks Custom Classes
You have the capability to further refine the presentation of your content with custom classes. These are style choices that Engineering Web Services developed through web best practices.
To add a custom class, enter the name of the class into the "Custom Class" text entry field on any custom block that allows this input.
All custom block types support the following custom class:
anchor-name-[anchor_name]: This class is a special one that does not modify the appearance of a block, but instead adds a targetable anchor for linking to that block.
e.g. "anchor-name-foo" will add an anchor to your block that can be targeted with "#foo" and appended to links (i.e. example.osu.edu/mypage#foo)
Most block types allow customization through custom classes. Below is a list of those available to each:
Accordions
| Custom Class for Accordions | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
|
title-align-center title-align-right |
Changes the alignment of the block title. | Use one title align class at a time. |
| panel-bg-white | Changes the background color of accordion panels (content area) to white (instead of default transparent). | |
| panel-bg-gray | Changes the background color of accordion panels (content area) to light gray (instead of default transparent). | |
| no-arrow | Removes the arrow icon from panel headers. | |
| no-border | Removes the border from accordion panels. | |
| header-bg-dark | Changes the background color of accordion headers to dark gray (instead of default scarlet). | Use one "header-bg" class at a time. |
| header-bg-gray | Changes the background color of accordion headers to light gray with a scarlet left border (instead of default scarlet). | Use one "header-bg" class at a time. |
|
highlight-first highlight-second highlight-third highlight-fourth highlight-fifth highlight-sixth |
Use a different header background color for one specific item (first, second, third, fourth, fifth, or sixth). By default, the header background color of the specified item will be dark gray. If the header-bg-dark or header-bg-gray classes are active, the header background color of the specified item will be scarlet. |
More than one "highlight" class can be used at the same time. |
|
highlight-even highlight-odd |
Use a different background color for either even or odd items. By default, header background color of the specified even or odd items will be dark gray, If the header-bg-dark or header-bg-gray classes are active, the header background color of the specified even or odd items will be scarlet. |
|
| plain | Headers appear as a plain text link instead of a solid button. This is a more "lightweight" style than the default. | Not compatible with "header-bg" or "highlight" classes. |
| Custom Class for Content Grid | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
| no-placeholder | Removes the gray placeholder box from stories that do not have a featured image. | Filtering mode "Include all stories whether or not they have a featured image" must be selected. |
| Custom Class for Embedded iFrame | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
| no-border | Removes the default border from Embedded iFrame. | All except Twitter Feed |
| height-[number][unit] (e.g. "height-1400px") |
Sets the desired height of the Embedded iFrame. The default height of Embedded iFrame items is 600px. [number]: must be a positive integer. [unit] : must be either "px", "%", "em" or "rem". Pixels ("px") is recommended. Since the height of Embedded iFrames must be a fixed value, it has limited responsiveness. Be sure to check the appearance of your page on all screen sizes. |
Works with Google Calendar, Google Map, Outlook Calendar, Outlook Form, and Qualtrics Form. Works with standard Twitter Feed, but not with tweet-limit. |
| width-[number][unit] (e.g. "width-50%") |
Sets the desired width of the Embedded iFrame. The default width of Embedded iFrame items is 100% of the containing layout column. The Embedded iFrame width cannot exceed the width of its containing layout column. [number] must be a positive integer. [unit] must be either "px", "%", "em" or "rem". Pixels ("px") is recommended for most cases. Since the width of layout columns can change with different screen sizes, be sure to check the appearance of your page on all screen sizes. |
Works with Google Calendar, Google Map, Outlook Calendar, Outlook Form, and Qualtrics Form. Due to limitations of the Twitter API, The width of the Twitter Feed is limited to a maximum 656px, regardless of the width of the containing layout column. It is recommended to place a Twitter feed in a layout column no wider than 33%. |
| tweet-limit-[number] (e.g. "tweet-limit-6") |
Changes the display of the Twitter Feed to use an exact number of tweets, rather than a height value. [number] must be a positive integer. This will remove the scrollbar from the Twitter Feed, but the height of feed will be unpredictable (unless care is taken to structure all tweets in such a way that they have a uniform preview format). It is recommended to use this class if your Twitter Feed is at the bottom of a page, with no important content below it or in the same layout section. |
Only works with Twitter Feed. |
| Custom Class for Events Grid | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
|
title-align-left title-align-right |
Changes the alignment of the block title. | Use only one title alignment class at a time. |
| Custom Class for Content Grid | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
| feed-limit-[number] (e.g. "feed-limit-6") | Limits the number of items displayed from the selected feed to the number provided. | [number] must be a positive integer. |
| Custom Class for Freeform Text Box | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
|
title-align-center title-align-right |
Changes the alignment of the block title. | Use one title alignment class at a time. |
| Custom Class for Hero Banner | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
| text-placement-mid-center | Vertically aligns the text box to center of Hero Banner (will override Low-center or High-center selected options). | Low-center or High-center text placement. |
|
height-crop-percent-10 height-crop-percent-20 height-crop-percent-30 height-crop-percent-40 height-crop-percent-50 height-crop-percent-60 height-crop-percent-70 |
Crops the height of the Hero Banner by a percentage value. This percentage value is relative to the "default" cropped height of a normal Hero Banner image, not the original height of the source image. Since the Hero Banner image uses different aspect ratios at certain screen sizes, the amount cropped will also change for certain screen sizes. Be sure to check your page on all screen sizes. This class is not recommended for Hero Banners with long headlines or blurbs, because the height of the text box is likely to exceed the boundaries of the image on smaller screens. |
All |
|
height-crop-fixed-1 height-crop-fixed-2 height-crop-fixed-3 height-crop-fixed-4 |
Crops the height of the Hero Banner by a fixed amount. The Hero Banner image will still use different aspect ratios at certain screen sizes, but the amount cropped by this custom class is the same at all screen sizes. |
All |
| Custom Class for Link List | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
|
title-align-center title-align-right |
Changes the alignment of the block title. | Use one title alignment class at a time. |
|
no-bullets |
Removes bullets from the Link List. | All |
|
size-small |
Uses smaller text size (or buttons, if applicable). | All |
|
size-medium |
Uses slightly larger text size (or buttons, if applicable). | All |
|
size-large |
Uses larger text size (or buttons, if applicable). | All |
|
rules |
Adds rules between list items. |
All |
|
buttons |
Changes the list to button style with solid scarlet background. | All except buttons-outline and buttons-gray |
|
buttons-outline |
Changes the list to button style with scarlet outline. | All except buttons and buttons-gray |
|
buttons-gray |
Changes the list to button style with solid gray background. | All except buttons and buttons-outline |
| standard-case | Buttons text will not be forced to all-caps. | buttons, buttons-outline, buttons-gray |
|
one-column two-columns three-columns four-columns five-columns six-columns |
Changes the list to a column format. These columns are relative to the Link List itself, not Layout Builder columns. Using a column format will affect button styles by stretching them to be the full width of their respective columns. |
Use one column style custom class at a time. |
| underline | Buttons text will underline on mouse rollover. | buttons, buttons-outline, buttons gray |
| padding-extra | Buttons will have extra space around the text (resulting in a larger button). | buttons, buttons-outline, buttons-gray |
| font-weight-regular | Text will have the "regular" font weight instead of default "light." | All |
| single-row | Individual items will have no bottom margin. This is useful for reducing whitespace if you know that your items will consist of a single row. | All |
| outer-margin-narrow | Overrides margins to user narrower margin style on all sides. | All (overridden by more specific margin custom classes) |
| outer-margin-none | Overrides margin style to use no margin on left and right. | All |
| top-margin-none | Overrides margin style to use no margin on top. | All |
|
bottom-margin-none |
Overrides margin style to use no margin on bottom. | All |
| Custom Class for News Grid | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
| no-placeholder | Removes the gray placeholder box from stories that do not have a featured image. | Filtering mode "Include all stories whether or not they have a featured image" must be selected. |
|
title-align-left title-align-right |
Changes the alignment of the block title. | Use one title alignment class at at a time. |
| Custom Class for Points of Pride | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
| no-dividers | Removes the dividers between Points of Pride items. | Statistics View Mode |
|
title-align-left title-align-right |
Changes the alignment of the block title. | Use one title alignment class at at a time. |
|
standard-case-large-text standard-case-medium-text |
Use standard case for the display of the Large Text or Medium Text fields instead of forcing all-caps. | Any Highlight Tiles View Mode. Both classes must be used to affect both the Large Text and Medium Text fields. |
| Custom Class for Tiles | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
|
title-align-left title-align-right |
Changes the alignment of the block title. | Use one title alignment class at at a time. |
|
text-align-left text-align-center text-align-right |
Changes the alignment of the block text. This will override the default alignment for the chosen View Mode. | All |
| extend-text-fill | Extend the gray background of all text boxes to match the height of the tallest item in the row. | Tile-Style: Standard |
|
text-box-pin-left text-box-pin-left-5 text-box-pin-left-10 text-box-pin-right text-box-pin-right-5 text-box-pin-right-10 text-box-pin-top text-box-pin-top-5 text-box-pin-top-10 text-box-pin-bottom text-box-pin-bottom-5 text-box-pin-bottom-10 |
Pins the text box to a side of the box, instead of floating in the center. The -5 and -10 variations leave a 5% or 10% space between the edge of the text box and the edge of the Tile item. Pinning the text box can have undesirable results if text boxes are too long. Be sure to test this class with all screen sizes. This class has no effect on "Text Below" View Modes. |
All "Overlay" View Modes |
| background-scarlet | Changes Tile Style: Gray to use a scarlet background | Tile Style: Gray |
| yearbook |
Several changes to appearance, including image rollover effect, text wrapper position, font style, and grid breakpoints. Mixing this with other classes may have unpredictable results. |
Grid: 3:4 Overlay and Tile Size Smallest |
| no-margin-items | Removes space between individual Tiles items. | All |
| text-background-transparent | Makes the background of the text area transparent. | Tile Style: Standard |
| image-background-transparent | Makes the background of the image area transparent. | Tile Style: Standard |
| text-background-white | Makes the background of the text area white. |
Tile Style: Standard |
| image-background-white | Makes the background of the image area white. |
Tile Style: Standard |
|
image-width-smallest image-width-small image-width-medium-small image-width-medium |
Restricts the maximum width of Tiles images, regardless of the chosen Tile Size. (This only affects the width of the image. Other elements of the Tile are determined by Tile Size). Since this only restricts the maximum width of images, this may have no visible effect at smaller screen sizes (where the width of the Tile itself is already below the maximum width of the image). |
All |
|
image-outer-padding-small image-outer-padding-medium image-outer-padding-large |
Adds a fixed padding amount to the outer edges of Tiles images (default Tiles have no image padding). For "Text Below" View Modes, the outer edge refers to the edges that are not adjacent to the text area. For "Overlay" View Modes, the affects all four edges. Since this adds a fixed padding amount, it will have a visible effect at all screen sizes. |
All |
|
image-inner-padding-small image-inner-padding-medium image-inner-padding-large |
Adds a fixed padding amount to the inner edge of Tiles images (default Tiles have no image padding). For "Text Below" View Modes, the inner edge refers to the edge that is adjacent to the text area. This class has no effect on "Overlay" View Modes. Since this adds a fixed padding amount, it will have a visible effect at all screen sizes |
All "Text Below" View Modes |
|
headline-font-large headline-font-medium-large subhead-font-large subhead-font-medium-large blurb-font-large blurb-font-medium-large button-large button-medium-large |
Increases font sizes for Tiles text elements above the default size (default size in this context is "medium"). Headline, subhead, blurb, and button size must each be set individually. Depending on the length of the text, and the chosen Tile Size, large font sizes may result in text or buttons getting cut off at certain screen sizes. Consider also using the text-box-push custom class to avoid this. Always check your Tiles on various screen sizes after making any edits. |
All |
| text-box-push |
Changes rendering mode to allow the height of the Tile to expand with the content of the text elements. This means that Tiles with larger text elements will "push" down the entire row of Tiles to make sure that text or buttons do not get cut off. This could result in a "looser" grid, because uniform row height is no longer enforced. In cases where "Overlay" View Modes are used, this could also result in cases where the text "pushes" the height of the image box, and images may not completely cover the Tile area at certain screen sizes. Always check your Tiles on various screen sizes after making any edits. |
All "Overlay View Modes |
| text-box-fill | Allows the text box to fill the complete area of the tile, instead of the default setting, which limits the width of the text box to 85% of its Tile. | All "Overlay" View Modes |
|
stack-wide stack-wider |
Causes the Tiles grid to "stack" (collapse into a single column) at a wider screen size. This is useful for larger Tiles that have more text, where there are fewer Tiles per row, and where it makes less sense to have narrow Tiles on small screens. | All |
| collapse-vertical | Causes Tiles with no media element to ignore minimum height when they "stack" into a single column. This will allow text-only Tiles to have a tighter "stacked" appearance on smaller screens. | All |
| stack-reverse |
Causes Medium-Large Tiles to "stack" in reverse when they collapse into a single column. This means that the Tile on the right will "stack" above the tile on the left on small screen sizes. This only works with Tile Size Medium Large, which results in two Tiles per row. |
Tile-Size: Medium Large |
|
stack-text-up stack-text-down stack-media-up stack-media-down |
In Medium- Large Tiles, causes the top padding ("stack-xxx-up") or bottom padding ("stack-xxx-down") on either the text box or media box to decrease when the Tiles grid "stacks" into a single column. This will allow for a tighter "stacked" appearance on smaller screens. Choose the "up" or "down" variants as needed, based on the orientation of the Tiles row (i.e. the usage of stack-reverse). Choose the "text" and "media" variants individually, or both together, depending on how tight you want the stack to appear. Always check your Tiles on various screen sizes after making any edits.
|
Tile-Size: Medium Large |
|
image-screen-dark image-screen-darker |
Add a semi-transparent dark screen over your background image, to improve contrast with an overlay text box. | Tile Style: Standard |
|
image-screen-light image-screen-lighter |
Add a semi-transparent light screen over your background image, to improve contrast with an overlay text box. | Tile Style: Standard |
| Custom Class for Vertical Spacer | Description | Compatible View Modes, Custom Classes, or block settings |
|---|---|---|
|
title-align-left title-align-right |
Changes the alignment of the block title. | Use one title alignment class at a time. |
Link List
Contact Us
Phone: (614) 688-2828
Email: etshelp@osu.edu
Virtual Helpdesk:
ets.osu.edu/vhd (opens Zoom)
Virtual Helpdesk Hours:
M-F 9:00 A.M.-12:00 P.M.
M-F 1:00 P.M.-4:00 P.M.
Service Desk Locations:
Business Hours:
M-F 8:00 A.M.-5:00 P.M.
View My Tickets & Requests:
go.osu.edu/etsportal (external site)
Not seeing what you want on this page?
Try our I Want To... list.