0
Welcome Guest! Login
0 items Join Now

Grav?

    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 320
    • Thanks: 13
    • Another Old Hack!

    Grav?

    Posted 6 years 4 months ago
    • I created websites from scratch for several years before jumping on the Mambo / Joomla bandwagon back in 2005. However, as most of my client websites are fairly simple, I'm wanting to do this next client using a system that will give me faster page load times and performance as well as not being so darn big!

      So I installed one of the Grav skeleton templates, One-Page Site, in a development folder to get my feet wet and, to be honest, this looks like a steep learning curve. For the life of me, I can't figure out how to add a class to an element.

      Example - showcase.md:


      ---
      title: Homepage Showcase
      menu: Top
      buttons:
          - text: Read the Documentation
            url: http://learn.getgrav.org
            primary: true
      ---
      
      # Mary Shelley
      ## and **Frankenstein**

      I would like to assign a class 'letter-spacing-125' to the '**Frankenstein**' text. But I can't find anything in the documentation on how to do that.

      Here is the resulting code:


      <div class="modular-row showcase flush-top" style="background-image: url(/grav/images/e/f/9/c/6/ef9c6430096dc885c2dca095db71bdcaef83ae4f-showcase.jpeg);">
      <h1>Mary Shelley</h1>
      <h2>
      and
      <strong>Frankenstein</strong>
      ...
      </h2>
      <a class="button primary" href="http://learn.getgrav.org">Read the Documentation</a>
      </div>

      How would I code the Markdown page, showcase.md, so the <strong> tag would be <strong class="letter-spacing-125">?
    • Just another old hacker!
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2676
    • Web Developer
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 320
    • Thanks: 13
    • Another Old Hack!

    Re: Grav?

    Posted 6 years 4 months ago
    • Damir,

      Thanks for the link but it doesn't work, at least not using the code they had on the page.
          ---
          title: Homepage Showcase
          menu: Top
          buttons:
              - text: Read the Documentation
                url: http://learn.getgrav.org
                primary: true
          ---
           
          # Mary Shelley
          ## and **Frankenstein**    {.letter-spacing-125}

      When I entered that class, as they showed, it displays it on the page as raw text.
      Mary Shelley
      and Frankenstein  {.letter-spacing-125}

      I noticed that they put a '##' on both sides so I tried that.
          ---
          title: Homepage Showcase
          menu: Top
          buttons:
              - text: Read the Documentation
                url: http://learn.getgrav.org
                primary: true
          ---
           
          # Mary Shelley
          ## and **Frankenstein** ##   {.letter-spacing-125}

      When I entered that class with the additional '##', it displays it on the page as raw text.
      Mary Shelley
      and Frankenstein ## {.letter-spacing-125}

      The description on how to do this is listed as follows:

      To add a class name, which can be used as a hook for a style sheet, use a dot like this:

      ## The Site ## {.main}

      Am I missing something?
    • Last Edit: 6 years 4 months ago by Luke Douglas.
    • Just another old hacker!
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2676
    • Web Developer
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 320
    • Thanks: 13
    • Another Old Hack!

    Re: Grav?

    Posted 6 years 4 months ago
    • Damir,

      Well, that was good to know. :) I took out the closing '##' and it still worked fine! Now that I have the class assigned. I need to add that class. So I created a custom.scss file and put in the 'user/themes/antimatter/scss' folder. However, that is not being picked up so I'm assuming this is not like Gantry5 where it is compiled into a single SCSS output. How can I make custom CSS changes which will NOT be overwritten for any 'potential' updates?
    • Just another old hacker!
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2676
    • Web Developer

Time to create page: 0.104 seconds