As a developer, how can I fully customize the CSS?
There is some limited support for customizing the CSS in individual content blocks, but that CSS only applies to the outermost node in the content block. So that's not always enough to give you the level of control that you need.
For example, if the outermost node is a table wrapper and inside of it is a `p` - setting the `color` on the `table` won't actually modify the color of the paragraph inside of it.
So here's how you can get more control over the stylesheet.
In the Pre-Header content panel, if you expand the Advanced options, you can use the Custom CSS:
What' you'll need to do is inspect the message html contents in order to find the css selectors that you need to override.
When inspecting the HTML, be sure to be looking at the /message/{id}/preview/ URL (which you have to manually navigate to). If you're at the /message/{id} URL, there will be other HTML embedded in there which enables the editor (drag/drop features, etc.).
In the example above, we've shown how to modify the color / font style of the `.product-grid .product-name`.
Level of specificity
In some cases you will have to increase the level of specificity in order for your custom CSS to override the base CSS. For example, in order to remove the border on the .section-title-inner, if you use:
.section-title-inner {
border: none;
}
It won't be enough. You'll need to use:
.section-title .section-title-inner {
border: none;
}
In general, you'll want to be as specific or more specific than the base CSS: