Drupal - edit themes

[last updated: 2024-01-15]
Drupal home page
Drupal Themes
CSS in Drupal
-----

this page needs to be completely reorganized...

-------------------------------------------------------------------------------

• General:
  • A theme defines the "look and feel" of your website. This includes such things as colors and positions.
    Editing a theme therefore means changing colors and positions of elements on your site.
    The elements that you'll be changing are broadly classified as either regions or blocks.
  • The content of your site is placed in blocks, and the blocks are placed into regions.
    So you start with regions. You must have at least one region defined in order to display any content.
    Whatever theme you choose with have some number of regions pre-defined.
  • The look and feel of your site, the color and position properties of your regions and blocks, is defined in CSS.
    So in general, editing a theme means editing the CSS rules that control how the browser displays your site's content.

  ---------------------------------------------

• View your regions:
  ---------------------------------------------

• Define Regions - edit the .info file:
  • If .info has no "regions" section,
    and if its parent likewise has none,
    then this theme will inherit the set of regions from core default somewhere.
  • However, editing the .info file by adding a "regions" section with your set of desired regions
    will overwrite the default regions.
  • Add these lines (with a list of your desired regions):
    # Regions
    regions:
        header: Header
        content: Content
        footer: Footer
  • (best guess) Region names must be from accepted list: https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21...

  ---------------------------------------------

• Define a new region:
  ie. something different than the set of original default regions
  these notes from youtube zeBb ...
  • first add your new region name to .info file in regions: section as above.
  • next find your page.html.twig file
    it will be in .../themes/templates/layout
    open the file for edit
  • remove the two lines:
    ... page.primary_menu ...
    ... page.secondary_menu ...
  • insert in their place:
    {% if page.[newRegionName] %}
        <div id="[newRegionName]" class="content">
            {{ page.[newRegionName] }}
        </div>
    {% endif %}
  • put something into the new region
    clear cache, refresh page...

  ---------------------------------------------

• Links and notes for editing Regions:
  • see CSS section below...
  • (AFAIK) an empty region will not display, even if you've defined a background color for it.
    You must put a block into it, even if an "empty" block.

  • https://www.youtube.com/watch?v=ZebBJKIdods
  • https://www.drupal.org/node/2469113 ... adding regions
  • theme regions: https://www.drupal.org/docs/user_guide/en/block-regions.html
  • https://www.drupal.org/docs/develop/theming-drupal/adding-regions-to-a-t...
  • adding regions to a theme: https://www.drupal.org/docs/theming-drupal/adding-regions-to-a-theme
  • placing blocks in regions: https://www.drupal.org/docs/user_guide/en/block-place.html
  • borders & padding to grid regions: https://www.drupal.org/project/omega/issues/1359824
  • Drupalize: add regions: https://drupalize.me/tutorial/add-regions-theme
    • "Adding regions to a theme is a two-step process that involves editing your theme's THEMENAME.info.yml file and updating your page.html.twig file."
    • looked promising, but requires registering ...

  • Notes: move region positions:
    1) In your theme folder there is a file named "page.tpl.php". This file contains the overall layout for all pages (unless overridden by a more specific .tpl file). Within this, you can move where the "print $sidebar" code is placed, to physically change its location to be below the main content.
    2) You will need to applying styling selectors and attributes to your "style.css" (or other theme css file) in order to change the way that region displays. You'll likely need to add some "float: left" properties to the sub-items to make them appear horizontally.

  ---------------------------------------------

• Customizing theme blocks:
  • https://www.drupal.org/docs/user_guide/en/block-concept.html
  • https://www.drupal.org/docs/user_guide/en/block-create-custom.html
  • https://www.drupal.org/docs/core-modules-and-themes/core-modules/block-m...
  • for D6 7 7, but maybe worth investigating: https://www.drupal.org/project/blocktheme
  • block selectors: https://www.drupal.org/docs/8/theming-drupal-8/classy-themes-css-selectors

  ---------------------------------------------------------

• Using CSS to style regions:
  • This worked for D-10:
    • create a [cssFileName].css file with styling you desire
      save it to web/themes/ [themeName] /css folder
      Note: you must: administration -> Configuration -> Development-Performance -> clear all caches
      before changes made to your .css file will be reflected in your site.
    • edit [themeName].info.yml
      find "libraries:" section
      add this line to the bottom of the list:
      <space><space>-<space>[themeName] /global-styling

      ---------------

    • edit [themeName].libraries.yml
      find: "global-styling:" section
      if it doesn't exist, add it (0-indent to left margin)
      add these lines below it:
      <space><space>css:
      <space><space><space><space>theme:
      <space><space><space><space>css/[cssFileName].css: {}

      ---------------

    • This file can be used to style most things on the site. (See CSS page for general rule syntax.)
      rule selectors for regions:
      .region-header { }
      .region-content { }
      etc.

      
      or, to select all regions globally:
      [class*="region-"] {...

      
      Note that for regions with an underscore in their names,
      you must replace the underscore with a hyphen in the selector:

      eg. for the region: sidebar_first,
      you must use:
      .region-sidebar-first { }

      -----------------------
      

    • struggling so far unsuccessfully to apply css style to blocks on front page:
      Specifically working with the tstblk01 block placed in the header region...
      These things do NOT work...
      tstblk01 {...
      .tstblk01 {...
      #tstblk01 {...
      .region-tstblk01 {...
      .region-header-tstblk01 {...
      .region-header tstblk01 {...
      .region-header > tstblk01 {...
      [class*="block.tstblk01"] {...
      [class*="block-tstblk01"] {...
      jc0x.tstblk01 {...
      .block.tstblk01 {...
      .block.jc0x_tstblk01 {...
      .block.block.tstblk01 {...

  ---------------------------------------------

• Crash recovery:
  • It happened that, when using float right with content region, the whole site crashed and could not be recovered with the admin interface.
    I did manage to hack my way through recovering it with (while in dev-10 folder):
    $ ddev drush cache:clear

    not sure which selection/cache fixed it, tried most/all of them, but just flailing, not in a trackable way...

• another time, having attempted to rename a region with a " - " hyphen, everything crashed.
  recovered by entering in browser: [yourSiteName].update.php
  forum suggested if that didn't work, try rebuild.php

---------------------------------------------