How Shortcodes plugin works

Shortcodes Ultimate plugin provides you with capability to use numerous shortcodes. Using these shortcodes you can add various elements, from simple buttons to complex galleries to your site.

The Shortcodes plugin includes custom CSS editor, with the help of which you can easily change the appearance of shortcodes.

Getting started

Navigate to Dashboard – Shortcodes – Settings and find Custom CSS code field.

Here you can start writing custom styles.
Styles written in custom CSS editor will have priority and will override default styles of shortcodes.
Some tips for writing of custom CSS code are given below. Please read them to facilitate your work.

Find correct shortcode selector

To change the appearance of some specific shortcode or its element, first you should learn CSS class of this shortcode/element. To do this you can use inspector.

Inspector is a developer’s tool provided with the browser, which allows to see source code of the page. Inspectors may look a bit different in different browsers, but the main function look and work similarly.

Open inspector and press “Find element” button. Click the required element on the page to see its selector.

Use of shortcode custom classes

When writing custom styles it is recommended to use additional CSS classes. The majority of plugin shortcodes allow to use additional CSS classes. Additional CSS class can be added with the help of special class attribute. The next shortcode should be inserted into post editor:

[su_divider class="my-custom-divider"]

Now additional CSS class may be used to change shortcode appearance. The next shortcode should be inserted into custom CSS editor:

.my-custom-divider {
	width: 50%;
}

Use of variables in editor

Editor allows to use some variables in CSS code. Variables can be used for display of links on the code, e.g. links to background image or font file. Available variables are listed below.

%home_url%

Description: link to main page of the site.
Result: http://example.com

%theme_url%

Description: link to active theme folder.
Result: http://example.com/wp-content/themes/twentysixteen

%plugin_url%

Description: link to the folder with Shortcodes Ultimate plugin.
Result: http://example.com/wp-content/plugins/shortcodes-ultimate

IMPORTANT: all links will be displayed without trailing slash.

Example of variables used in CSS code:

.my-custom-spoiler .su-spoiler-title {
	background-image: url( '%theme_url%/images/custom-spoiler.png' );
}