Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

remove trailing colon from admonition title-label #11

Open
nancym opened this issue Jan 24, 2019 · 3 comments

Comments

@nancym
Copy link

commented Jan 24, 2019

I'm learning AsciiDoc and Asciidoctor and I'm in the midst of styling my admonitions. I want to use text rather than an image or icon for each admonition title-label. asciidoctor-html5s automatically puts a colon after the admonition text, e.g.:

NOTE:
a little note

What is a good way to remove the colon (:) after NOTE (and CAUTION, IMPORTANT, TIP, WARNING) if I do not want to recompile this extension? I do not know Ruby and do not have my system set up for Ruby development. Possible solutions might involve:

  • doing something in my CSS to remove the trailing colon
  • editing some file or files on my system that asciidoctor-html5s will pick up when it is run (but I'd rather not have to maintain any such edit on all my devices)

It seems that the colon happens because of line 3 in asciidoctor-html5s/data/templates/admonition.html.slim:

- capture
  h6.block-title class=('label-only' unless title?)
    span.title-label ="#{local_attr :textlabel}: "
    =title
  = html_tag_if !blocks?, :p
    =content
- if admonition_aside?
  aside.admonition-block id=id class=[(attr :name), role] role=admonition_aria
    - yield_capture
- else
  section.admonition-block id=id class=[(attr :name), role] role=admonition_aria
    - yield_capture

Thank you for any tips or suggestions!

@jirutka

This comment has been minimized.

Copy link
Owner

commented Feb 3, 2019

I want to use text rather than an image or icon for each admonition title-label.

Then just hide the title-label using CSS. That’s how it’s supposed to be styled. The title-label is in the template only to provide an understandable output when you don’t have custom CSS.

For example I design admonition block like this:

.block-title .title-label {
  display: none;
}

.admonition-block {
  border-left: solid thick;
  margin: 1em 0 2em 0;
  padding: 0.5em 1em;
  padding-left: 5em;
  background-color: var(--light-bg-color);
  background-size: 3em 3em;
  background-repeat: no-repeat;
  background-position: 1em 50%;
  min-height: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clear: both;

  & > * {
    margin: 0.5em 0;
  }

  &.noclear {
    clear: none;
  }

  &.note {
    border-color: var(--main-color);
    background-image: url('./images/icons/note-large.svg');
  }
}
@nancym

This comment has been minimized.

Copy link
Author

commented Mar 3, 2019

Thanks for posting your admonition CSS @jirutka. I'm doing a lot experiments with my Asciidoc stylesheets and I wonder if you could include your entire asciidoctor-html5s CSS or SCSS files in a repository, maybe this repository? I (and probably others) could then use that as a starting point for my own asciidoctor-html5s.css file. Thank you!

@jirutka

This comment has been minimized.

Copy link
Owner

commented Mar 4, 2019

The problem is that I still don’t have a complete stylesheet, only some parts that I needed. :( In one project it’s very close to completeness, we have to just find some spare time to separate them and publish.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.