[Solved] Custom style on title/heading element?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

[Solved] Custom style on title/heading element?

thoraxe
This post was updated on .
It's relatively easy to apply a custom style to a paragraph, div, etc:

[.category-info.helper.pt0]

However, I cannot for the life of me figure out how to apply a style to a heading/title.

For example, given the title:

=== This Title Is Styled

I want the ultimate HTML to be:

<h3 class="category-title">This Title Is Styled</h3>

The following doesn't work:

[category-title]
=== This...

Neither does:

[.category-title]
=== This...

Or putting it on one line:

[category-title]=== This...

Or with the dot:

[.category-title]=== This...

I've done a bunch of searching and I cannot seem to find out if this is possible or not.

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

mojavelinux
Administrator
Section titles support roles just like all blocks.

thoraxe wrote:
[.category-title]
=== Title

This is the correct syntax. It generates the following HTML:

<div class="sect2 category-title">
<h3 id="_title">Title</h3>
</div>

By default, the HTML converter wraps the section in a div. That's where the role goes. To style it, you'd use:

.category-title > h3 {
  ...
}

or

.sect2.category-title > h3 {
  ...
}

If you want to change how the HTML is generated, you need to use a custom template, in this case for section (e.g., section.html.slim). Here's an example: https://github.com/asciidoctor/asciidoctor-backends/blob/master/slim/html5/section.html.slim.

More information about custom templates can be found in the following issue: https://github.com/asciidoctor/asciidoctor.org/issues/80

Cheers,

-Dan

--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

thoraxe
Looking at:

https://github.com/asciidoctor/asciidoctor-backends/blob/master/slim/html5/section.html.slim

I'm not entirely sure how I would modify the slim in order to inherit a class, because the syntax you suggested was "correct" wraps the title/heading in a div...
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

thoraxe
OK, sorry to post a response to my own response, but after digging a little deeper I'm pretty confident I'm going to need to use a template. But I am using asciidoctor with Middleman, so I'm not sure where the templates need to go.

I'm working on incorporating the following theme with Middleman/Asciidoc so that contributors don't have to write ERB:

http://themes.vsart.me/vsdocs/tutorial.html

In some cases, I need a heading with a fragment identifier (anchor-y stuff):

<div class="category-info helper pt0" id="tutorial">
  <h3 class="category-title">
    Short Photoshop tutorial
    <a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#tutorial">
      <i class="fa fa-link"></i>
    </a>
  </h3>
</div>

Here's the slim you referenced, which I assume is the "out of the box" template:

