| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| additional_classes [2023/01/28 20:10] – thehort | additional_classes [2023/02/28 00:18] (current) – thehort |
|---|
| Wordpress allows CSS classes to be added to most block elements in the content editor. This can be found in the right inspector window when a block is selected and expanding the ''Advanced'' section. There are elements within the site where this field is used to modify appearance. Multiple class names can be added to each block, but each much be separated by a single space. The most relevant classes for each element will be noted on its page throughout this documentation. Below are some classes that can come in universally handy: | Wordpress allows CSS classes to be added to most block elements in the content editor. This can be found in the right inspector window when a block is selected and expanding the ''Advanced'' section. There are elements within the site where this field is used to modify appearance. Multiple class names can be added to each block, but each much be separated by a single space. The most relevant classes for each element will be noted on its page throughout this documentation. Below are some classes that can come in universally handy: |
| |
| | |< 100% 250px >| |
| ^ Class Name ^ Effect ^ | ^ Class Name ^ Effect ^ |
| | margin-0 | Sets margins on all sides to 0px | | | ''container'' | Adds the default horizontal spacing between the edge of the screen and the element. Alternatively, elements can be nested in a [[columns|single column]] to achieve the same effect. | |
| | margin-bottom-0 | Sets the bottom margin 0px | | | ''container%%--%%large'' | Restricts element to a max width of 1420px | |
| | margin-top-0 | Sets the top margin 0px | | | ''container%%--%%medium'' | Restricts element to a max width of 1280px | |
| | mobile-full-width | Sets the element to take up the entire screen width at mobile screen sizes | | | ''container%%--%%small'' | Restricts element to a max width of 950px | |
| | mobile-padded | Adds 20px of padding to the left and right of the element at mobile screen sizes | | | ''inline-quote'' | Adds quotation styling with a large leading quote and text indentation | |
| | padding-0 | Sets padding on all sides to 0px | | | ''margin-0'' | Sets margins on all sides to 0px | |
| | padding-bottom-0 | Sets the bottom padding 0px | | | ''margin-bottom-0'' | Sets the bottom margin 0px | |
| | padding-top-0 | Sets the top padding 0px | | | ''margin-top-0'' | Sets the top margin 0px | |
| | | ''mobile-full-width'' | Sets the element to take up the entire screen width at mobile screen sizes | |
| | | ''mobile-no-padding'' | Removes all padding around element at mobile screen sizes | |
| | | ''mobile-padded'' | Adds 20px of padding to the left and right of the element at mobile screen sizes | |
| | | ''padding-0'' | Sets padding on all sides to 0px | |
| | | ''padding-bottom-0'' | Sets the bottom padding 0px | |
| | | ''padding-top-0'' | Sets the top padding 0px | |