Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Updating styles overviews with images to match later topics #21

Merged
merged 1 commit into from
Dec 18, 2020
Merged

Updating styles overviews with images to match later topics #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 61 additions & 1 deletion docs/images/pagebuilder-style-selector.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 11 additions & 3 deletions docs/styling/how-to-override-pagebuilder-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
# Override Page Builder styles

To override the internal CSS Page Builder applies to content types, you must create a CSS selector with a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) greater than 110, which is Page Builder's default selector specificity for all native and custom content types. To learn the details of how Page Builder styles its content types, see [How Page Builder styles content](how-pagebuilder-styles-content.md).
To override the internal CSS Page Builder applies to content types, you must create a CSS selector with a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) greater than 110, which is Page Builder's default selector specificity for all native and custom content types, as shown here:

To help you with overriding Page Builder styles, we recommend the following CSS selector pattern. This pattern ensures your CSS will override Page Builder's existing CSS selectors for content types.
![Default style selector](../images/pagebuilder-style-selector.svg)
_Page Builder default style selectors_

To learn the details of how Page Builder styles its content types, see [How Page Builder styles content](how-pagebuilder-styles-content.md).

## CSS selector override pattern

To help you with overriding Page Builder styles, we recommend the following CSS selector pattern: `#html-body` + `[attribute]` + `any additional selector`, as shown here:

![CSS selector override pattern](../images/pagebuilder-style-override-pattern-class.svg)
_Page Builder override selector pattern_

1. `#html-body` - Start all your override selectors with this `id`. It's in the `<body>` element of all Magento frontend and admin pages.

1. `[data-content-type="content-type-name"]` - Add a content-type attribute selector next, where the `"content-type-name"` is the name of the content type found in its configuration file. For example, to target the `Row` content type, your attribute selector would look like `[data-content-type="row"]`.
1. `[data-content-type='my-custom']` - Add a content-type attribute selector next, where the `'my-custom'` is the name of the content type found in its configuration file. For example, to target the `Row` content type, your attribute selector would look like `[data-content-type='row']`.

1. `Any additional selector` - The first two selectors match Page Builder's internal selectors with a specificity of 110. Adding any other selector (except `*`) will bump the specificity to 111 or higher, which overrides Page Builder's internal selector.

Expand Down