How to build Drupal 8 theme with bootstrap as base theme

Building theme in drupal 8 is easy and you can easily build the base theme of bootstrap. Just follow the instructions below

First download the bootstrap theme from https://www.drupal.org/project/bootstrap

Then in bootstrap theme you will find one folder named as starterkits

Copy the less folder of starter kits to your theme directory where the bootstrap theme is placed

Rename the less folder as your themename lets suppose we change the name less as mahi

Rename all these files from the less directory

  • THEMENAME.libraries.yml to mahi.libraries.yml
  • THEMENAME.starterkit.yml to mahi.info.yml
  • THEMENAME.theme to mahi.theme
  • config/install/THEMENAME.settings.yml to config/install/mahi.settings.yml
  • config/schema/THEMENAME.schema.yml to config/schema/mahi.schema.yml

Now open mahi.info.yml and change the following

name: ‘Mahi

libraries:

mahi/global-styling

mahi/bootstrap-scripts

 

After this Go to the bootstrap official page and download the bootstrap source

Place it in your theme directory and rename as bootstrap

Next compile the less file which will create the style.css file.
lessc less/style.less > css/style.css from terminal going to your theme directory

Now go to the appearence tab in drupal and install and set as default to your theme

Enjoy it will start working. If any issue occurs comment below so i will solve the problems

Advertisements

Create a custom block programatically in drupal 8

Creating a block in drupal 8 is easy. Just follow the steps and you will be ready with a block

Go to your drupal 8 files and there is a module folder

In module folder create a folder named your module name. I am going to make a new folder named mahi and inside your module name you have to follow php PSR4 convention. So your file structure will be like modulename/src/Plugin/Block/filename.php.

The module file contains 2 important files one is modulename.info.yml and another is modulename.module

So it will look like this

 

Now open your .php file and add the following lines of code

<?php

namespace Drupal\mahi\Plugin\Block;
 use Drupal\Core\Block\BlockBase;
 /**
 * Provides a 'mahi' block.
 *
 * @Block(
 *     id = "mahi_block",
 *     admin_label = @Translation("Mahi Block"),
 *     category = @Translation("Custom article block example")
 * )
 */
 class MahiBlock extends BlockBase {
   public function build() {
     return array(
       '#type' => 'markup',
       '#markup' => 'This block list the article.',
     );
   }
 }

Now open your .info.yml and write the following code

name: Mahi Block
description: A simple module for Block.
core: 8.x
package: Custom
dependencies:
– node
– block
type: module

Dont add anything in .module file

Now go to drupal-8 site and extend that module

Now go to block configuration and place your block at your choice

Refresh the site and your block will be displayed

 

Advantages of Drupal 8 over Drupal 7 or earlier version

If you are a Drupal 7 developer and want to make a way to develop your sites on Drupal 8 then there are many benefits of Drupal 8 over Drupal 7 which is listed below

Drupal 8 has brought a lot of changes over Drupal 7. The most important part in using drupal 8 is that it is built on Symfony framework. Many contributed modules has been added to core in drupal 8

Here are the list of Drupal 8 new features

 

  • Views – In earlier version of drupal views was in contributed module but in drupal 8 it is in core Module.
  • Mobile Friendly – Drupal 8 is mobile friendly. The default themes ( Bartik, Seven and Stark ) uses responsive design. Responsive design means that website can change the layout based on size and capabilities of the device.
  • Object Oriented Programming – Drupal 8 uses Object oriented Programming concept which is based on Symfony framework used in drupal 8. This makes the code easy to maintain, scale and reuse.
  • Template Change – In earlier version of Drupal the template files were using PHP Template as the default templating engine and the extension was .tpl.php but there are a major change in templating part. Drupal 8 uses Twig which is a template engine for PHP and it is also part of the Symfony 2 framework. So all the template file in drupal 8 is saved with .html.twig
  • Multilingual – Drupal 8 also supports auto detection of languages and auto downloading latest interface translations.
  • Inline Editor – If you want to edit the content in the body by clicking on the edit content option . You can easily edit the content of the page without going to the edit page.
  • New Field types added –
  • Email Field
  • Telephone Field

 

 

Underscore vs. hyphen in URL. Which one to use?

