Theming

Filters list (Syntaw)

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Examples:

Convert  block/image ... to black and white (Gray out):

Step 1. Create your module and Block (/tutoriels/107/create-a-simple-block-programmatically)

Enable debugging

You enable Twig Debugging in sites/default/services.yml.

(If services.yml does not yet exist; copy default.services.yml and rename it to services.yml.)

parameters:

 twig.config:

  debug: true

Example 1. SASS (SCSS)

http_path = "/"

css_dir = "css"

sass_dir = "sass"

images_dir = "images"

Example 2. SASS (SCSS)

Print : {{ variable_to_print }}

Code : {% codes %}

Comment : {# Comments #}

 

Modal dialogue box ( bootstrap / jquery)

1. Remobe the gray background of modal dialog  box (modal-backdrop)

.modal-backdrop {

  background-color: transparent;

}

.main-container {

&:before {

content: ''; position: absolute; height: 500px; background: red; width: 100%; left: 0;

} }

ALSO:

Add z-index: -1; if this hide some thing

.main-container is a div just after the body

1. Text-Align: Center;

div{

    text-align: center;

}

2. Margin: 0 auto;

Tables

vertical-align: middle; is working in a TABLE, but not inside if a DIV

Move up/down

To move a background image (50px s=X 50px) to center of the previus line(50px to top).

Example: