Frontpage

Disable Nextcloud twofactor auth (TOTP Provider)

Nextcloud login, red lock, shocked emoticon

So.. currently it seems there is a bug with the TOTP provider, maybe in combination with the Google Authenticator app, idk.

JTL Shop 4 LESS Kompilierung ohne EVO Theme Editor

Einerseits ist das JTL Plugin "EVO Theme Editor" sehr praktisch, um ohne Entwicklungsumgebung kurz eine Änderung zu machen, andererseits für die Entwicklung von Themes / Templates von Grund auf eine ziemliche Quälerei. Einfach weil die Handhabung auf Dauer zu umständlich ist und ein 'richtiger' & personalisierter Code Editor dem eingesetzten ACE Editor eben doch stark überlegen ist.

Dieser Thread schafft Abhilfe: https://forum.jtl-software.de/threads/auto-compiling-von-themes-less.118...

Ich schenke mir an dieser Stelle alles wiederzukäuen, was wir dort schon beschrieben haben. Grundsätzlich wird ein eigener LESS Compiler im (Child)Template Verzeichnis hinterlegt, eine Option zur Aktivierung in den Template Settings ergänzt und in der functions.php wird dem Ganzen dann Leben eingehaucht.

Fix blurry skewed pseudo elements (before & after) in Firefox

Fix blurry skewed pseudo elements (before & after) in Firefox

Problem: I have some buttons with one skewed side using skewed, absolute positioned pseudo element. In Firefox the pseudo element (::before) looks blurry and the blur overlaps the parent element, so it looked really bad.

Solution: After a failed Google search i tried to fix it on my own. The simple solution is: Add transform: skew(0) to the parent element.

.btn{ position: relative; z-index: 1; background-color: blue; transform: skew(0); /* FIX */ } .btn::before{ content: ""; background-color: blue; position: absolute; top: 0; bottom: 0; right: -6px; z-index: -1; width: 18px; transform: skew(6deg); }

Manually loop through blocks in a region.html.twig

UPDATE 2: It turns out that the elements array is not reliable available. So i've decided to put the .row wrapper in the region.html.twig and add the cell classes per region in the .theme file. This kinda sucks, but i currently see no other way to ensure the cell / column classes are added in a specific region.

$variables['block_region'] = $block->getRegion(); // Define block wrappers per region if($variables['block_region'] == 'header'){ $variables['attributes']['class'][] = 'cell'; $variables['attributes']['class'][] = 'shrink'; }

You can also archive this manually by using fences for blocks. But if you or someone else forget to add the class, it will rseult in layout issues.

UPDATE: Don't do this. This causes an error, blocks randomly not printed out till you clear the drupal cache again. I will do further research on this later.

Keyframe animation is not starting in Safari

Lately i was running into an Safari issue - what happens really often lately, i really start to fall in love with this "amazing" piece of software.

Whatever - the thing is, you may come to the idea to define all of your animation properties and set it to animation-play-state:paused. So you can simply trigger the animation with help of an equal class, lets say .play{ animation-play-state: running; }.

This is working great in all current major browser - except Safari (and of course IE .. but .. who cares).

The simple workaround is: Add the animation-name in the "moment" you triggered the animation-play-state: running before. So you have to implement it this way:

.play{    animation-play-state: running;}.my-animation-name.play{    animation-name: 'my-animation-name';}

Maybe this way we could also skip the animation-play-state property completely, but i've not tried though.

Typesetter Contact Form released

webks Typesetter Contact Form Plugin

We have just released our first bigger Typesetter CMS Plugin. It's a highly configurable contact form section, where you can add multiple types of fields, send (HTML) Mails to the administrator and the submitter (optional).

The whole markup and class structure is based on Bootstrap 3, so if you already use a Bootstrap theme, you can install it and you're ready to go. If you won't use Bootstrap you have to implement your own styles.

Currently it's just a "type" inside the CustomSections Plugin, which you have to modify a little, please find detailed instructions on Github: https://github.com/webksde/Typesetter-Custom-Sections--Contact-Form

CSS Object-Fit ♥♥♥

I first heard of the object-fit attribute a couple of month ago and i make extensive use of it since this 'magic moment'. It's just so freaking helpfull for RWD that i won't miss it anymore.The worse thing about it, like most new techniques, some major browsers do not support it. It's just the IE & Edge ... so from my personal point of view i give a shit about this browsers. But as web professionals - sadly - we have to care about those.So i found a nice workaround which will work in all Browsers supporting the background-size property.It's pretty simple: In JavaScript, use modernizr to detect missing object-fit support, read out the image path, set the image as background to the parent container. The rest ist just a little css.

Make Firefox and Firefox Development Edition running together (64-Bit)

Firefox and Firefox Development Edition

After upgrading my Firefox and Firefox Development Edition to 64-Bit, i was no longer able to start them at the same time. Trying this will result in a message like "Firefox is already running but not responding".

Today i found the solution on the Mozilla support page - but only inside the google cache, because the topic is no longer available for some reason, so i publish it this way again.

Using Gulp-SFTP with Pageant (on Windows)

I tried multiple ways, pointing directly to the keyfile, etc. - everything fails or was not very practical.

Typesetter CMS: Create a reusable object, structured with page manager

Let's say you want to add a "call to action"-section beyond the content which is usable inside the template.