How to customize/style/theme the output of a custom content type in Drupal 8?

Question

I am creating an own Drupal 8 "classy" sub-theme. Now I created a content type called "s-box" with some textfields. I also created a view called "scol" that is a list of "s-box". This "scol" is added as a block to the site's sidebar.

That works out well (that means everything is displayed) but I want some of the content types fields to be nested in specific markup (like the headline in h4). Preferably, I want to customize the whole output for this content type "s-box".

But I can't figure out, what the name of the twig ought to be. So far I tried:

node--s-box.html.twig (what I thought would be the correct name)  
block--scol.html.twig  
field--node--s-box.html.twig  
field--s-box.html.twig  
node--scol.html.twig  
scol--s-box.html.twig

Perfect solution would be a template, where I can build my own html and assign the content type's fields.

Answer 1

Simply enable Twig Debugging . See Debugging Twig templates . After you've enabled Twig Debugging you'll get template naming suggestion printed as HTML comments directly into your markup. There you'll see how this template is supposed to be named exactly.

---

Your sites/development.services.yml is supposed to look like following:

# Local development services.
#
# To activate this feature, follow the instructions at the top of the
# 'example.settings.local.php' file, which sits next to this file.
parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
      debug: true
      auto_reload: true
      cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

And you need to add the following line to your settings.php or settings.local.php :

/**
 * Enable local development services.
 */
$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';

Which will in the end give you something like that:

<!-- FILE NAME SUGGESTIONS:
   * node--page--j1.html.twig
   * node--1--full.html.twig
   * node--1.html.twig
   * node--page--full.html.twig
   * node--page.html.twig
   * node--full.html.twig
   x node.html.twig
-->

---

And don't forget to clear the caches! Multiple times.

Answer 2

Solution is:

Since my content type is in a view, I can access all fields in views-view-fields--[my-view].html.twig (in my case: views-view-fields--scol.html.twig )

Key is the fields array. I can access all fields by their machine name. Like fields.title.content or fields.field_foo.content .

Thus I can style the whole output of a s-box here.