Skip to content
Grav 2.0 is officially stable. Read the announcement →
Themes & Styling

Comments form design

Solved by jan View solution

Started by jan 7 years ago · 2 replies · 506 views
7 years ago

I got the comments plugin working good in the Vela theme.
Now it would be very nice to adjust the form design. The language part I solved by creating a localization for my danish language inside the language file in the plugin.
But letter sizes and distance between lines and maybe other css-possibilities I simply cant trace.
Anyone who would point me to where these visual settings can be adjusted?🙂
Thanks!!

7 years ago

@hotel, You have a few options to add your own styling to a theme.

But first some explanation. Have a look at template '/user/themes/vela/templates/partials/base.html.twig'. It contains a section where css files are included:

TWIG
{% block stylesheets %}
    {% do assets.addCss('theme://css-compiled/main.min.css', 99) %}
    {% if not config.plugins['markdown-notices'].built_in_css %}{% do assets.addCss('theme://css-compiled/markdown-notices.min.css', 98) %}{% endif %} 
    {% do assets.addCss('theme://css-compiled/custom.css', 97) %}
{% endblock %} 
{{ assets.css() }} 

The method 'assets.addCss()' adds a css file to the Asset Manager. The numbers 99, 98, 97 are the order in which the css files must be written to HTML (lower means later). The method 'assets.css()' injects the assets into the HTML output.

As you can see, there is a css file called 'theme://css-compiled/custom.css' added to the Asset Manager. You have two options to add your own css:

  1. Easiest: Create file '/user/themes/mytheme/compiled-css/custom.css' and add your own styling to that file.
  2. or a bit more complex:
    • copy '/user/themes/vela/templates/partials/base.html.twig` to '/user/themes/mytheme/templates/partials/base.html.twig'
    • create file '/user/themes/mytheme/css/style.css'
    • rename the reference to custom.css like:
      TWIG
      {% do assets.addCss('theme://css/style.css', 97) %}
      

Why the second option? To me it's a matter of habit. I just happen to have my own styling structures using scss and prefer to use the same structure everywhere.

Hope this helps...

👍 1
7 years ago Solution

Thank you. I just need to dig into, then, which parameters in the css corresponds to forms/comments.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 242 2 months ago
Themes & Styling · by Ian, 2 months ago
3 123 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 488 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 75 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 156 3 months ago