Skip to main content

Drupal 8 Themings

Why Create Subtheme in drupal 8 ,

If you directly change on main theme and update the new version then all the changes would be lost.

YAML file structure

1 - Tabs are NOT allowed. Use spaces ONLY.
2 - Properties and lists MUST be indented by two (2) spaces

let theme name is fullfillness

What are the files needed to create a theme

1 - .info.yml
2 - .libraries.yml
3 - .breakpoints.yml
4 - .theme


 - create fullfillness.info.yml 

 - if theme has space then, replace the underscore with space in file name and folder name
 - minimum required properties (name, type, and core)
 key value pair in the info.yml file

libraries (optional)

A list of libraries (which can contain both CSS and JavaScript assets) to add to all pages where the theme is active. Read more about themes and asset libraries.
libraries:
  - fluffiness/global-styling

libraries-override (optional)

A collection of libraries and assets to override. Read more at Overriding and extending libraries.
libraries-override:
  contextual/drupal.contextual-links:
    css:
      component:
        /core/themes/stable/css/contextual/contextual.module.css: false

libraries-extend (optional)

A collection of libraries and assets to add whenever a library is attached. Read more at Overriding and extending libraries.
libraries-extend:
  core/drupal.user:
    - classy/user1
    - classy/user2

hidden (optional)

Indicates whether or not to hide the theme from the "Appearance" page so that it cannot be enabled/disabled via the UI.
hidden: true

regions (optional)

A list of theme regions. (Note that region keys are not preceded by a dash.) A content region is required. Read more about adding regions to a theme.
regions:
  header: Header
  content: Content
  sidebar_first: 'First sidebar'

regions_hidden (optional)

A list of inherited regions to remove.
regions_hidden:
  - sidebar_last

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme : 


1 - By adding libraries , ( create the fluffiness.libraries.yml ) and add the css/js
cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

 Attaching a library via a Twig template : 

 {{ attach_library('fluffiness/cuddly-slider') }}

In Drupal 8 drupal_add_css(), drupal_add_js() and drupal_add_library() were removed in favor of #attached

Attaching a library to a subset of pages : 

Implement the preprocess function to attach the library
function fluffiness_preprocess_maintenance_page(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}

fullfillness.Breakpoint.yml : 

Breakpoints are really just media queries with some additional metadata, such as name and multiplier information.

label - A human readable label for the breakpoint.
mediaQuery - Media query text proper, e.g. 'all and (min-width: 851px)'.
weight - Positional weight (order) for the breakpoint.
multipliers - Supported pixel resolution multipliers.

bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x

Labels:

Comments

Post a Comment

Popular posts from this blog

Get The field values of node in Drupal 8

use Drupal \ node \ NodeInterface ; /** * Implements hook_ENTITY_TYPE_insert() for node entities. * * This tests saving a node on node insert. * * @see \Drupal\node\Tests\NodeSaveTest::testNodeSaveOnInsert() */ function node_test_node_insert ( NodeInterface $node ) { // Set the node title to the node ID and save. if ( $node - > getTitle ( ) == 'new' ) { $node - > setTitle ( 'Node ' . $node - > id ( ) ) ; $node - > setNewRevision ( FALSE ) ; $node - > save ( ) ; } } Now There is so many functions are there to get the values, For All the functions available visit the API code, https://api.drupal.org/api/drupal/core%21modules%21node%21src%21NodeInterface.php/interface/NodeInterface/8.2.x Some of as below, Node edit form, Drupal 8 Automatically Load the whole object no need to load the entity like below, if ($event->getFormId() == 'node_alexa_audio_clips_edit_form') { $node = \Drupal::ro...
Post a Comment
Read more

Drupal Setup with docker

Option 1:  docker pull mysql docker pull phpmyadmin docker pull drupal docker run -d --name MysqlClient -e MYSQL_ROOT_PASSWORD=drupal mysql Download the phpmyadmin image and Setup Container: docker run --name phpmyadmin -d --link MysqlClient:db -p 8083:80 phpmyadmin Download the Drupal image and Setup Container: docker run -d --name dweb2 --link MysqlClient -p 8082:80 -e MYSQL_USER:root -e MYSQL_PASSWORD:drupal drupal   We are using docker4 drupal and following below URL https://wodby.com/docs/1.0/stacks/drupal/local/ From Mount my codebase Download and unpack docker4drupal.tar.gz with hidden files in a new directory, also get the drupal code with in web directory composer create - project drupal / recommended - project my_site_name_dir It means with in new directory we have docker files and drupal files also has web folder for drupal. now run docker-compose up -d Now PROJECT_BASE_URL is mentioned in .env file open this url in the web with port, it will open the drupal page, ...
Post a Comment
Read more