Callouts?

Is it possible to have something like callouts or admonitions in wackowiki?


like this: https://squidfunk.github.io/mk[...]tensions/admonition/
or this: https://www.lotar.altervista.o[...]bootswrapper/callout


I have seen that one can make a named box, but would need to at least color the box in red/green/yellow/blue.


thanks!


PS: I am totally new to wackowiki and used mkdocs and dokuwiki before :)

Comments

  1. Re: Callouts

    Info boxes are on the TODO list. The question is where and how it should be realized. Should the content of these boxes parsed dynamically, and do we want have these options also available for the shade and box wrapper to avoid unnecessary wrapper nesting.

    There are undocumented wrappers under formatter/highlight/ like info or question having all the same syntax except a different CSS class. There will be soon a dedicated page for this issue in the wiki.

    For the meantime you can add your own callout wrapper:
    %%(callout type="warning" title="Warning") Different info box wrappers and types are planned.%%

    formatter/highlight/callout.php
    
    <?php

    /*
        % %(callout
            [type= "info | warning | error | important")]
            [style= "no use")])
        content
        % %
    */

    $style_class    'callout';
    $type_class        '';
    $styles            = ['info''warning''error''important''question''example''success''fail'];

    if (!isset(
    $options['type']))        $options['type']    = 'info';
    if (!isset(
    $options['title']))        $options['type']    = '';
    if (!isset(
    $options['style']))        $options['style']    = false;

    if (
    in_array($options['type'], $styles))
    {
        
    // callout type-* in wacko.css
        
    $type_class 'type-' $options['type'];
    }

    $title $options['title'] ?? null;

    echo    
    '<ignore><div class="' $style_class ' ' $type_class '">' "\n" .
            (
    $title
                
    '<p class="callout-title">' Ut::html($title) . '</p>' "\n"
                
    '');
    #echo        Ut::html($text);                        // text as is
    include Ut::join_path(FORMATTER_DIR'wiki.php');    // parsed with WackoFormatter
    echo        "</div></ignore>\n";


    add the CSS classes to wacko.css of your theme
    /* Callouts: SYNTAX % %(callout type="warning" title="Warning")text% % */
    .callout {
    	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
    	position: relative;
    	margin: 1.5625em 0;
    	padding: 0 .6rem;
    	border-left: .2rem solid #448aff;
    	border-radius: .1rem;
    	/* font-size: .64rem; */
    	overflow: auto;
    }
    
    .callout > :last-child {
    	margin-bottom: .6rem;
    }
    
    .callout-title {
    	margin: 0 -.6rem;
    	padding: .4rem .6rem .4rem 2rem;
    	border-bottom: .05rem solid rgba(68,138,255,.1);
    	background-color: rgba(68,138,255,.1);
    	font-weight: 700;
    }
    
    .callout > .callout-title::before {
    	position: absolute;
    left: .6rem;
    	color: #448aff;
    	font-size: 1rem;
    	content: "✎";
    }
    
    .callout.type-warning {
    	border-left-color: #ff9100;
    }
    
    .callout.type-warning > .callout-title {
    	border-bottom-color: rgba(255,145,0,.1);
    	background-color: rgba(255,145,0,.1);
    }
    
    .callout.type-warning > .callout-title::before {
    	position: absolute;
    left: .6rem;
    	color: #448aff;
    	font-size: 1rem;
    	content: "⚠";
    }
    
    .callout.type-success {
    	border-left-color:#00c853
    }
    .callout.type-success>.callout-title {
    	border-bottom-color: rgba(0,200,83,.1);
    	background-color: rgba(0,200,83,.1)
    }
    .callout.type-success>.callout-title:before {
    	color: #00c853;
    	content: "✔️"
    }
    
    .callout.type-question {
    	border-left-color: #64dd17
    }
    .callout.type-question>.callout-title {
    	border-bottom-color: rgba(100,221,23,.1);
    	background-color: rgba(100,221,23,.1)
    }
    .callout.type-question>.callout-title:before {
    	color: #64dd17;
    	content: "?"
    }
    
    .callout.type-fail {
    	t-color: #ff5252
    }
    .callout.type-fail>.callout-title {
    	border-bottom-color: rgba(255,82,82,.1);
    	background-color: rgba(255,82,82,.1)
    }
    .callout.type-fail>.callout-title:before {
    	color: #ff5252;
    	content: "❌"
    }
    
    .callout.type-example {
    	border-left-color: #651fff
    }
    .callout.type-example>.callout-title {
    	border-bottom-color: rgba(101,31,255,.1);
    	background-color: rgba(101,31,255,.1)
    }
    .callout.type-example>.callout-title:before {
    	color: #651fff;
    	content: "💡"
    } 


    The CSS was taken from the example above, modify it for your needs.

    If you modify your theme, don't forget to copy and rename the theme folder, this will protect you from accidentally overwriting your theme with the default version during the next upgrade process.

    Example:

    %%(callout type="info" title="Info")
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.
    %%
    • WikiAdmin
    • 20.01.2020 10:30 edited