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

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.

Answer 2

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.