Request variables blockquotes

[juanico10]

Describe the feature you'd like

Hello, Is it possible to request the variables (info, warning, success... etc) in the blockquote?

EXAMPLE:

Before going any further, make sure you meet all the requirements. {.is-info}

This documentation site is running on Wiki.js! {.is-success}

Best regards.

Describe the benefits this would bring to existing BookStack users

Richer and more visual notes when reporting.

Can the goal of this request already be achieved via other means?

No

Have you searched for an existing open/closed issue?

• [X] I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

1 to 5 years

Additional context

No response

[ssddanbrown]

Hi @juanico10,

We already support four different types of callout blocks as can be seen here:

These are accessed via the formats dropdown menu in the WYSIWYG editor, or via the Ctrl+9 shortcut in the both editor types (Keep pressing to cycle callout types).

[juanico10]

@ssddanbrown hello! Thank you very much for the prompt response. I had no idea about this, is there any documentation about more options? Best regards

[ssddanbrown]

I had no idea about this, is there any documentation about more options?

Sorry, I'm not fully sure what you need. We don't have detailed documentation for each function of the editor. Shortcuts are documented though: WYSIWYG, Markdown

Otherwise, you may find some additional tips/features in my power user videos:

• https://www.youtube.com/watch?v=tSaDVduc3uI
• https://www.youtube.com/watch?v=R3RuxqV01yk

[juanico10]

Hi @ssddanbrown, would it be possible to add a different type of call block for the ctrl+9? I would like to add such a type for the code:

I can't make you a pull request, I'm not a programmer.

[otherjoel]

Hi @ssddanbrown, would it be possible to add a different type of call block for the ctrl+9? I would like to add such a type for the code

Could you not simply use a code block for this?

[juanico10]

Hello, thanks for answering. Yes, for pieces of code yes, but this block, like the one in the image, is just to make it pretty without it being code, if not just as a gray color block, which looks very nice. thank you ☺️

[ssddanbrown]

@juanico10 I wouldn't look to add new block types just to suit stylistic preferences. If you are familiar with CSS, you could use the "Custom HTML Head Content" customization setting to override/customize the styles for an existing type of callout block to suit your needs.

[juanico10]

Hi @ssddanbrown What is the CSS file for the existing call block styles? Yes, I am familiar with HTML and CSS, can I add a new class in “Custom HTML header content”? I look forward to your reply. Best regards

[techauthoruk]

@juanico10

@ssddanbrown helped me with something similar quite some time ago. I have this style in the 'Custom HTML Head Content' in Settings - it may be useful for you:

