Comments form design

Support Themes & Styling
1

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?:slight_smile:
Thanks!!

2

@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:

{% 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:
      {% 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 Like
3

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