#$ echo "the old school hacker way" | wall
the approach & tips
step by step hacking
...oo00OO ((
hmmm...
how did i do this last time?? (d6,d7)
AHA!! i remember!
!! COPY & HACK BARTIK !!
(it worked with Garland too...)
Drupal is magic...
should all be the same...
))
////// Let's DO IT!!!
tips
begin hack
the approach
step by step hacking
in my case, i am using Acquia Cloud Professional in LiveDev mode
why? because it's awesome! +brainless +tweaked for high performance drupal
D8 up & running in a couple of clicks
* you can setup your dev environment as you please,
LAMP, WAMP, MAMP, ${SHM}AMP, Acquia Dev Desktop, DigitalOcean, EC2, else
shell
steps
user@server:/path/to/drupal8/$
cd themes/
cp -vpr ../core/themes/bartik/ bar
cd bar/
* note new dir structure. core/themes and /themes
in /themes/bar rename:
steps
shell
user@server:/path/to/drupal8/themes/bar$
mv bartik.theme bar.theme
mv bartik.libraries.yml bar.libraries.yml
mv bartik.info.yml bar.info.yml
mv bartik.breakpoints.yml bar.breakpoints.yml
steps
shell
user@server:/path/to/drupal8/themes/bar$
grep -ilr "bartik" *
vim bar.breakpoints.yml bar.info.yml bar.libraries.yml bar.theme
%s/bartik/bar/gc
%s/Bartik/Bar/gc
** remember inside files, things are case sensitive
#$ for the brave
#!/bin/bash
# copy me a d8 bartik pls
# for the brave
newtheme="bar"
themename="Bar"
cd themes/ && cp -vpr ../core/themes/bartik/ $newtheme && cd $newtheme/
mv bartik.theme $newtheme.theme && mv bartik.libraries.yml $newtheme.libraries.yml && \
mv bartik.info.yml $newtheme.info.yml && mv bartik.breakpoints.yml $newtheme.breakpoints.yml
grep -ilr "bartik" * | while read filename ; do
cat $filename | sed -e "s/bartik/$newtheme/g" -e "s/Bartik/$themename/g" > ${filename}.tmp
mv ${filename}.tmp $filename
done
#$ even crazier
...in 2 commands...
# cd /path/to/drupal8
wget "https://gist.githubusercontent.com/jacov/927213847021e908ad6f/raw/fd2e068d3ba6c1dd2a0fdd44bbf2e21044cfb068/d8copyBartik.sh"
bash d8copyBartik.sh
steps
shell
user@server:/path/to/drupal8/themes/bar$
touch css/style.css
vim css/style.css
drush8 cr
/*
* Bar Theme CSS
*/
body {
background-color: black;
}
#page {
background-color: black;
}
#main-wrapper {
background-color: gray;
}
Introduce your style.css to the new theme by declaring it in the "theme:" section of the new d8 libraries yaml file
file: /themes/bar/bar.libraries.yml
steps
shell
user@server:/path/to/drupal8/themes/bar$
vim bar.libraries.yml
* note drush8 for d8, and cache clear / rebuild is now cr NOT cc
steps
shell
user@server:/path/to/drupal8/themes/bar$
drush8 cr
Drupal Admin UI
/admin/appearance
...of course
Magic! turn on Twig debugging
in "services.yml"
under "twig.config:"
change to "debug: true"
steps
shell
user@server:/path/to/drupal8/themes/bar$
vim sites/default/services.yml
by default, css & js aggregation is on, for development, turn it off in Drupal Admin UI
clear cache
steps
shell
user@server:/path/to/drupal8/themes/bar$
drush8 cr
Drupal Admin UI
admin/config/development/performance
find the css code we put in style.css
inspect & view source to see twig suggestions in the dom html
theme suggestions now built in!!!
Tip! this has been back ported to Drupal 7.34
# let’s theme a block!
docroot/themes/bar/templates
vim block.html.twig
# extends = includes
{% extends "@classy/block/block--system-menu-block.html.twig" %}
whatever gets added beneath the “extend” statement will be added to the code.
# TODO next:
use extend example with blocks and views
make the view for homepage images