Button shortcode « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Avisio

Button shortcode

12 posts from 4 voices

Started 2 years ago by webWahine
Latest reply from Dude
This topic is not a support question

Tags:

webWahine
Member

hi all

i know that this may be a very simple question, but i can't seem to find an example of a basic button shortcode for avisio

i have also purchased and am using broadscope (another great theme!), and it has a very handy built in shortcode generator

i tired [button]text here[/button]

but it didn't recognise it - please advise

also, am i able to put shortcode buttons in the sidebar widgets as well?

thank you :)

Posted 2 years ago #
Dude
Dude

Hey,
currently Avisio doesn't offer a button shortcode (only Broadscope, Brightbox and Upscale do). I'll suggest it to Kriesi as a feature request.

Posted 2 years ago #
webWahine
Member

ok, thanks for the reply - both great themes! :)

Posted 2 years ago #
Dude
Dude

Thanks for the kind words :)

Posted 2 years ago #

Kriesi
Key Master

hey! you can pste this funtion into your functions.php file to make the button shortcode work:


if(!function_exists('avia_sc_button'))
{
	function avia_sc_button($atts, $content = null) {
	   	extract(shortcode_atts(array(	'size' => '',
	   									'style' => '',
	   									'color' => '',
	   									'border' => '',
	   									'text' => '',
	   									'class' => '',
	   									'link' => '#',
	   									'window' => ''), $atts));

	   	// Set custom background and border color
	   	$color_output = '';
	   	if ( $color ) {

	   		if ( 	$color == "red" OR
	   			 	$color == "orange" OR
	   			 	$color == "green" OR
	   			 	$color == "aqua" OR
	   			 	$color == "teal" OR
	   			 	$color == "purple" OR
	   			 	$color == "pink" OR
	   			 	$color == "silver"
	   			 	 ) {
		   		$class .= " ".$color;

	   		} else {
			   	if ( $border )
			   		$border_out = $border;
			   	else
			   		$border_out = $color;

		   		$color_output = 'style="background-color:'.$color.';border-color:'.$border_out.'"';

		   		// add custom class
		   		$class .= " custom";
	   		}
	   	}

		$class_output = '';

		// Set text color
		if ( $text ) $class_output .= ' '.$text;

		// Set class
		if ( $class ) $class_output .= ' '.$class;

		// Set Size
		if ( $size ) $class_output .= ' '.$size;

		// Open in new window?
		if ( $window ) $window = 'target="_blank" ';

	   	$output = '<span class="avia-'.$style.'">' . avia_remove_autop($content) . '</span>';
	   	return $output;
	}
	add_shortcode('button', 'avia_sc_button');
}

now wordpress will recognize the shortcode the same way it does in broadscope (but without the visual user interface for shortcodes, thats unfortunatley too much to add)

now add this to your css file and you should at least have default colored buttons to use:

.avia-button{
color:#fff;
background-image: url("../images/icons/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
padding:0 10px;
font-size: 12px;
text-decoration: none;
display:inline-block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
margin:3px 0;
line-height: 28px;
border-color: #e1e1e1;
background-color: #f8f8f8;
position: relative;
}

.avia-button:hover{
background-position: 0 -4px;
opacity:0.9;
color:#fff;
text-decoration: none;
}

.avia-button.dark , .avia-button.dark:hover{
color:#444;
}

.avia-button.grey, .avia-button.grey:hover{
color:#999;
}

.avia-button.red{background-color: #b00202; 	border-color: #b00202; }
.avia-button.orange{background-color: #f6a240; 	border-color: #f6a240; }
.avia-button.green{background-color: #52851b; 	border-color: #52851b; }
.avia-button.aqua{background-color: #58c4be; 	border-color: #58c4be; }
.avia-button.teal{background-color: #1d9f9f; 	border-color: #1d9f9f; }
.avia-button.purple{background-color: #a258c4; 	border-color: #a258c4; }
.avia-button.pink{background-color: #f346b0;	border-color: #f346b0; }
.avia-button.silver{background-color: #d7d7d7; 	border-color: #d7d7d7; }

.avia-button.small{
padding:0 4px 0px 4px;
font-size: 10px;
line-height: 22px;
}

.avia-button.large{
padding:0 10px 0px 10px;
font-size: 13px;
line-height: 33px;
}

.avia-button.xl{
padding:0 18px 0px 18px;
font-size: 14px;
line-height: 42px;
}

.avia-button span{
position: relative;
}

Posted 1 year ago #

Baris
Member

hey Kriesi,

could you create for Expose theme too, please?

Posted 1 year ago #
Dude
Dude

Hey,
You can use the same code with expose too. Just paste it in functions.php and style.css.

Posted 1 year ago #
Baris
Member

That is great Peter and I hope Kriesi shares another nice shortcodes ;)

edit: How can I use shortcode?

Thanks

Posted 1 year ago #
Baris
Member

bump!

Posted 1 year ago #
Dude
Dude
Try something like:
```
[button link="http://google.com" size="large" color="#000" border="#333" text="light" window="yes"]Test[/button]
```
It's the full configuration with link, size, bgcolor, border, text color and new window (_blank) and button caption ("test"). Please be aware that we can't support this modification (so if some features don't work out right I can't dig around to find the problem).
Posted 1 year ago #
Baris
Member

thanks dude, but shortcode does not work :(

Posted 1 year ago #
Dude
Dude
Try to replace following code line in Kriesi's code:
```
$output = '<span class="avia-'.$style.'">' . avia_remove_autop($content) . '</span>';
```
with:
```
$output = '<span class="avia-'.$style.'">' . $content . '</span>';
```
I'd recommend to use a plugin like: http://tunila.me/article/web/wordpress/plugins/css3-buttons-extension-wordpress.html though...
Posted 1 year ago #