Remove list numbers in Learn2 Gitsync sidemenu

1

Hi there,

I love the learn2 Gitsync theme and I am tweaking it a bit with css. However, I cannot remove the numbers before every item listed in the sidebar in css. Is that correct?

Thanks for your help in advance.

2

Hi @Masterb123, glad to hear you are enjoying the theme!

This CSS should remove the #'s from the sidebar:

#sidebar ul.topics > li > a b
{
    visibility: hidden;
}

Let me know if that works for you.
ps - in the Learn with Git Sync skeleton package this code is actually commented out in the pre-configured mytheme (in the custom.css file).

1 Like
3

@paulhibbitts

Your custom.css modification to hide list numbers in the Learn2 Gitsync sidebar worked fine until I reached Item 10. The number is hidden but the indentation is for two digits, making it appear that Item 10 is a sub-topic of Item 9. The same goes for all subsequent items in the top level.

I noticed, however, that there’s no such indentation in the second-level item list, even when there are 10+ items.

https://attic.vardill.org

Is it possible to remove the indentation?

1 Like
4

Hi @aynsley, I think to do that you will need to modify the template Twig a bit.

If you are using my Learn2 with Git Sync skeleton an inherited theme is all setup called “mytheme” - copy the Twig template sidebar.html.twig from the folder /user/themes/learn2-git-sync/templates/partials/ to the folder /user/themes/mytheme/templates/partials/ and edit the file to be the following:

{% macro loop(page, parent_loop) %}
    {% if parent_loop|length > 0 %}
        {% set data_level = parent_loop %}
    {% else %}
        {% set data_level = 0 %}
    {% endif %}
    {% for p in page.children.visible %}
        {% set parent_page = p.activeChild ? ' parent' : '' %}
        {% set current_page = p.active ? ' active' : '' %}
        <li class="dd-item{{ parent_page }}{{ current_page }}" data-nav-id="{{ p.route }}">
            <a href="{{ p.url }}" {% if p.header.class %}class="{{ p.header.class }}"{% endif %}>
                <i class="fa fa-check read-icon"></i>
                <span><b>{% if data_level == 0 %} {% endif %}</b>{{ p.menu }}</span>
            </a>
            {% if p.children.count > 0 %}
            <ul>
                {{ _self.loop(p, parent_loop|default(0)+loop.index) }}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

{% macro version(p) %}
    {% set parent_page = p.activeChild ? ' parent' : '' %}
    {% set current_page = p.active ? ' active' : '' %}
    <h5 class="{{ parent_page }}{{ current_page }}">
        {% if p.activeChild or p.active %}
        <i class="fa fa-chevron-down fa-fw"></i>
        {% else %}
        <i class="fa fa-plus fa-fw"></i>
        {% endif %}
        <a href="{{ p.url }}">{{ p.menu }}</a>
    </h5>
{% endmacro %}

<div class="scrollbar-inner">
    <div class="highlightable">
        {% if theme_config.top_level_version %}
            {% for slug, ver in pages.children %}
                {{ _self.version(ver) }}
                <ul id="{{ slug }}" class="topics">
                {{ _self.loop(ver, '') }}
                </ul>
            {% endfor %}
        {% else %}
            <ul class="topics">
                {% if theme_config.root_page %}
                    {{ _self.loop(page.find(theme_config.root_page), '') }}
                {% else %}
            {{ _self.loop(pages, '') }}
                {% endif %}
            </ul>
        {% endif %}
        <hr />

        <a class="padding" href="#" data-clear-history-toggle><i
                    class="fa fa-fw fa-history"></i> {{ 'THEME_LEARN2_CLEAR_HISTORY'|t }}</a><br/>

        <section id="footer">
            {% if config.plugins.feed.enabled and pages.find('/feed') %}
              <a class="button" href="{{ base_url }}/feed.atom"><i class="fa fa-rss-square"></i> Atom 1.0</a>
              <a class="button" href="{{ base_url }}/feed.rss"><i class="fa fa-rss-square"></i> RSS</a><br><br>
            {% endif %}
            <p>{{ 'THEME_LEARN2_BUILT_WITH_GRAV'|t }}</p>
        </section>
    </div>
</div>

Please let me know if this works for you.
Paul

5

I already had a copy of sidebar.html.twig in mytheme, so it took only a few seconds to make the relevant change, and now all’s well. Your suggestion worked perfectly. Many, many thanks!

I’ve been so busy adding content to the site that I haven’t got around to reading the twig documentation. Without your help I would never have found the solution.

Thanks for the work you’ve put into not only the Learn2 Gitsync theme, but your Open Matter and Open Publishing themes. Great coding!

1 Like
6

Awesome to hear that the custom Learn2 Twig worked @aynsley, and thanks very much for the kind words!