Antimatter: Links in modular elements

Archive
1

Hello, I’ve recently started using Grav. I haven’t built webpages for ages, it’s just a hobby I’m getting into again at the moment.

Now to my problem: I’ve built a modular home page with the antimatter theme. If you look at the demo the second part (Highlights) has 4 elements with icons. I’m sure I saw those in another theme (can’t remember which one) and they had links in them. In antimatter this doesn’t work. Any chance to edit the theme to integrate links? I want to integrate internal links to other parts of the website.

2

First you have to choose if you are going to copy Antimatter as a new theme and edit it, or if your going to extend Antimatter and use it as a parent theme. This is explained in the Theme docs, so I suggest reading over that.

Next, the logic for the modular pages is a combination of the page frontmatter (headers) and the Twig that provides the output logic.

You first would add a link in the modular headers:

title: Homepage Features
class: small
features:
    - header: Markdown Syntax
      icon: text-height
      link: /some/link-a
    - header: Twig Templating
      icon: code
      link: /some/link-b
    - header: Smart Caching
      icon: rocket
      link: /some/link-c
...

Then you would modify the templates/modular/features.html.twig in the theme folder to add a hyperlink (feature.link) around the feature.header text:

<div class="modular-row features {{ page.header.class}}">
    {{ content }}
    <div class="feature-items">
    {% for feature in page.header.features %}
           <div class="feature">
            {% if feature.icon %}
            <i class="fa fa-fw fa-{{ feature.icon }}"></i>
            <div class="feature-content icon-offset">
            {% else %}
            <div class="feature-content">
            {% endif %}
            {% if feature.header %}
            <h4><a href="{{ feature.link }}">{{ feature.header }}</a></h4>
            {% endif %}
            {% if feature.text %}
            <p>{{ feature.text }}</p>
            {% endif %}
            </div>
        </div>
    {% endfor %}
    </div>
</div>

If you want to be able to add a link via the admin, you will need to modify the blueprints/modular/features.yaml file and add a text field for this new link element.

3

Thanks a lot, that worked!

Now another small problem: I noticed this on somebody’s website yesterday as well and now it haunts me. The features have a padding problem – but only 2 of them.

Padding1

First screenshot: This is the last feature section where I just integrated the links. As you can see, the last 2 elements are not aligned anymore. This also happens when the browser is wider, but only with a specific width-range. Other widths are fine.

Padding2

Second screenshot: Here the alignment problem only happens when the browser is smallest, so it’s not really an issue.

I’d still like to fix it because I know the problem :slight_smile: Any suggestions? I was wondering if the icons are the problem in the first feature.

4

I just noticed that the alignment problem is present in the oneapge-skeleton. This happens in the Safari browser by the way. Padding-demo

5

That’s not padding its a left float and the 3rd item getting caught on the slightly longer 1st item. Really the best way to handle this is to use flexbox CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

6

Thanks a lot, that worked. In case anyone has the same problem, here is how I fixed it:

go to user/themes/antimatter/css-compiledand open template.css
find .modular .features .feature-items
add this:
display: flex;
flex-wrap: wrap;

That’s it.

Thanks again for the help.