<style>
    .callout.info {
        background-color: #226dac;
        border-color: #226dac;
        font-style: italic;
    }
    .callout.success {
        background-color: #17a24c;
        border-color: #17a24c;
    }
    .callout.success, .callout.info {
        color: #FFF;
        font-weight: bold;
        padding-left: 12px;
    }
    .callout.success:before,
    .callout.info:before {
        content: none;
    }
    .callout.caution {
        background-color: #ffff0d;
        border-color: #ffff0d;
        color: #000;
        font-weight: bold;
    }
        .callout.warning {
        background-color: #f7aa28;
        border-color: #f7aa28;
        color: #000;
        font-weight: bold;
    }
    .callout.danger {
        background-color: #dd292f;
        border-color: #dd292f;
        color: #FFF;
        font-weight: bold;
    }
        .callout.caution:before,
    .callout.warning:before,
    .callout.danger:before {
        background-size: contain;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABuCAMAAADbNSdmAAAAk1BMVEUAAAD/1CoAAAB7ZhTzyyj4zinpwibkviXuxifSriKReBdpVxE1LAgRDgP60CkfGQUYFATFpCB0YBO/nx+ihxqAaxUJBwHfuSTbtiTYsyPJpyGagBk+NArNqiG2lx6ylB2ukRxvXBKrjhynixuGbxZcTA5VRg5PQg1FOQssJAclHwYNCwKLdBdKPQy6mx5kUxBhURBbbDe7AAAAAXRSTlMAQObYZgAABARJREFUaN682NlS6kAURmF/zITBJAxiQARRcEI95/2fzqIoWbWNeGEP65Yqvmqqeyf02d/r7TuLGGxMGjeujBtZxo0vA9frQUQYd5spfYsnA/clFS+xZNxz7buLDl/m2pe8x5FZ8I0ODaPAuINCh6oyhgy81Ff9CDDuY6pjV+Fl4FtRfhkD5ijRTeglc5SuDVwEn5wcJdsqKIz7UsiWPoWUgVei8FME9ylVpzKcDDxXt1kwGHckok0gGXjXiihvwsAs+EI/N2HJQdzXTBR+igDf6VRL4ADueyIKP0WAhzrdHNi7u9ZvrZE9w9OZfms2BQ54lPLVaDEoJ62I13u/bp0JdrPrHRpB500Y+B53XPeONcsgUwT3OcGd9oi9roQp4hEey34/LRL/UwS3rMyrtOn6OEUekX3Bs87Tl3LvUwR3I8q/wxmfjfzJnaOkYmfdJuGzliniZcEPEqW1hV8VYIqwb0Xfd7VEWe0THsv038KlJHpgyc7uv0qmc9DuX6lkgex+z2K7sPCbTB/AHo8SvyZNZEq3yE5wk4u466F72W6dYRZkG1p4KTJTxOdRYkk0FzFFnOEPdWot3BeZ3efkblN1yizciswU8XmUGNaUiRynCO6V1K0yw3oK7GWKcGXZbXHi4URjYPd7FipPPJyoYoo4XFkSt3n0/Fms2e0kDARh1IG2IqUF4aImhGBrwq8JvP/TGRPCwazOdDvJeq4Nn9Wdb+sZBYKR8ypLraxbgfAm8Y8SUNacv5DmTLBDWQZKDab6j8WjLPWy/pDfKU4EO5Ql8GZtWIKOR/aNEjTEUuYB2YFk1yhBoVxOYYu4lSVMKuVygvpKcoz9VziNoBHrLLiVJRyCy8nbIihLlZbc80T+pqkig8+NgF7W81wUWFh4lCWsCT6KAmvPCPuv0RG8EwXWni5lCSvljoCItSf2X6dY3INX/b5Hr7LELN245qJTX0gerCyhnt4X9jCsRVCWb9KHzfg4v24zAWP23KMEtdiw9oyz/36YelNZ+rFbxLb/fmgRxyhB/jotd+P3535fTIvoytJmc/uoap2LCWvPgfYftojjMhMF+58nEDg92JBLWQ9sEZSlTb5XVYS69rSVpbVigtbRIth/k1CwVRMB61pRlKXNMhDlJqw9FWVpUo40+2L8pWd5Fvu6gbgjaStLfWULe4GoFkFZgv3iA53E/YosZWmf0KhZYH2jKEuLfEnunJaNahGUZQzZ5/15ybVh7YlnqSWOl/H3h+y6TCCmRRilaLLnppA4aBGUZRJYe6IsU8DakzfaNHCz3R64kGTks4fgUhKyJBjvkILLQ/Asl2QU1UPwaJpJIopy9ONYn5bjJLQL5vhfoDLT8pQ6mNy00eSmjib2CwSCTC9nllI4AAAAAElFTkSuQmCC');
    }
</style>

The png image used (in my use case an ISO warning/exclamation symbol is the base64 entry at the end of the style. The callout is used like this in your page:

<p class="callout info">An info message</p>
<p class="callout success">A Safety Information message</p>
<p class="callout caution">A Caution message</p>
<p class="callout warning">A Warning message</p>
<p class="callout danger">A DANGER message</p>

These broadly replicate what is currently available via the CTRL 9 shortcut in the editor (except in my case the image is of course different) but you can hopefully use this CSS as a basis for your use case . Mark