Issue #3055055 by hash6, scott_euser, jhodgdon, amarphule, anmolgoyal74,...

Issue #3055055 by hash6, scott_euser, jhodgdon, amarphule, anmolgoyal74, Gayathri J, jenniferaube, alonaoneill, diqidoq, kishor_kolekar, abhisekmazumdar: Convert appearance-related modules: breakpoint, color, layout_builder, layout_discovery module hook_help() to topic(s)

core/modules/help_topics/help_topics/breakpoint.overview.html.twig

+---
+label: 'Managing height, width, and resolution breakpoints'
+related:
+  - core.appearance
+---
+<h2>{% trans %}What are breakpoints?{% endtrans %}</h2>
+<p>{% trans %}Breakpoints are the point at which your site's content will respond to provide the user with the best possible layout to consume the information. A breakpoint separates the height or width of viewports (screens, printers, and other media output types) into steps. For instance, a width breakpoint of 40em creates two steps: one for widths up to 40em and one for widths above 40em. Breakpoints can be used to define when layouts should shift from one form to another, when images should be resized, and other changes that need to respond to changes in viewport height or width.{% endtrans %}</p>
+<h2>{% trans %}What are media queries?{% endtrans %}</h2>
+<p>{% trans %}Media  queries are a formal way to encode breakpoints. For instance, a width breakpoint at 40em would be written as the media query "(min-width: 40em)". Breakpoints are really just media queries with some additional meta-data, such as a name and multiplier information.{% endtrans %}</p>
+<h2>{% trans %}What are resolution multipliers?{% endtrans %}</h2>
+<p>{% trans %}Resolution multipliers are a measure of the viewport's device resolution, defined to be the ratio between the physical pixel size of the active device and the <a href="http://en.wikipedia.org/wiki/Device_independent_pixel">device-independent pixel</a> size. The Breakpoint module defines multipliers of 1, 1.5, and 2; when defining breakpoints, modules and themes can define which multipliers apply to each breakpoint.{% endtrans %}</p>
+<h2>{% trans %}What is a breakpoint group?{% endtrans %}</h2>
+<p>{% trans %}Breakpoints can be organized into groups. Modules and themes should use groups to separate out breakpoints that are meant to be used for different purposes, such as breakpoints for layouts or breakpoints for image sizing.{% endtrans %}</p>
+<h2>{% trans %}Managing breakpoints and breakpoint groups overview{% endtrans %}</h2>
+<p>{% trans %}The <em>Breakpoint</em> module allows you to define breakpoints and breakpoint groups in YAML files. Modules and themes can use the API provided by the <em>Breakpoint</em> module to define breakpoints and breakpoint groups, and to assign resolution multipliers to breakpoints.{% endtrans %}
+</p>
+<h2>{% trans %}Additional resources{% endtrans %}</h2>
+<ul>
+  <li><a href="https://www.drupal.org/documentation/modules/breakpoint">{% trans %}Working with breakpoints in Drupal 8{% endtrans %}</a></li>
+  <li><a href="http://www.w3.org/TR/css3-mediaqueries/">{% trans %}W3C standards for media queries{% endtrans %}</a></li>
+</ul>

core/modules/help_topics/help_topics/color.changing.html.twig

+---
+label: 'Changing the color palette of a theme'
+related:
+  - core.appearance
+---
+{% set appearance = render_var(url('system.themes_page')) %}
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Change the colors for links, backgrounds, and text in a theme that supports the Color module. Color-specific stylesheets will be generated and saved; you will need to follow these steps again to regenerate the stylesheets if you make any changes to the base stylesheets of your theme.{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}In the Manage administrative menu, navigate to <a href="{{ appearance }}">Appearance</a>.{% endtrans %}</li>
+  <li>{% trans %}Click the <em>Settings</em> link for the theme you want to change the colors of.{% endtrans %}</li>
+  <li>{% trans %}In the <em>Color scheme</em> section, choose new colors for the backgrounds, text, and links that your theme defines colors for. However, if you do not see color settings, then your theme does not support the Color module.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Save configuration</em>. Color-specific stylesheets will be generated and saved in the file system.{% endtrans %}</li>
+</ol>
+
+<h2>{% trans %}Additional resources{% endtrans %}</h2>
+<ul>
+  <li><a href="https://www.drupal.org/docs/8/core/modules/color/overview">{% trans %}Color module overview{% endtrans %}</a></li>
+</ul>

core/modules/help_topics/help_topics/core.appearance.html.twig

+---
+label: 'Changing the appearance of your site'
+top_level: true
+related:
+  - core.content_structure
+---
+{% set entities = render_var(url('help.help_topic', {'id': 'core.content_structure'})) %}
+<h2>{% trans %}What is a theme?{% endtrans %}</h2>
+<p>{% trans %}A <em>theme</em> is a set of files that define the visual look and feel of your site. The core software and modules that run on your site determine which content (including HTML text and other data stored in the database, uploaded images, and any other asset files) is displayed on the pages of your site. The theme determines the HTML markup and CSS styling that wraps the content. Several basic themes are supplied with the core software; additional <em>contributed themes</em> can be downloaded separately from the <a href="https://www.drupal.org/project/project_theme">Download &amp; Extend page on drupal.org</a>, or you can create your own theme.{% endtrans %}</p>
+<h2>{% trans %}What is a base theme?{% endtrans %}</h2>
+<p>{% trans %}A base theme is a theme that is not meant to be used directly on a site, but instead acts as a scaffolding for building other themes. The core Classy theme is one example; other base themes can be downloaded from the <a href="https://www.drupal.org/project/project_theme">Download &amp; Extend page on drupal.org</a>.{% endtrans %}</p>
+<h2>{% trans %}What is a layout?{% endtrans %}</h2>
+<p>{% trans %}A <em>layout</em> is a template that defines where blocks and other pieces of content should be displayed. The core Layout Discovery module allows modules and themes to register layouts, and the core Layout Builder module provides a visual interface for placing fields and blocks in layouts for entity sub-types and individual entity items (see <a href="{{ entities }}">Managing content structure</a> for more on entities and fields).{% endtrans %}</p>
+<h2>{% trans %}Changing site appearance overview{% endtrans %}</h2>
+<p>{% trans %}The main way to change the overall appearance of your site is to switch the default theme. You can also change the color palette of some themes, if the core Color module is installed and the theme supports it; some themes also have other settings. The core Layout Builder and Layout Discovery modules allow you to define layouts for your site's content, and the core Breakpoint module helps themes change appearance for different-sized devices. See the related topics listed below for specific tasks.{% endtrans %}</p>
+<h2>{% trans %}Additional resources{% endtrans %}</h2>
+<ul>
+  <li><a href="https://www.drupal.org/docs/user_guide/en/extend-chapter.html">{% trans %}Extending and Customizing Your Site chapter in the User Guide{% endtrans %}</a></li>
+  <li><a href="https://www.drupal.org/docs/8/theming">{% trans %}Theming Drupal 8{% endtrans %}</a></li>
+</ul>

core/modules/help_topics/help_topics/core.content_structure.html.twig

@@ -33,8 +33,9 @@ top_level: true
 <p>{% trans %}Besides the field modules listed in the previous section, there are additional core modules that you can use to manage your content structure:{% endtrans %}</p>
 <ul>
   <li>{% trans %}The core Node, Comment, Custom Block, Custom Menu Links, User, File, Image, Media, Taxonomy, Contact, and Aggregator modules all provide content entity types.{% endtrans %}</li>
-  <li>{% trans %}The core Field UI module provides a user interface for managing fields on entities.{% endtrans %}</li>
-  <li>{% trans %}The core Filter, Layout Builder, RDF, Responsive Image, and Path modules provide settings and display options for entities and fields.{% endtrans %}</li>
+  <li>{% trans %}The core Field UI module provides a user interface for managing fields and their display on entities.{% endtrans %}</li>
+  <li>{% trans %}The core Layout Builder module provides a more flexible user interface for configuring the display of entities.{% endtrans %}</li>
+  <li>{% trans %}The core Filter, RDF, Responsive Image, and Path modules provide settings and display options for entities and fields.{% endtrans %}</li>
 </ul>
 <p>{% trans %}Depending on the core and contributed modules that you currently have installed on your site, the related topics below, and other topics listed on the main <a href="{{ help_url }}">Help page</a>, will help you with tasks related to content structure.{% endtrans %}</p>
 <h2>{% trans %}Additional resources{% endtrans %}</h2>

core/modules/help_topics/help_topics/layout_builder.overview.html.twig