- sect0 = section_level == 0
= html_tag_if !sect0, :div, class: [%(sect#{section_level}), role]
  *{tag: %(h#{section_level + 1}), id: id, class: ('sect0' if sect0)}
    - if id && (document.attr? :sectanchors)
      a.anchor href="##{id}"
      =section_title
    - elsif id && (document.attr? :sectlinks)
      a.link href="##{id}" =section_title
    - else
      =section_title
  - if section_level == 1
    .sectionbody =content
  - else
    =content

So, I'm guessing I'll need to engineer a template that somehow gets passed an attribute "anchored" which inserts the fragment identifier bit... which is where I'm a little lost.

I'm not asking you to write the template for me, just trying to figure out (when using Middleman) where the Asciidoctor template needs to go and/or how to specify how to use it and/or where the docs are on passing attributes (not necessarily CSS) to the template/item.

After that I've got some fussing to do with the UL and other templates, but that shouldn't be too bad.
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

mojavelinux
Administrator
Erik,

We like follow-ups. It helps others who are facing the same challenge.

after digging a little deeper I'm pretty confident I'm going to need to use a template.

Correct. Templates are the simplest way to customize the HTML that Asciidoctor generates by default (and keep in mind, it's just a default). In fact, you can use templates to change every bit of HTML that is generated.

Before I continue, I want to acknowledge that we're still missing a tutorial for how to use custom templates. I welcome assistance from anyone who wants to help make it happen. See https://github.com/asciidoctor/asciidoctor.org/issues/80

I'm working on incorporating the following theme with Middleman/Asciidoc so that contributors don't have to write ERB: 

👍

 the slim you referenced ... I assume is the "out of the box" template: 

For the most part, yes. It requires the helpers.rb file that is found in the same directory (in other words, you need to pull out both files).

There's also a HAML version.


I'm guessing I'll need to engineer a template that somehow gets passed an attribute "anchored" which inserts the fragment identifier bit... which is where I'm a little lost. 

When making a custom template, I always recommend starting simple and adding things back in as you go. That's how I start. Therefore, you might start with:

*{tag: %(h#{level + 1}), id: id, class: role}
  =captioned_title
=content

For your example, that will give you:

<h3 id="_this_title_is_styled" class="category-title">This Title Is Styled</h3>
section content here

In order to load the templates when using Middleman, you need to set the following option in your config.rb file:

set :asciidoc, {
  safe: :safe,
  template_dir: 'path/to/templates',
  attributes: %W(showtitle env=middleman env-middleman middleman-version=#{Middleman::VERSION})
}

NOTE: The value of the asciidoc_attributes option is appended to the attribute list in the value of the asciidoc option.

You may want to set other options or attributes.

I hope that helps!

Cheers,

-Dan 

--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

thoraxe
This post was updated on .
Thanks!

Still having a little trouble here.

https://gist.github.com/thoraxe/4f2faf61b0a20f983de01efae16d85bd

It doesn't appear that the template is being used/rendered. I don't see "foo" anywhere.

Here's the current middleman config stuff:

:asciidoc = {:safe=>:safe,
 :template_dir=>"/templates",
 :attributes=>
  ["showtitle",
   "env=middleman",
   "env-middleman",
   "middleman-version=3.4.1",
   "imagesdir=/img"],
 :base_dir=>"/home/thoraxe/Red_Hat/openshift/discoverycenter/source"}(Default: {:safe=>:safe, :backend=>:html5, :attributes=>["env=middleman", "env-middleman", "middleman-version=3.4.1"]})

Directory structure:

find source/templates/
source/templates/
source/templates/helpers.rb
source/templates/.section.html.haml.swp
source/templates/section.html.haml

I also tried it the way I had poked around:

set :asciidoc_attributes, %w(source-highlighter=coderay coderay-css=style template_dir=/templates)

This also does not work :(

I even tried using pry as documented here: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/HACKING.adoc#interactively-debug-a-template

But I never get INTO pry, which means the template file is definitely not being evaluated/loaded.
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

mojavelinux
Administrator

On Tue, Mar 29, 2016 at 2:08 PM, thoraxe [via Asciidoctor :: Discussion] <[hidden email]> wrote:
:template_dir=>"/templates",

This should be a relative path (unless the templates are really located at /templates in the Linux file system).

Asciidoctor does not show a warning if the templates directory is not found.

-Dan


--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

thoraxe
Aha!

set :asciidoc, {
  safe: :safe,
  template_dir: 'source/templates/',
  attributes: %W(showtitle env=middleman env-middleman middleman-version=#{Middleman::VERSION})
}

Now I get an error, which is better!

LoadError: cannot load such file -- pry

But it's not in my bundle, so that's to be expected.

Awesome!
Reply | Threaded
Open this post in threaded view
|

Re: Custom style on title/heading element?

mojavelinux
Administrator
I've updated the sample project I created for using AsciiDoc with Middleman that includes the correct configuration. You can study it to see what is missing. That project works for me.


Note that I put templates in:

source/_templates

And I configured AsciiDoc as follows:

set :asciidoc, {
  safe: :safe,
  template_dir: 'source/_templates',
  attributes: %W(showtitle env=middleman env-middleman middleman-version=#{Middleman::VERSION})
}
set :asciidoc_attributes, %w(icons=font source-highlighter=coderay coderay-css=style)

-Dan

On Tue, Mar 29, 2016 at 2:54 PM, thoraxe [via Asciidoctor :: Discussion] <[hidden email]> wrote:
No change. None of the following work:

set :asciidoc, {
  safe: :safe,
  template_dir: 'templates',
  attributes: %W(showtitle env=middleman env-middleman middleman-version=#{Middleman::VERSION})
}

set :asciidoc, {
  safe: :safe,
  templates_dir: 'templates',
  attributes: %W(showtitle env=middleman env-middleman middleman-version=#{Middleman::VERSION})
}

Nor does the old syntax:

set :asciidoc_attributes, %w(source-highlighter=coderay coderay-css=style template_dir=templates)

:(


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Custom-style-on-title-heading-element-tp4543p4560.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen