How To Quickly Install a New Drupal 8 Theme
Once I to the mymanthemaker.com website installed, the first thing I wanted to do was install a theme to make it look nicer than the default theme (Bartik) that was put in place by the Drupal 8 installer:
In my opinion, Bartik looks terrible:
So, once I managed to get the website up and running, my next priority was to change the default theme to something more in line with my own sense of design and beauty. The first place I looked was within the Drupal 8 Administrator GUI, which gave me this enticing information:
So, like a fool, I clicked on themes and got the following from Drupal.org:
Realizing that it would take me several months (or years) to evaluate over 2,000 themes, I quickly changed my strategy and started working on How To Search for Free Drupal 8 themes with Google instead:
Here's the query I used:
https://www.google.com/search?q=top+drupal+8+themes+free&oq=top+drupal+8+themes+free
And here's the result I got:
I clicked on the first hit:
https://www.vardot.com/en/blog/top-10-free-bootstrap-based-themes-drupal-8
And started evaluating the Free Drupal 8 Bootstrap Themes listed in the article, and I figure the following theme is most appropriate for me:
Clicking on the name brought me to a download page on drupal.org.
At the bottom of the page was the download link:
Right-click on tar.gz (141.55 KB) and selected Copy link address.
Then I navigated to the right place in the Drupal 8 Administrator GUI:
and clicked on + Install new theme.
After that, I pasted the copied link address for the theme into the appropriate spot
...and got this:
Now, there's some problems with this screen
1) It feaures a BIG RED WARNING about how the use of FTP to install a theme without an encrypted connection is insecure and dangerous.
2) It offers a Learn more link to learn about why you need security and some broad advice on how to do it, but this looks like hours and hours more work to just be able to change the appearance of a website!
3) If offers no alternatives
Yet another example of how The Drupal Experience Has Sucked For Over A Decade Now. I guess we now have to figure out How To Install A New Drupal 8 Theme Without Jumping Through Hoops.
So, let me show you How To Use the CLI To Install A Drupal 8 Theme.
Where To Put Optional Drupal 8 Themes
Drupal has a bit of a dual-personality.
One side of Drupal 8 is CORE. This is where the Drupal Core Team puts their output (however slooooooowly) so as to maintain the "standard distribution" of Drupal 8.
The other side of Drupal 8 is CONTRIBUTED. This is where everything else is put so that when Drupal Core is updated, all of your customization isn't blown away.
Obviously, Optional Drupal 8 Themes are not supposed to go in the Drupal 8 CORE area.
So, we need to figure out where to put the new theme. At the Linux Command Line Interface (CLI), you may do the following:
#pwd
/var/www/vhosts/mymanthemaker.com/www/content
# find . -name themes
./core/assets/vendor/jquery.ui/themes./core/modules/big_pipe/tests/themes
./core/modules/block/tests/modules/block_test/themes
./core/modules/breakpoint/tests/themes
./core/modules/color/tests/modules/color_test/themes
./core/modules/config_translation/tests/themes
./core/modules/layout_discovery/tests/themes
./core/modules/statistics/tests/themes
./core/modules/system/tests/themes
./core/modules/update/tests/themes
./core/modules/user/tests/themes
./core/modules/views/tests/themes
./core/profiles/demo_umami/themes
./core/themes
./themes
Alright, we have a long list here, but there is only one place without the word core in its path, the themes directory immediately below the base directory of the Drupal 8 System.
So, let's go there...
# cd themes
# pwd
/var/www/vhosts/mymanthemaker.com/www/content/themes
Let's see what is in this directory, shall we?
# ls
README.txt
# cat README.txt
Themes allow you to change the look and feel of your Drupal site. You can use
themes contributed by others or create your own.
WHAT TO PLACE IN THIS DIRECTORY?
--------------------------------
Placing downloaded and custom themes in this directory separates downloaded and
custom themes from Drupal core's themes. This allows Drupal core to be updated
without overwriting these files.
DOWNLOAD ADDITIONAL THEMES
--------------------------
Contributed themes from the Drupal community may be downloaded at
https://www.drupal.org/project/project_theme.
MULTISITE CONFIGURATION
-----------------------
In multisite configurations, themes found in this directory are available to
all sites. You may also put themes in the sites/all/themes directory, and the
versions in sites/all/themes will take precedence over versions of the same
themes that are here. Alternatively, the sites/your_site_name/themes directory
pattern may be used to restrict themes to a specific site instance.
MORE INFORMATION
-----------------
Refer to the "Appearance" section of the README.txt in the Drupal root directory
for further information on customizing the appearance of Drupal with custom
themes.
Drupal 8 Best Practices dictates that the <drupal root>/themes directory have two subdirectories, /contrib and /custom. Seeing as this is "best practices", I have no idea why these directories don't already exist - except for, maybe, the continually perverse nature of the Drupal Core Team that results in making *everything* Drupal much harder than it needs to be!
No matter, let's just make this thing happen.
Create these directories and make sure that the "CentOS Trinity" is observed:
1) Are the files owned by the right user context?
2) Are the filesystem permissions no more than the minimum required to get the job done?
3) Are the Secure Linux (SELINUX) permissions no more than that required to get the job done?
Here's how I did it:
# pwd
/var/www/vhosts/mymanthemaker.com/www/content/themes
# ls -l
total 4
-rw-r--r--. 1 mymanthemaker.com mymanthemaker.com 1185 Nov 14 07:20 README.txt
# mkdir contrib
# mkdir custom
# chown mymanthemaker.com:mymanthemaker.com * -R
# ls -lZ
drwxr-xr-x. mymanthemaker.com mymanthemaker.com unconfined_u:object_r:httpd_sys_content_t:s0 contrib
drwxr-xr-x. mymanthemaker.com mymanthemaker.com unconfined_u:object_r:httpd_sys_content_t:s0 custom
-rw-r--r--. mymanthemaker.com mymanthemaker.com unconfined_u:object_r:httpd_sys_content_t:s0 README.txt
OK, everything now seems to be in order.
Now, we return to the Drupal 8 page where the desired optional theme was, and at the bottom of the page will (still) be its download link:
Right-click on tar.gz (200.32 KB) and selected Copy link address.
Next, we enter the contrib subdirectory and download the file by typing in wget and then right-click on the terminal window
# cd contrib
# pwd
/var/www/vhosts/mymanthemaker.com/www/content/themes
# wget https://ftp.drupal.org/files/projects/newsplus_lite-8.x-1.1.tar.gz
--2019-11-20 21:06:27-- https://ftp.drupal.org/files/projects/newsplus_lite-8.x-1.1.tar.gz
Resolving ftp.drupal.org (ftp.drupal.org)... 151.101.2.217, 151.101.66.217, 151.101.130.217, ...
Connecting to ftp.drupal.org (ftp.drupal.org)|151.101.2.217|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 144952 (142K) [application/octet-stream]
Saving to: ‘newsplus_lite-8.x-1.1.tar.gz’
100%[======================================================================>] 144,952 --.-K/s in 0.02s
2019-11-20 21:06:27 (6.88 MB/s) - ‘newsplus_lite-8.x-1.1.tar.gz’ saved [144952/144952]
Now, extract the file so the Drupal 8 System can recognize it:
# tar -zxvf newsplus_lite-8.x-1.1.tar.gz
newsplus_lite/
newsplus_lite/config/
newsplus_lite/config/install/
newsplus_lite/config/install/block.block.newsplus_lite_account_menu.yml
newsplus_lite/config/install/block.block.newsplus_lite_branding.yml
newsplus_lite/config/install/block.block.newsplus_lite_breadcrumbs.yml
newsplus_lite/config/install/block.block.newsplus_lite_content.yml
newsplus_lite/config/install/block.block.newsplus_lite_local_actions.yml
newsplus_lite/config/install/block.block.newsplus_lite_local_tasks.yml
newsplus_lite/config/install/block.block.newsplus_lite_main_menu.yml
newsplus_lite/config/install/block.block.newsplus_lite_messages.yml
newsplus_lite/config/install/block.block.newsplus_lite_page_title.yml
newsplus_lite/config/install/block.block.newsplus_lite_tools.yml
newsplus_lite/config/install/block.block.sitebranding.yml
newsplus_lite/config/install/newsplus_lite.settings.yml
newsplus_lite/config/optional/
newsplus_lite/config/optional/block.block.newsplus_lite_help.yml
newsplus_lite/config/optional/block.block.newsplus_lite_search.yml
newsplus_lite/config/schema/
newsplus_lite/config/schema/newsplus_lite.schema.yml
newsplus_lite/css/
newsplus_lite/css/base/
newsplus_lite/css/base/elements.css
newsplus_lite/css/base/font.css
newsplus_lite/css/base/layout.css
newsplus_lite/css/components/
newsplus_lite/css/components/admin.css
newsplus_lite/css/components/block.css
newsplus_lite/css/components/breadcrumb.css
newsplus_lite/css/components/buttons.css
newsplus_lite/css/components/comments.css
newsplus_lite/css/components/field.css
newsplus_lite/css/components/fixed-header.css
newsplus_lite/css/components/forms.css
newsplus_lite/css/components/image-overlay.css
newsplus_lite/css/components/menu.css
newsplus_lite/css/components/messages.css
newsplus_lite/css/components/node-images.css
newsplus_lite/css/components/node-links.css
newsplus_lite/css/components/node.css
newsplus_lite/css/components/page-title.css
newsplus_lite/css/components/pager.css
newsplus_lite/css/components/primary-menu.css
newsplus_lite/css/components/quickedit.css
newsplus_lite/css/components/search.css
newsplus_lite/css/components/site-branding.css
newsplus_lite/css/components/tables.css
newsplus_lite/css/components/tabs.css
newsplus_lite/css/components/teaser-listing.css
newsplus_lite/css/components/theme-settings.css
newsplus_lite/css/components/to-top.css
newsplus_lite/css/theme/
newsplus_lite/css/theme/color-default.css
newsplus_lite/images/
newsplus_lite/images/premium.jpg
newsplus_lite/js/
newsplus_lite/js/custom/
newsplus_lite/js/custom/fixed-header.js
newsplus_lite/js/custom/node-features.js
newsplus_lite/js/custom/to-top.js
newsplus_lite/js/init/
newsplus_lite/js/init/magnific-popup-init.js
newsplus_lite/js/magnific-popup/
newsplus_lite/js/magnific-popup/jquery.magnific-popup.js
newsplus_lite/js/magnific-popup/jquery.magnific-popup.min.js
newsplus_lite/js/magnific-popup/magnific-popup.css
newsplus_lite/logo.svg
newsplus_lite/newsplus_lite.breakpoints.yml
newsplus_lite/newsplus_lite.info.yml
newsplus_lite/newsplus_lite.libraries.yml
newsplus_lite/newsplus_lite.theme
newsplus_lite/screenshot.png
newsplus_lite/templates/
newsplus_lite/templates/block--search-form-block.html.twig
newsplus_lite/templates/block--system-branding-block.html.twig
newsplus_lite/templates/block--system-menu-block.html.twig
newsplus_lite/templates/block.html.twig
newsplus_lite/templates/breadcrumb.html.twig
newsplus_lite/templates/comment.html.twig
newsplus_lite/templates/field--entity-reference.html.twig
newsplus_lite/templates/field--node--field-image.html.twig
newsplus_lite/templates/form--search-block-form.html.twig
newsplus_lite/templates/image-formatter--node--field-image.html.twig
newsplus_lite/templates/maintenance-page.html.twig
newsplus_lite/templates/node--article--teaser.html.twig
newsplus_lite/templates/node--article.html.twig
newsplus_lite/templates/node.html.twig
newsplus_lite/templates/page-title.html.twig
newsplus_lite/templates/page.html.twig
newsplus_lite/theme-settings.php
newsplus_lite/LICENSE.txt
Next, make sure the files are owned by the right user context
# chown mymanthemaker.com:mymanthemaker.com * -R
# ls -lZ
drwxr-xr-x. mymanthemaker.com mymanthemaker.com unconfined_u:object_r:httpd_sys_content_t:s0 newsplus_lite
-rw-r--r--. mymanthemaker.com mymanthemaker.com unconfined_u:object_r:httpd_sys_content_t:s0 newsplus_lite-8.x-1.1.tar.gz
OK, everything seems normal. The Drupal 8 System should be able to "see" the new theme if you press F5 at the Drupal 8 Administrative GUI, and looking at the bottom of the page where all of the Uninstalled themes appear:
Click on Install and set as default to see how the site looks!
If the change is a success, you will see this:
Surfinig to the home page now gives this:
Great Success!
P.S. I have since installed a FREE theme called Likeable, which I find even better!
REFERENCES:
https://www.drupal.org/project/likablehttps://www.vardot.com/en/blog/top-10-free-bootstrap-based-themes-drupal-8
https://www.drupal.org/docs/8/theming-drupal-8/drupal-8-theme-folder-structure
https://drupalize.me/tutorial/install-and-uninstall-themes?p=2512
https://www.drupal.org/docs/user_guide/en/extend-theme-install.html
https://www.drupal.org/project/newsplus_lite
No comments:
Post a Comment