How to change formating of links in macro <<actions...>>

Authoring Twine
1

Why do links have a dot before it when I create macro <<actions…>. like it is one of the list. How to change it to normal view?
Please, help me. It makes me crazy.

Screenshot_1
Screenshot_1762×659 24.1 KB

2

The <<actions>> macro automatically wraps the links it creates within a HTML <ul> (unordered list) element structure.

eg. the following <<actions>> macro call…

<<actions "Look at the pie" "Smell the pie" "Taste the pie">>

… generates the following HTML elements…

<ul class="actions">
  <li>
    <a data-passage="Look at the pie" class="link-broken macro-actions" tabindex="0">Look at the pie</a>
  </li>
  <li>
    <a data-passage="Smell the pie" class="link-broken macro-actions" tabindex="0">Smell the pie</a>
  </li>
  <li>
    <a data-passage="Taste the pie" class="link-broken macro-actions" tabindex="0">Taste the pie</a>
  </li>
</ul>

The dot displayed before each of the list’s items is caused by your web-browser’s default <ul> element CSS rule containing a list-style-type: disc; setting.

You can suppress that dot appearing within your passage content by adding a CSS rule like the following to your project’s Story Stylesheet area.

.passage ul {
    list-style-type: none;
}

I noticed in your second image that you’re adding Markup based links without Link Text to your Passage content…

[[->Target Passage Name]]

…if you are doing that so the Twine 2 application will display an arrow connection the current passage to the target passage within the Story Map when you’re using the <<actions>> macro to generate the actual link then that isn’t a good way to achieve that result.

A better way to achieve that result is to place the original unused link within a C-Style block comment like so.

<<actions "Look at the pie" "Smell the pie" "Taste the pie">>
/*
[[Look at the pie->Target Passage A]]
[[Smell the pie->Target Passage B]]
[[Taste the pie->Target Passage C]]
*/

This fools the Twine 2 application into creating any missing passages and to show connections arrows for those commented out markup links, because currently that application doesn’t understand what a comment is.

3

Thank you very much!!!

4

Greyelf has already covered things fairly well, so the only thing I have to add is that I’d leverage the class added to the unordered list to target its lists specifically, since they’re what you’re concerned about. For example:

.passage ul.actions {
	list-style-type: none;
}

In general, and if you can do so, it’s better to make your selectors specific enough to target only the elements that you actually intended to.