The question in SEO(Search Engine Optimazation) URLs is whether to use a hyphen, or dash, (these-are-hyphens) or an underscore (these_are_underscores) to separate your words.

Does Google recognize both of them as word separators?

The short answer is that you should use a hyphen for your SEO URLs. Google treats a hyphen as a word separator, but does not treat an underscore that way.

Google treats and underscore as a word joiner — so mahtab_alam is the same as mahtabalam to Google. This has been confirmed directly by Google themselves, including the fact that using dashes over underscores will have a (minor) ranking benefit.

Again, SEO URLs should use hyphens to separate words. Do not use underscores, do not try to use spaces, and do not smash all the words together intoonebigword. As of 2012, dashes are still the best way to optimize your SEO URLs.

For example
Use mahtab.com/mahi-alam
instead of mahtab.com/mahi_alam
when you create a new project or website

Thanks
Subscribe for daily new posts

Setting Up Apache Virtual Hosts on Ubuntu

It is very easy just read out this article.
I have explained in very simple lines.
Follow each steps.

You need to have Apache installed in order to work through these steps. If you haven’t already done so, you can get Apache installed on your server through apt-get:

Open terminal and type this to install Apache
sudo apt-get update
sudo apt-get install apache2

After this change directory to sites-available
just type the following command

Step 1

mahtab@mahtab-HP-Pavilion-TS-Sleekbook-15:~$ cd /etc/apache2/sites-available/
mahtab@mahtab-HP-Pavilion-TS-Sleekbook-15:/etc/apache2/sites-available$ ll

cd /etc/apache2/sites-available

if u want to see how may virtual hosts are there just type ll
ll means list all the files in pwd. It will list like this

-rw-r–r– 1 root root 1332 Jan 7 2014 000-default.conf
-rw-r–r– 1 root root 6437 Jan 7 2014 default-ssl.conf

Step 2

now use cp command to get copy

mahtab@mahtab-HP-Pavilion-TS-Sleekbook-15:/etc/apache2/sites-available$ sudo cp 000-default.conf mahi.mahtab.com.conf
[sudo] password for mahtab:

After this it will ask for your system password. Just enter the password and click enter.
Here we have use sudo. It is because the file permission to cp(copy-paste) is given to root. so after adding sudo it will work .

Step 3

Now use a nano command to open and edit few things

mahtab@mahtab-HP-Pavilion-TS-Sleekbook-15:/etc/apache2/sites-available$ sudo nano mahi.mahtab.com.conf
# The ServerName directive sets the request scheme, hostname and port t$
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request’s Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName mahi.mahtab.com //Just change here.Remove # and write your own port

ServerAdmin webmaster@localhost
DocumentRoot /var/www/html/mytest //And also here choose the folder in which your project is

# Available loglevels: trace8, …, trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn

Now just click ctrl+x and press Y and press enter.it will save

Step 4

Enable the new virtual host file

mahtab@mahtab-HP-Pavilion-TS-Sleekbook-15:/etc/apache2/sites-available$ sudo a2ensite mahi.mahtab.com.conf

Now restart the apache2

for this type sudo service apache2 reload

mahtab@mahtab-HP-Pavilion-TS-Sleekbook-15:/etc/apache2/sites-available$ sudo service apache2 reload

Step 5

Set up local host files

mahtab@mahtab-HP-Pavilion-TS-Sleekbook-15:/etc/apache2/sites-available$ sudo nano /etc/hosts

it will open like this

127.0.0.1 localhost
127.0.1.1 mahtab-HP-Pavilion-TS-Sleekbook-15
127.0.0.1 mahi.mahtab.com       // Just add this line

# The following lines are desirable for IPv6 capable hosts
::1 ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

Just press ctrl+x and press y and enter.
now go to your browser it will work fine

Thanks
subscribe to get new posts daily

Linux Commands

1. cd- It stands for change directory.
Usage: if you are at some directory on terminal and want to move to another
directory then use cd pathname/path.

2. sudo -super user do. Means if the permission of a file is given to owner the others can access by using sudo.
3. locate- it is used to search for a file.
4. tail- it is used to print last 10 lines of each files to standard output.

5. cp – copy paste

6. grep -r “filename” –  Search for the selected word in whole document.