Muzitaal Weebpal Drupal 8 Zircon theme guide for developers

https://www.weebpal.com/guides/drupal-8-zircon-theme-guide-developers

The Basic - Before You Start

Package

Features

System Requirements

Screenshots

Module requirements

Installation

How to install a WeebPal demo package

How to install a WeebPal theme for Drupal developers

Taxonomy Configurations

Media Configurations

Content Type Configurations

Modify Article type

Create Ads type

Create Book type

Create Forum type

Create Homepage

Content

Initially, I only kept the following info on the Homepage:
  • Featured block (the four blocks music - language - culture - etc):
    content block - grid of fields
  • content promoted to front page (the same four blocks): I therefore demoted the other content
    content page - unformatted list of teasers
Only one block is necessary. I preferred the Featured block, but the read more links appeared as read more in any language.

For teasers, the read more links are correct language-wise and css-wise.

I was able to solve the translation issue concerning the read more links. See here.

Disable RSS Feed

  • Structure > Views
  • Edit the Frontpage view
  • click on the Feed display
  • At the right hand side, click on the drop down next to View Feed and select Disable Feed
  • scroll down and Save
source: https://www.drupal.org/forum/support/post-installation/2016-02-08/disable-rss-icon-in-drupal-8-via-views-frontpage

Hide the frontpage view completely

Even if there is no frontpage content, a small bar appears. You can hide it using a CSS Injector:
  • Configuration > Development > Asset Injector > CSS Injector
#main .container {
 display: none;
}
  • return true on the following pages: <front>, /en, /fr, /nl

Search form block

Site branding block

Replace the logo and the favicon:
  • size logo?: google for "weebpal zircon logo": the logo is shown in the image results as 800x256 => use the same height and width or same aspect ratio for the logo that you want to use
  • Appearance > Settings:
    • uncheck "Use the logo supplied by the theme"
    • I tried the "Upload logo image" option, but this failed - I suppose my image wasn't uploaded (no error message however)
    • so I put my .png file in the themes/zircon directory
    • apparently, it's automatically copied to ~/sites/default/files
  • The same goes more or less for the favicon

Language switcher block

  • Extend: Language > Configure
  • List tab:
    • Add language: Dutch
    • Add language: French
    • Move Dutch to 1st position, French to 2nd position
    • Set Dutch as Default language
    • Save configuration
  • place LANGUAGE SWITCHER BLOCK / BLOK TAALKEUZE plaatsen:
    • Structure > Block layout
    • Choose your theme
    • Choose location, e.g. sidebar 2nd: place block
    • Choose language switcher block / taalkeuze: place block
    • Save block
  • position horizontally, on the right
    • following the above procedure, the language bar appears vertically, and sticks to the logo
    • apply the following CSS Injector (globally) to make it horizontally, and positioned to the right:
#block-languageswitcher li{
 display:inline;
 padding-left:1.5rem;
 float:right;
 font-weight: 700;
}
function MYTHEME_preprocess_links__language_block(&$variables) {
  $variables['links']['en']['link']['#title'] = 'EN';
}

TB Mega Menu: Main menu

Translation of the "Register" menu did not succeed. I could add the translations, but the URL did not switch and the menu switched languages…

Solution:
  • create Register article
  • check the MENU SETTINGS > Provide a menu link setting and fill in Register
  • open the URL PATH SETTINGS and fill in /register
  • then translate the article and translate the menu link

Slideshow block

Feature block

Multilingual

Read more

Initially, the read more links appeared as read more in any language.

User interface translation: only shows translation for:

Read more<span class="visually-hidden"> about @title</span>

The read more from the Frontpage view uses this string, as can be seen from the element inspector in Chrome's DevTools.

But that's a view of teasers. Apparently, then everything is handled correctly and automatically, also for the translation.

The Featured view is a view of fields. The Link to Content is added to the fields, but hidden, and is followed by the Title field, which is rewritten:

Text: Read more

and which is output as a custom link

Link path: {{ path }}

The rewrite text appears/appeared in all languages and was not in the User interface translation's list of untranslated strings.

While surfing around, I found the following article: CREATING LINKS WITHIN TWIG TEMPLATES USING PATH() AND URL()

I changed the rewrite text as follows:

Text: {{ 'Read more'|t }}

After doing that, Read more appeared in the list of untranslated strings, and after translation, the links show up in the correct language!

Some more information from the drupal.org site: the trans (alternatively, t) filter is a Drupal Specific translation Filter to modify variables in twig templates.

CSS

Then I want the the read more links exactly to look like the read more links from a view of teasers, so grey characters, preceded by a plus sign.

The css including the :before pseudo-element-selector was not possible, but I was able to use the teasers list css, and adding the same fontawesome icon in the rewrite result.

On http://astronautweb.co/snippet/font-awesome/ I found out that "\f0fe" corresponds with fa-plus-square.

So the complete rewrite text is now as follows:

<ul class="links inline"><li class="node-readmore"><i class="fa fa-plus-square">&nbsp;&nbsp;</i>{{ 'Read more'|t }}</li></ul>

When the site was already live, I noticed that some active menu items didn't keep the red background, but instead showed the default (non active) black background. Also, some url's weren't correct. So I corrected them:

