Customize CSS in Asciidoctor JS

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Customize CSS in Asciidoctor JS

gquintana
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
Reply | Threaded
Open this post in threaded view
|

Re: Customize CSS in Asciidoctor JS

Ted
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
Reply | Threaded
Open this post in threaded view
|

Re: Customize CSS in Asciidoctor JS

mojavelinux
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


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|

Re: Customize CSS in Asciidoctor JS

gquintana
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
Reply | Threaded
Open this post in threaded view
|

Re: Customize CSS in Asciidoctor JS

mojavelinux
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