0

In my Drupal project, we load custom CSS for some of our specific pages. Right now I do all of these modifications programmatically.

But what our manager wants is to create it manually in the admin panel. Uploading the CSS file in the new content type I'll create.

I'm a bit worried because I add these custom CSS we had in the libraries.yml like this:

enter image description here

Is there anyway they can edit this yml file in the admin panel? Or is there any better ideas I can do when adding custom CSS?

EDIT: I need to setup an advanced rule. In our project, each of our articles contain categories. And we apply different CSS files in some special categories. So basically what I'm doing is I query the categories of the article and inject the custom CSS. I attach the CSS like this in the page_attachment.inc:

enter image description here

  • I think you need to take a step back somehow to watch the problem from a broader angle. You should avoid to edit any libraries.yml file live on the server. And maybe clarify with your managers how exactly they expect this to be working. Upload a CSS file? Write CSS? Who is going to write the CSS? Can they write CSS? Do they want to refactor the old tumblr? – leymannx Mar 18 '20 at 13:14
  • @leymannx They'll upload the CSS file they created in the new content type I'll create. They have access with the ftp server so they can write it there. My only problem is that, how can I attach the CSS they uploaded in the drupal site. Because for now, I only know that I can attach the custom css by editing the libraries.yml to setup the library name and the CSS's path so that I can attach it logically in the page_attachment.inc . – JakeNoRome Mar 18 '20 at 13:26
1

To directly answer your question, yes, you can edit config with the devel module. Install it, then configure it to display the Config Editor.

To answer your question pragmatically, I need to point out that making direct edits to configuration on a regular basis is a recipe for disaster. I think you would be better served using the Asset Injector module, which will allow you to add CSS and JS on the fly, without tinkering with configuration files.

If it is an absolute necessity to modify the library definition, then I think that hook_library_info_alter() is what you need. However, as leymannx points out, libraries aren't intended to be constantly manipulated on the fly. This brings me back to using the Asset Injector. The CSS injector portion is pretty much perfectly suited to your use case; it allows for adding and editing CSS through the admin interface. The CSS injector allows for multiple rules, and these can each be targeted based on path and/or theme.

If you combine this with custom classes attached to the page, then you can use those classes in your CSS rules. You can implement hook_preprocess_page() to do this:

myproject_preprocess_page(&$variables) {
  $node = $variables['node'];
  if ($node) {
    // Assume that the Taxonomy Vocabulary machine name is "category".
    /** @var \Drupal\taxonomy\Entity\Term[] $terms */
    $terms = \Drupal::entityTypeManager()
      ->getStorage("taxonomy_term")
      ->loadByProperties(["vid" => "category"]);
    // Get all categories present on the current node.
    $categories = $node->get('field_category')->getValue();
    // Get just the TIDs as a simplified array.
    $categories = array_column($categories, 'target_id');
    // Ensure that there is a class array.
    $variables['attributes']['class'] = $variables['attributes']['class'] ?? [];
    foreach($categories as $category) {
      // Craft a HTML-compliant class name based on the label.
      $variables['attributes']['class'][] = \Drupal\Component\Utility\Html::cleanCssIdentifier($terms[$category]->label());
    }
  }
}
0

I assume, you can use next modules for your manager (without editing yml files, so no skills required for editing this important one file):

CSS Editor This module allows site builders to customize a theme's CSS through the browser, using a rich text editor with syntax highlighting and live preview.

Asset injector This module is definitely not a replacement for full-fledged theming, but it provides site administrators with a quick and easy way of tweaking things without diving into full-fledged theme hacking.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.