!! Custom text styles

If you are familiar with CSS, you can create your own [[text styles -> page://textstyles]], which can then be used on wiki pages using the %code%[=%your-style%Styled text%%=]%% wiki command.

All text styles are stored in the %notice%textstyles%% subdirectory within the [[settings directory -> page://config-dirs]]. Inline styles are stored in the %notice%textstyles/inline%% subdirectory, while block styles are located in the %notice%textstyles/block%% folder.

To add a new style, you need to create a file with the %notice%.css%% extension in one of these directories. The filename must match the name of the style you are creating. For example, if you want to create a new ''block'' style named %notice%my-cool-style%%, you should create a %notice%my-cool-style.css%% file in the %notice%textstyles/block%% directory. If you want to create an inline style with the same name, you should create the %notice%my-cool-style.css%% file in the %notice%textstyles/inline%% directory.

The created file must contain the CSS code that will be inserted into the wiki page's code. Please note that inline styles will be applied to the %code%&lt;span&gt;%% tag, and block styles will be applied to the %code%&lt;div&gt;%% tag. Therefore, the %notice%my-cool-style%% inline style should contain the following code:

%code%
[@span.my-cool-style {
...
}@]
%%

And the block style with the same name should contain:

%code%
[@div.my-cool-style {
...
}@]
%%

In particular, to create the %notice%object%% style, you need to create the %notice%object.css%% file in the %notice%textstyles/inline%% directory with content like this:

%code%
[@span.object {
    display: inline;
    background-color: #ffd180;
    color: inherit;
    padding: 0px 2px;
    border-radius: 1px;
}@]
%%

After that, the new %notice%object%% style will be available for use as follows:

%border%
Regular text. %code%[=%object%Text with "object" style%%=]%%. Regular text again.
%%

You can also add arbitrary CSS code to the style file, which will also be inserted into the HTML code of the wiki page.

----
'''See also:'''
* page://textstyles
* page://config-dirs