You can add the styles you want to the custom CSS box in the plugin settings. The best way to do this is to specify a new class for your custom version, and place that in the Class box (or add class=”class-name” to your shortcode in the editor). Then you can call to just that custom type.
Here’s an example:
On your page:
[su_heading class="su-heading-green"]This is a header with green text[/su_heading]
In your Shortcodes Ultimate settings > Custom CSS tab:
.su-heading-green {
border-top: 1px solid #0d5412;
border-bottom: 1px solid #0d5412;
color: #33662e;
font-weight: bold;
}
.su-heading-green.su-heading-inner {
border-top: 4px solid #538256;
border-bottom: 4px solid #538256;
}
Notice that I handled two elements, which is because the shortcode creates:
<div class="su-heading su-heading-style-default su-heading-align-center su-heading-green" style="font-size:13px;margin-bottom:20px">
<div class="su-heading-inner">This is a header with green text</div>
</div>
The double lines were created by a top/bottom border on both the main element and the inner element, so I accounted for both…and made the font bold just because.
