I need help with the Gateway theme frontpage

Hi,

I am complete newbie with GRAV. I decided to use the Gateway template for my site.

I am not finding:

  • how to change the text that appears in the frontpage
  • how to make the red button “Explore more” to work.

Is there a guide to this theme?

Regards,

Camps

@icamps, Welcome to the forum.

I have no experience with theme Gateway but I’m curious by nature… So I had a look at the skeleton of Gateway.

Some background info:

In Grav, all you see in a page is created using templates. The name of the file containing the page (home: ‘/user/pages/01.home/modular.md’) tells you which template it uses (modular: ‘/user/themes/gateway/templates/modular.html.twig’. And ‘modular/html.twig’ in turn includes other templates (partials) to create sub parts of the page.

If a templates needs info like titles, descriptions, etc. it mostly pulls this info from the header (frontmatter) of the page, or from config files (e.g. ‘/user/config/site.yaml’)

Answers to your questions:

  • ‘the text’
    In Gateway, the text in the header is created by template ‘/user/themes/gateway/templates/partials/header.html.twig’. There you will find that the title is created by printing the variable {{ site.header.title }}. That value comes from config file ‘/user/config/site.yaml’ in which you will find the following snippet:
    header:
      title: The City & the Wild
      description: Gateway has elegant style perfectly suited for a variety of users; writers, businesses or personal sites. Design is everywhere... even under the hood with rock solid development.
      background: background.jpg
      buttons:
        - text: Explore More
          url: "#"
          class: button radius
    
    Here you can change the title and description.
  • The ‘red button’
    All button ‘Explore More’ does is jumping to some place in the page or even another page. This can also be changed using the snippet shown above. By default it jumps to the page itself.
    To make the ‘button work’, you could replace the url with `#masthead’. This will jump the page straight below the menu.

Hope this helps!

2 Likes

Thank you very much!