------------------------------------------------------------------------------------------------------------
enable twig comment (debugging mode)
go to :
var/www/html/your-project-name/web/sites/default/services.yml
then copy default.services.yml to services.yml
and then open and edit services.yml
find twig.config:
then find
debug: false
change it to
debug: true
------------------------------------------------------------------------------------------------------------
read or edit database info in settings.php
go to :
var/www/html/your-project-name/web/sites/default/settings.php
if settings.php is not exits, then copy default.settings.php to aettings.php
and then open and edit settings.php
go to the end of this file
then find these codes :
$settings['config_sync_directory'] = '../config/sync'; $databases['default']['default'] = array ( 'database' => 'name', 'username' => 'root', 'password' => '20472047304723047', 'prefix' => '', 'host' => 'localhost', 'port' => '3306', 'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql', 'driver' => 'mysql', );
change the data as you need
------------------------------------------------------------------------------------------------------------
add regions or theming
first open this file : your-theme-name.info.yml
var/www/html/your-project-name/web/themes/contrib/your-theme-name/your-theme-name.info.yml
find regions :
add or edit these codes (for example) :
regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
hero_slider: 'Media Hero Slider'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
section1: 'Section 1'
section2: 'Section 2'
Map: 'map
second go to this file : page.html.twig
var/www/html/your-project-name/web/themes/contrib/your-theme-name/templates/system/page.html.twig
then open and add or remove html(+ css classes) + twig codes (for example) :
<div id="section8">
<div class="container-fluid">
{{ page.section8 }}
</div>
</div>
or
<div id="section6">
<div class="container">
{{ page.section6 }}
</div>
</div>
or
{% if page.help %}
{% block help %}
{{ page.help }}
{% endblock %}
{% endif %}
or
{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
{% set header_container = theme.settings.header_container ? 'container-fluid header-margin' : 'container' %}
{# Navbar #}
{% if page.navigation or page.navigation_collapsible %}
{% block navbar %}
{%
set navbar_classes = [
'container',
'mb-4',
]
%}
<header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner">
{% if container_navbar %}
<div class="container">
{% endif %}
<div class="navbar-brand mr-md-auto">
{{ page.navigation }}
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{% if page.navigation_collapsible %}
<div id="navbar-collapse" class="navbar-collapse collapse">
<div class="navbar-nav ml-auto">
{{ page.navigation_collapsible }}
</div>
</div>
{% endif %}
{% if container_navbar %}
</div>
{% endif %}
</header>
{% endblock %}
{% endif %}
{# Header print #}
<div class="d-none d-print-block header-print page-header mt-4 mb-3">
<div class="{{ container }}">
<div class="row">
<div class="col-sm-12">
{# Logo print #}
{% if logo_print %}
<img class="logo pull-left d-none d-print-inline-block" src="{{ logo_print }}" alt="{{ site_name }}"/>
{% endif %}
</div>
</div>
</div>
</div>
{# hero_slider #}
{% if page.hero_slider %}
{% block hero_slider %}
<div class="hero_slider mt-n4">
{{ page.hero_slider }}
</div>
{% endblock %}
{% endif %}
{# Main #}
{% block main %}
<div role="main" class="main-container {{ container }} js-quickedit-main-content">
<div class="row">
{# Header #}
{% if page.header %}
{% block header %}
<div class="col-sm-12" role="heading">
{{ page.header }}
</div>
{% endblock %}
{% endif %}
{# Sidebar First #}
{% if page.sidebar_first %}
{% block sidebar_first %}
<aside class="col-sm-3" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endblock %}
{% endif %}
{# Content #}
{%
set content_classes = [
page.sidebar_first and page.sidebar_second ? 'col-sm-6',
page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9',
page.sidebar_second and page.sidebar_first is empty ? 'col-sm-9',
page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
]
%}
<section{{ content_attributes.addClass(content_classes) }}>
{# Highlighted #}
{% if page.highlighted %}
{% block highlighted %}
<div class="highlighted">{{ page.highlighted }}</div>
{% endblock %}
{% endif %}
{# Breadcrumbs #}
{% if breadcrumb %}
{% block breadcrumb %}
{{ breadcrumb }}
{% endblock %}
{% endif %}
{# Action Links #}
{% if action_links %}
{% block action_links %}
<ul class="action-links">{{ action_links }}</ul>
{% endblock %}
{% endif %}
{# Help #}
{% if page.help %}
{% block help %}
{{ page.help }}
{% endblock %}
{% endif %}
{# Content #}
{% block content %}
<a id="main-content"></a>
{{ page.content }}
{% endblock %}
</section>
{# Sidebar Second #}
{% if page.sidebar_second %}
{% block sidebar_second %}
<aside class="col-sm-3" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}
{% if page.footer %}
{% block footer %}
<div class="footer-wrapper">
<footer class="footer {{ container }}" role="contentinfo">
{{ page.footer }}
</footer>
</div>
{% endblock %}
{% endif %}
or
{% if page.footer %}
{% block footer %}
<div class="footer-wrapper">
<footer class="footer {{ container }}" role="contentinfo">
{{ page.footer }}
</footer>
</div>
{% endblock %}
{% endif %}
or
{% if page.footer_top_first or page.footer_top_second or page.footer_top_third or page.footer_top_four or page.footer_bottom_first or page.footer_bottom_second %}
{% block footer %}
<div class="footer-wrapper">
<footer class="footer" role="contentinfo">
<div class="footer--top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-xs-12">{{ page.footer_top_first }}</div>
<div class="col-lg-3 col-xs-12">{{ page.footer_top_second }}</div>
<div class="col-lg-3 col-xs-12">{{ page.footer_top_third }}</div>
<div class="col-lg-3 col-xs-12">{{ page.footer_top_four }}</div>
</div>
</div>
</div>
<div class="footer--bottom">
<div class="container">
<div class="row">
<div class="col-lg-8 col-xs-12">{{ page.footer_bottom_first }}</div>
<div class="col-lg-4 col-xs-12">{{ page.footer_bottom_second }}</div>
</div>
</div>
</div>
</footer>
</div>
{% endblock %}
{% endif %}