By K1kk0z90 on

Hello,
I'm a Drupal novice user, and I'm trying to understand how to achieve certain tasks "the Drupal way". :)
I need to specify CSS rules for displaying a particular Field. Is it possible, maybe using a 3rd party module, to specify additional CSS rules specific for displaying a particular Field? Currently I added the said rules in the CSS file of the Theme, but I see many problems doing this:

  1. The theme that I am using is one of the core themes: after updating Drupal core I have to re-apply modifications.
  2. If I want to switch to another theme, I have to modify this as well.
  3. If I need to update a theme to a new version, I have to re-apply modifications.

Is there a non-hacky way to tell Drupal: when displaying this Field in Teaser, add these CSS rules; when displaying the same Field in Full Content, add these other CSS rules.

Thank you in advance for your precious help! :)

⋅ Categories: Drupal 8.x

Comments

QuietSpecialist’s picture

QuietSpecialist commented

The problem you have is that you're trying to amend a core theme which is meant to work out-of-the-box without editing the theme files.

Because you're new to Drupal, I'd recommend two options:

  1. If you're happy with the core theme, use the CSS Injector module (https://www.drupal.org/project/css_injector) to add your various CSS tweaks but use with caution… doing this too much and too often will leave you with CSS that is unmanageable.
  2. A more robust (albeit more difficult) option would be to create your own custom theme (https://www.drupal.org/documentation/theme)… I would recommend this option. You're already talking about CSS amends so you clearly have some coding experience. Learning to create your own themes will give you a greater understanding of how Drupal works under the hood and it gives you far more control over the final HTML output.

Good luck!

https://digitaldots.co.uk – Front-end development, User Experience (UX), Design and Drupal specialists based in Leeds, United Kingdom

K1kk0z90’s picture

K1kk0z90 commented

Thank you very much for your answer! :)

So, if I understand correctly, if I need certain fields to be displayed in a particular way, then the best way to do it is making an ad-hoc theme (or modifying another one) tied specifically for that particular website. Doesn't this break the separation between data and presentation? I mean, I create a theme that deals with specific fields with specific machine names; on another website, if I want to apply the same CSS rules to some other (similar) fields (whose names are different from the other website), I have to edit the theme again for those specific fields.

For example, let's say I want the field called field_appstore_link, of type URL, to be displayed as an image (e.g. the iTunes Store badge image) that links to the URL of the said field. Maybe for this kind of thing I had better implementing a custom module (in a way that it could be configured to work on arbitrary fields, displaying arbitrary images)? Or do you think I should go for the theme creation/customization?

Sorry if these are dumb questions, but as a Drupal novice user I'm still trying to understand the most appropriate way to achieve specific tasks. :)
Thank you again for your help, I really appreciate it! :)

Jeff Burnz’s picture

Jeff Burnz commented

I create a theme that deals with specific fields with specific machine names; on another website, if I want to apply the same CSS rules to some other (similar) fields (whose names are different from the other website), I have to edit the theme again for those specific fields

You've got to apply styles somehow, the two main ways are write new CSS declarations (or add selectors to an existing declaration) or re-using a class by adding it to the HTML (a lot of CSS frameworks, e.g. Zurb, Bootstrap etc) work like this.

The vast majority of professional websites have a customised theme built very specifically for just that site - this way you cut down on cruft and get to hone the theme for an exact purpose, rather than trying to be a generalist.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
QuietSpecialist’s picture

QuietSpecialist commented

Jeff's right :)

Building modules and/or using Features (https://www.drupal.org/project/features) can help with shipping CSS, JS etc. but you're better off theming per site… especially given how new you are to Drupal.

https://digitaldots.co.uk – Front-end development, User Experience (UX), Design and Drupal specialists based in Leeds, United Kingdom

K1kk0z90’s picture

K1kk0z90 commented

Thank you both for your answers! :)
I'll go for the custom theme route then. Maybe I'll try to isolate all field-specific rules into a single CSS file so that, probably, I'll be able to switch to another theme with less trouble.
Thanks again for your help, now I know in which direction should I move. :)