Log inRegister

Boossy

You are here: Boossy » WebSites » 5-18-MuzitaalApps » 5-18-MuzitaalD8-WpZircon

Muzitaal Weebpal Drupal 8 Zircon theme guide for developers

27 June 2020 - 17:42 | Version 2 | StijnBousard

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

Muzitaal Weebpal Drupal 8 Zircon theme guide for developers

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

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
- a good site to create favicons, is the following: https://realfavicongenerator.net (for this purpose, do not use https://realfavicongenerator.net/)

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;
}

suddenly, EN was again changed in English in the language switcher
- https://drupal.stackexchange.com/questions/175586/how-can-i-replace-english-with-en
- add the below function to /domains/muzitaal.be/public_html/drupal/themes/zircon/zircon.theme:

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

Feature block

Multilingual

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>

Menu items losing focus

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.

Sidebar second: Quote block

Sidebar second: Our Products block

Sidebar second: Recent Content block

Sidebar first: User menu block

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

http://<your_site>/user/login

Sidebar first: Main Menu

Sidebar first: Category block

Sidebar first: Ads block

Panel second col 1: Carousel block

Panel second col 1: Contact block

Panel second col 2: Useful Links 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

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

Disable promo popup

The most easy way to disable the promo popup, is by disabling the PROMO! block:

Structure > Block layout
look for the PROMO! block
choose disable from the operations dropdown menu

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

backup
maintenance mode ON
- remove root files and core & vendor folders
- keep the modules, profiles, sites & themes folders
settings.php / default.settings.php
compare root files & root files of upgrade
- .htaccess: Rewrite-zaken!
copy root files, core & vendor folders from upgrade to your site
run your.site/update.php
Administration > Reports > Status report: solve errors and warnings
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$', );
26/12/2019	8.6.4 → 8.8.1	Ik had eerst de core bijgewerkt. Maar om die af te ronden, was een recentere versie van de PATHAUTO module vereist. Dus backup teruggeplaatst en dan eerst de modules bijgewerkt. Toen ik daarna de bijbehorende database-updates wilde bijwerken, kreeg ik een onverwachte fout. .../update.php => The website encountered an unexpected error. Please try again later. => clear the browser cache Dan verscheen volgende fout: In order to run update.php you need to either have "Administer software updates" permission or have set $settings['update_free_access'] in your settings.php. $settings['update_free_access'] = TRUE; Maar helaas, de update.php verschijnt niet! Dan toch verder gedaan met core: core, vender en root files verwijderd, nieuwe in de plaats gezet, en .htaccess aangepast conform nieuwe wijzigingen In order to run update.php you need to either have "Administer software updates" permission or have set In order to run update.php you need to either have "Administer software updates" permission or have set $settings['update_free_access'] in your settings.php. $settings['update_free_access'] = TRUE; http://www.muzitaal.be/drupal/update.php update.php pagina verschijnt OVERZICHT UPDATES BEKIJKEN: 32 updates beschikbaar UPDATES UITVOEREN LOG BEKIJKEN
		Vreemd is ook dat de .../drupal/core/install.php toegankelijk blijft. Wenselijk of niet? In theorie kan er niets gebeuren, maar…
31/12/2019		Nadat ik voxmago.be verhuisd had en de /drupal liet verdwijnen uit de URL, opgezocht hoe dat ook voor Drupal 8.x mogelijk is: zie Accessing Drupal 8 Installed in Subdirectory root .htaccess RewriteRule ^$ drupal/$1 [L] RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ drupal/$1 [L] /drupal/.htaccess RewriteBase /drupal /drupal/sites/default/settings.php if (isset($GLOBALS['request']) and '/drupal/index.php' === $GLOBALS['request']->server->get('SCRIPT_NAME')) { $GLOBALS['request']->server->set('SCRIPT_NAME', '/index.php'); }

Sitemap