Load and Save custom.css from panel admin

1

Is it possible to load a .css file within a theme administration, in a field defined in an editor type blueprint, and be able to write the modifications in the file? I have some tests to insert the code inline, with:

public function onAssetsInitialized()
{
$themeConfig = $this->config->get('themes.mytheme');
$this->grav['assets']->addInlineCss($themeConfig['css_inline']);
}

But I can’t do it by modifying the custom.css file.
Any help?

2

Hi, @pmoreno, can you clarify the scenario?

3

Of course. I would like the content of the assets/css/custom.css file to be displayed in an editor-type field (codemirror by default), and to be able to save the modifications from the admin panel itself.
When clicking on save theme modifications, all the fields defined in blueprints.yaml would be saved in the theme’s .yaml file, except for this field, which would save the changes directly to the custom.css file.
I suppose it can be done, but I don’t know how to do it.

4

I use a simpler approach. Hopefully it will work for you and benefit the community. Similarly, you can include JavaScript code.

1. theme `blueprints.yaml` 
inline_css:
   type: editor
   label: Add your custom CSS
   codemirror:
       mode: 'css'
       indentUnit: 2
       autofocus: true
       indentWithTabs: true
       lineNumbers: true
       styleActiveLine: true
2. `base.html.twig` 
{# Inline CSS #}
{%- if theme_var('inline_css') is not empty -%}
    {%- set inline_css -%}
        {%- include 'partials/inline.css.twig' -%}
    {%- endset -%}
    {%- do assets.addInlineCss(inline_css) -%}
{%- endif -%}
3. and `partials/inline.css.twig` 
{% set css = theme_var('inline_css')|e %}
{% if css is defined and css is not empty %}
  {{ css|e }}
{% endif %}

If you need more control over CSS, :thinking: worth checking the editor plugin code and other available resources.

5

Hi @b.da

It’s true that your approach is simpler, but this way you save the css styles in a .yaml file, and then insert them as inline (with addInlineCss), but that’s not what I’m looking for.
The Editorial theme, for example, already has code in the main theme file like this:

public function onTwigSiteVariables()
{
if ($this->isAdmin() && ($this->grav['config']->get('plugins.shortcode-core.enabled'))) {
}

$themeConfig = $this->config->get('themes.editorial');

if (isset($themeConfig['custom_css']) && $themeConfig['custom_css'] && file_exists(__DIR__ . '/assets/css/custom.css')) { $this->grav['assets']->addCss('theme://assets/css/custom.css', ['priority' => 5]);
 }
}

which loads the custom.css file from the theme path /assets/css/custom.css.
I don’t want to load the inline styles, that would be fine for use with a few styles.

The idea of ​​the ‘Editor’ plugin is what I’m looking for, but the approach of this plugin is very broad, including Twig, CSS, JS, etc, and all folders of the site, not just the theme. I will have to investigate this plugin to extract the code needed to load only the custom.css file in the theme and be able to modify it and save it from the theme itself (not in a .yaml file).

Thanks for your help.