Grav?
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
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
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
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: 8 years 7 months ago by Luke Douglas.
- Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 14
- Another Old Hack!
-
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
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Time to create page: 0.054 seconds