NL
wat is muzitaal: nl/about-us => nl/over-ons
ons aanbod: nl/our-offer => nl/ons-aanbod
inschrijven: nl/register => nl/inschrijven

FR
a propos de nous: fr/propos-de-muzitaal => a-propos-de-nous
notre offre: fr/our-offer => nl/notre-offre
inscription: fr/node/33 => fr/inscription

By correcting these url's the background of the menu items was also correct.

The trick was to delete (or unpublish) the existing menu items and recreate them through the article settings. See here.

If you remove the user menu block, you can log into the Drupal 8 site using the following URL:

http://<your_site>/user/login

Panel second col 1: Contact block

Panel second col 3: Recent Comments block

Panel second col 4: Newsletters block

Create Subpages

About Us page

Article page

The Music - Language - Culture articles, show a picture, with next to it, a bulleted list of items.

The bullets were too close to the image, so I add the follwing CSS Injector:
  • Configuration > Development > Asset Injector > CSS Injector
article .field--name-field-image {
 margin-right: 30px;
}
  • Content type is article
  • The node bundle is article
  • The current theme is zircon

Forum page

Help page

Contact page

The strange thing about the contact page, was that the title remained in English (Contact us) in every language, whatever I tried (translate block, User interface translation, …)

The solution was:
  • Extend: Contact > Configure
  • "Contact us" form: Edit
  • Label: "Contacteer ons" (since the site's default language is Dutch) & Save
  • Form "Contacteer ons": Translate = Translate contact form tab:
    • FR: Add: Label: "Contactez nous" & Save translation
    • EN: Add: Label: "Contact us" & Save translation

More Configurations

Turn off the ability for people to register user accounts on the site

  • Configuration > People > Account settings
  • REGISTRATION AND CANCELLATION: Who can register accounts? => Administrators only

Site Information

Subpages

Home - Accueil - Home

About us - A propos de MuziTaal - Wat is MuziTaal

Our offer - Notre offre - Ons aanbod

Practical - Pratique - Praktisch

  • Bootstrap grid
  • Bootstrap button

Register - Inscription - Inschrijven

  • na de bevestiging: gewoon "Bedankt" of afleiden naar andere pagina? +> 3 talen!
  • bevestigingsmail met betalingsgegevens => 3 talen!

Contact exclamation

The built-in contact form works fine. You only have to change the recipient's address (exclamation). Proceed as follows to use the Drupal 8 contact form:
  • Extend: enable the CORE module Contact
  • Structure > Contact forms
  • Edit the "Contacteer ons" form
  • change the default Recipients "you@yourdomain.com" into the real recipient, i.e. info@muzitaal.be.
  • na bevestiging: talen???

Also make sure the customer has access to the e-mail address of the domain or create a forwarder in the DirectAdmin console:
  • E-mail Beheer > Email-forwarders
  • Nieuwe email-forwarder aanmaken

Promo popup - 12/03/2019

In order to promote this language, culture and music camp, at a certain moment, an reduced price was offered, which was shown as a popup on the site.

This was done using the Simple Popup Blocks module: so install and enable this module first.

Add custom block

Structure > Block layout > Add custom block
  • Block description: PROMO!
  • Body: the text/images you'd like to appear as popup
  • Save

Add simple popup block

Configuration > Media > Add simple popup blocks
  • Choose the identifier: Custom css id or class
    • Selectors without # or .: block-promo
    • Css selector: Css id (#)
  • Choose layout: Top center (is somewhat responsive)
  • Visit counts: 0 (default)
  • Leave all checkboxes on
  • Trigger method: Automatic (default)
  • Delays: 0 (default)
  • Width: 400 (not applicable if you chose Top center layout - which is responsive)
  • click the Convert to popup button
Note that the Enable this as popup checkbox appears after saving as the first option on the page

Place block

Structure > Block layout
  • click on the Place block button
  • clock on the Place block button next to the PROMO! block
  • uncheck the Display title checkbox
  • in the Visibility section, click on the vertical tab Pages and fill in: <Front>
  • click on the Save block button

Promo video - 19/03/2019

Added the video to the descriptive basic pages promoted to the frontpage.

There was an issue with a vertical scrollbar that sometimes appeared. I changed the 'default' embed code:
  • padding-bottom: 56.25%; => padding-bottom: 62.5%;

Update history

Update core manually: https://www.drupal.org/docs/8/update/update-core-manually
  1. backup
  2. maintenance mode ON
  3. - remove root files and core & vendor folders
    - keep the modules, profiles, sites & themes folders
  4. settings.php / default.settings.php
  5. compare root files & root files of upgrade
  6. copy core & vendor folders from upgrade to your site
  7. run your.site/update.php
  8. Administration > Reports > Status report: solve errors and warnings
  9. maintenance mode OFF
Date version comment
  8.5.5  
28/12/2018 8.5.5 → 8.6.4 status report gave error concerning TRUSTED HOST SETTINGS in settings.php - added the following

$settings['trusted_host_patterns'] = array(
'^www\.muzitaal\.be$', '^muzitaal\.be$',
);

Topic revision: r19 - 19 March 2019, StijnBousard
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback