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 in the last time, i really fell in love with this piece of ****.
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 every current major browser - except Safari (and of course IE .. but .. who still 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';}
Typesetter Contact Form released
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 again (64-Bit)
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)
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.
Smart Sticky Sidebar via hcSticky
If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar ... try https://github.com/somewebmedia/hc-sticky
Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.
Smooth scrolling anchor links and hash url's - also base tag fix
This solution is also very usefull on pages with -Tag. Sometimes the basetag will make anchor links not working properly anymore (redirecting to the base url).
- 1 von 8
- ›