+---
+label: 'Changing the layout for an entity'
+related:
+  - core.appearance
+  - core.content_structure
+  - field_ui.manage_display
+  - block.overview
+---
+{% set content_types = render_var(url('entity.node_type.collection')) %}
+{% set entities = render_var(url('help.help_topic', {'id': 'core.content_structure'})) %}
+{% set blocks = render_var(url('help.help_topic', {'id': 'block.overview'})) %}
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Configure an entity sub-type to have its fields displayed using a layout (see <a href="{{ entities }}">Managing content structure</a> for more on entities and fields).{% endtrans %}</p>
+<h2>{% trans %}What are the parts of a layout?{% endtrans %}</h2>
+<p>{% trans %}A layout consists of one or more <em>sections</em>. Each section can have from one to four <em>columns</em>. You can place blocks, including special blocks for the fields on the entity sub-type, in each column of each section (see <a href="{{ blocks }}">Managing blocks</a> for more on blocks).{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}Navigate to the page for managing the entity type you want to add the field to. For example, to add a field to a content type, in the <em>Manage</em> administrative menu, navigate to <em>Structure</em> &gt; <a href="{{ content_types }}"><em>Content types</em></a>.{% endtrans %}</li>
+  <li>{% trans %}Find the particular sub-type that you want to create a layout for, and click <em>Manage display</em> in the <em>Operations</em> list.{% endtrans %}</li>
+  <li>{% trans %}Under <em>Layout options</em>, check <em>Use Layout Builder</em>. You can also check the box below to allow each entity item to have its layout individually customized (if it is left unchecked, the site will use the same layout for all items of this entity sub-type).{% endtrans %}</li>
+  <li>{% trans %}Click <em>Save</em>. You will be returned to the <em>Manage display</em> page, but you will no longer see the table of fields of the classic display manager.{% endtrans %}</li>
+  <li>{% trans %}Click <em>Manage layout</em> to enter layout management view. A default layout will be set up for you, with a single one-column section containing the fields on your entity sub-type.{% endtrans %}</li>
+  <li>{% trans %}To remove the default section and start from an empty layout, find and click the <em>Remove</em> button for the default section, which looks like an X. Confirm by clicking <em>Remove</em> in the pop-up dialog.{% endtrans %}</li>
+  <li>{% trans %}Add new sections, each with one to four columns, to your layout. For instance, you might want a one-column section at the top, a two-column section in the middle, and then a one-column section at the bottom. To add a section, click <em>Add section</em> and click the desired number of columns. For multi-column sections, set the column width percentages and click <em>Add section</em> in the pop-up dialog.{% endtrans %}</li>
+  <li>{% trans %}In each section, click <em>Add block</em> to add a block. You will see a list of the blocks available on your site, plus a section called <em>Content fields</em> with a block for each field on your content item. Each block can be configured, if desired, with a <em>Title</em>, and for content field blocks, you can also configure the field formatter. Continue to add blocks to your sections until all the desired blocks and fields are displayed.{% endtrans %}</li>
+  <li>{% trans %}Verify your layout. You can check <em>Show content preview</em> to show a preview of what your layout will look like, or uncheck it to see the names of the fields and blocks in each section.{% endtrans %}</li>
+  <li>{% trans %}If needed, reorder the blocks by dragging them to new locations. If you hover over a block, a contextual menu will appear that will let you change the configuration of the block, remove the block, or <em>Move</em> blocks within the section using a more compact interface.{% endtrans %}</li>
+  <li>{% trans %}When you are satisfied with your layout, click <em>Save layout</em>.{% endtrans %}</li>
+</ol>
+
+<h2>{% trans %}Additional resources{% endtrans %}</h2>
+<ul>
+  <li><a href="https://www.drupal.org/docs/8/core/modules/layout-builder/creating-layout-defaults">{% trans %}Creating layout defaults{% endtrans %}</a></li>
+  <li><a href="https://www.drupal.org/docs/8/core/modules/layout-builder/building-layouts-using-the-layout-builder-ui">{% trans %}Building Layouts Using the Layout Builder UI{% endtrans %}</a></li>
+</ul>

core/modules/help_topics/help_topics/system.theme_install.html.twig

+---
+label: 'Installing a theme and setting default themes'
+related:
+  - core.appearance
+  - system.theme_uninstall
+---
+{% set themes_url = render_var(url('system.themes_page')) %}
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Install a core theme, or a contributed theme that has already been downloaded. Choose the default themes to use for the site and for administrative pages.{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <a href="{{ themes_url }}"><em>Appearance</em></a>.{% endtrans %}</li>
+  <li>{% trans %}Locate the themes that you want to use as the site default theme and for administrative pages.{% endtrans %}</li>
+  <li>{% trans %}For each of these themes, if the theme is in the <em>Uninstalled themes</em> section, click the <em>Install</em> link to install the theme. Wait for the theme to be installed (translations might be downloaded). You should be returned to the <em>Appearance</em> page.{% endtrans %}</li>
+  <li>{% trans %}Locate the theme that you want to be your default theme, which should now be in the <em>Installed themes</em> section. If it is not already labeled as the <em>default theme</em>, click the <em>Set as default</em> link.{% endtrans %}</li>
+  <li>{% trans %}At the bottom of the page, select the <em>Administration theme</em> that you want to use on administrative pages. Click <em>Save configuration</em> if you selected a new theme.{% endtrans %}</li>
+  <li>{% trans %}If you changed the default theme for your site, visit the site home page or another page on the non-administration part of your site and verify that the site is using the new theme. If you changed the administration theme, verify that the new theme is used on administrative pages.{% endtrans %}</li>
+</ol>

core/modules/help_topics/help_topics/system.theme_uninstall.html.twig

+---
+label: 'Uninstalling an unused theme'
+related:
+  - core.appearance
+  - system.theme_install
+---
+{% set themes_url = render_var(url('system.themes_page')) %}
+<h2>{% trans %}Goal{% endtrans %}</h2>
+<p>{% trans %}Uninstall a theme that was previously installed, but is no longer being used on the site.{% endtrans %}</p>
+<h2>{% trans %}Steps{% endtrans %}</h2>
+<ol>
+  <li>{% trans %}In the <em>Manage</em> administrative menu, navigate to <a href="{{ themes_url }}"><em>Appearance</em></a>.{% endtrans %}</li>
+  <li>{% trans %}Locate the theme that you want to uninstall, in the <em>Installed themes</em> section.{% endtrans %}</li>
+  <li>{% trans %}Click the <em>Uninstall</em> link to install the theme. If there is not an <em>Uninstall</em> link, the theme cannot be uninstalled because it is either being used as the site default theme, being used as the <em>Administration theme</em>, or is the base theme for another installed theme.{% endtrans %}</li>
+</ol>