Callouts?

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


like this: https://squidfunk.github.io/mk[...]/admonitions/?h=call
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

  2. 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= "note | warning | error | important")]
            [style= "no use")])
        content
        % %
    */

    $style_class    = 'callout';
    $type_class        = '';
    $types            = ['default', 'error', 'example', 'fail', 'important', 'note', 'question', 'quote', 'success', 'warning'];

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

    if (    in_array($options['type'], $types))
    {
            // 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"
                    : '');
    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-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 {
	color: #ff9100;
	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 {
	border-left-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="note" title="Note")
    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
    • 01.06.2022 09:53 edited

  3. Kommentar 683

    Thanks a lot! Will tinker around :)

    Can I follow this feature request on the issue tracker (I couldn't find it there)? Or is Mantis actually only for squashing bugs?

  4. Re: Callouts?

    Formatter Example

    The new info box formatter made it into the 6.0.3 release. Additional formatters like tabs or spoilers can be added the same way.
    • WikiAdmin
    • 02.01.2021 09:32 edited
Log in or create an account to post a comment.