Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #4322

    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 :)

    #45856

    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.

    #45857

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

    #45858

    Thanks for the kind words :)

    #45859

    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;
    }

    #45860

    hey Kriesi,

    could you create for Expose theme too, please?

    #45861

    Hey,

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

    #45862

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

    edit: How can I use shortcode?

    Thanks

    #45863

    bump!

    #45864

    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).

    #45865

    thanks dude, but shortcode does not work :(

    #45866

    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…

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Button shortcode’ is closed to new replies.