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. Please note that not all custom block will allow the addition of custom classes. Here are quick links to the 13 custom blocks that allow custom classes:

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.

Content Grid

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.

Embedded iFrame

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.

Events Grid

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.

External Feed

Freeform Text

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.

Hero Banner

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

News Grid

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.

Points of Pride

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

Tiles

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-item 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

Testimonial

Vertical Spacer

Contact Us

Phone: (614) 688-2828

Email: etshelp@osu.edu

Virtual Helpdesk: go.osu.edu/etsvirtualhelpdesk

Subscribe to Notifications (Twitter):
https://twitter.com/OhioStateETS

View My Tickets & Requests:
https://go.osu.edu/etsportal

Service Desk Locations:

Business Hours:
M-F 8:00 A.M.-5:00 P.M.

Not seeing what you want on this page?
Try our I Want To... list.