Asciidoctor :: Discussion

Customize CSS in Asciidoctor JS

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

5 messages Options

gquintana

May 08, 2019; 9:06pm

Customize CSS in Asciidoctor JS

Hello,

I am using Asciidoctor JS edition, I'd like to tweak a few CSS.
I've read https://asciidoctor-docs.netlify.com/asciidoctor.js/extend/stylesheets/
but I'd like to avoid creating a whole new template.

As I'am also using asciidoc reveal JS, which has a handy :customcss: my-css.css property,
https://asciidoctor.org/docs/asciidoctor-revealjs/#using-asciidoc-roles
I am wondering is there something similar in classic asciidoctor implementation?
I just want to add something like:

<link rel="stylesheet" href="./my-css.css">

to HTML header.

Is it possible?

Ted

May 13, 2019; 3:13pm

Re: Customize CSS in Asciidoctor JS

gquintana wrote
I just want to add something like:
<link rel="stylesheet" href="./my-css.css">
to HTML header.

Is it possible?

Yes, you can use the docinfo.html file to inject CSS into your rendered files. See Docs: https://asciidoctor-docs.netlify.com/asciidoctor/1.5/docinfo/

Take a look at this example code https://github.com/tedbergeron/AsciidoctorSemanticColors

In the Docinfo.html file I've added <style> to change some colors and add a new color. You could link to a separate CSS file instead of embedding the style as I did.

- Ted @TedAtCIS

mojavelinux

May 13, 2019; 8:16pm

Re: Customize CSS in Asciidoctor JS

Administrator

It's even simpler than that:

-a stylesheet=my-stylesheet.css

That replaces the default stylesheet with your own.

Cheers,

-Dan

On Mon, May 13, 2019 at 9:13 AM Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote:

gquintana wrote
I just want to add something like:
<link rel="stylesheet" href="./my-css.css">
to HTML header.

Is it possible?
Yes, you can use the docinfo.html file to inject CSS into your rendered files. See Docs: https://asciidoctor-docs.netlify.com/asciidoctor/1.5/docinfo/

Take a look at this example code https://github.com/tedbergeron/AsciidoctorSemanticColors

In the Docinfo.html file I've added <style> to change some colors and add a new color. You could link to a separate CSS file instead of embedding the style as I did.
- Ted @TedAtCIS

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Customize-CSS-in-Asciidoctor-JS-tp6901p6912.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

... [show rest of quote]

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux

gquintana

May 16, 2019; 7:55pm

Re: Customize CSS in Asciidoctor JS

When I had

:stylesheet: custom.css

It replaces the default stylesheet, I only want to add my own css after the default one.
As I said, I don't need to design a new theme.

docinfo even if it's bit complicated does the trick.

Thanks for your help

mojavelinux

May 16, 2019; 8:07pm

Re: Customize CSS in Asciidoctor JS

Administrator

The simple solution to that problem (apart from using docinfo) is to store the default stylesheet locally and add the following to the top of custom.css

@import url(asciidoctor.css);

/* add your custom styles here */

Cheers,

-Dan

On Thu, May 16, 2019 at 1:55 PM gquintana [via Asciidoctor :: Discussion] <[hidden email]> wrote:

When I had
:stylesheet: custom.css
It replaces the default stylesheet, I only want to add my own css after the default one.
As I said, I don't need to design a new theme.

By the way, thanks for your help

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Customize-CSS-in-Asciidoctor-JS-tp6901p6923.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux