Shortcode: XSS_LINK

If you need to create button like links, xScape Theme Framework themes offer two ways to do this both based on the CSS styling, one through the use of CSS classes and the other by using the shortcode that will be rendered as the link element with all CSS styling applied.

To get list of supported parameters for the shortcode, supported colors and sizes, here is the link to the documentation for the XSS_LINK shortcode:
http://www.dev4press.com/document/shortcode/xss_link/

In all examples for shortlinks on this page, all shortcodes are modifed to include the empty space between [ character and shortcode name. To use it, remove this space when using.

If you don’t want to use shortcodes, you can use CSS classes applied on A link tag. There are 3 classes you can use. First, always must be xss-button. Next must be color class: xss-button-color-name. Optional third one for size: xss-button-size-name.  Replace name with supported names (shortcode documentation).

Example: simple red button link

Using Shortcode:

[ xss_link href="http://www.dev4press.com/" color="red"]Go to Dev4Press Home[/xss_link]

Using normal link with CSS classes:

<a class="xss-button xss-button-color-red" href="http://www.dev4press.com/">Go to Dev4Press Home</a>

Example Result:

Go to Dev4Press Home

Example: big blue button link

Using Shortcode:

[ xss_link href="http://www.dev4press.com/" color="blue" size="big"]Dev4Press[/xss_link]

Using normal link with CSS classes:

<a class="xss-button xss-button-color-blue xss-button-size-big" href="http://www.dev4press.com/">Dev4Press</a>

Example Result:

Dev4Press

As you can see, it is easy to get both types of styling for nice button shaped links. This is supported by all xScape themes. To have default styling loaded, option for loading button.css must be enabled on the theme global settings panel, xScape tab, general settings group on that tab.

Comments

Leave a Reply