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

How to span column of custom table in Drupal

If you want to span the column of custom drupal table like below image, Follow the below code to make the header of the table , <?php $header = array('S.N','District', array('data' => '<div class ="house">Household </div><br><span>Rural</span> <p>Urban</p>','colspan' => 2), array('data' => '<div class ="house">Members</div> <br><span>Rural</span> <p>Urban</p>','colspan' => 2), 'Duplicate/Failed Registration', array('data' => '<div class ="house">Pending De duplication </div><br><span>Rural</span> <p>Urban</p>','colspan' => 2), 'Non Un-organised Workers', 'SSID Generated', 'No. of Card Personlised', ); $rows[] = arra...
1 comment
Read more

Drupal 8 : Link actions,Link menus,Link Tasks,Routings

Drupal 8 : Link actions,Link menus,Link Tasks,Routings Link actions Local actions have also been moved out of the hook_menu() system in Drupal 8 .Use actions to define local operations such as adding new items to an administrative list (menus, contact categories, etc). Local actions are defined in a YAML format, named after the module they are defined by. Such as menu_ui.links.action.yml for this example from menu_ui module: menu_ui.link_add:   route_name: menu_ui.link_add   title: 'Add link'   appears_on:     - menu_ui.menu_edit Here, menu_ui.link_add: It is the Unique name of the link action Most likely start with module name, route_name : Name of the route it means when click the link it redirect to this route, appears_on :  An array of route names for this action to be display on. Now how to know the Route name of any internal/external admin pages like below, By through the drupal console we achieve it, drupal debug:router...
Post a Comment
Read more

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