I’ve invested some time to create a Icomoon.io Package of Fork Awesome, based on the broken SVG icons from the current Fork Awesome release (1.2.0). I have basically resized and centered them, to fit the canvas size, so some icon sizes might be not perfect.
Fork Awesome 1.2.0 · A fork of Font Awesome, originally created by Dave Gandy, now maintained by a community. Fork Awesome is licensed under SIL OFL 1.1· Code is licensed under MIT License. Documentation is licensed under CC BY 3.0.
Nova has two simple snippets to print (custom) linkgroups, this snippet prints out list items without the list wrapper.
{include file='snippets/linkgroup_recursive.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}
{include file='snippets/linkgroup_list.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}
To print out the links on your own, check out the code of those snippet templates.
In Drupal Themes its very easy to extend existing libraries using the themes .info (and .libraries) file. This ain’t possible in a Mobule .info file. So we need a hook to do this:
/**
* Implements hook_library_info_alter()
* - Extend some module libraries we support or require for MY_MODULE
*/
function MY_MODULE_library_info_alter(&$libraries, $extension) {
if ($extension == 'views_bulk_operations' && isset($libraries['frontUi'])) {
// Extend existing library views_bulk_operations/adminUi
// Important! That a library is listed by this hook, doesn't mean the library is attached, it just means its registered.
$libraries['frontUi']['dependencies'][] = 'MY_MODULE/MY_LIBRARY_NAME';
}
}
Not the first time i ran into problems with SVGs preserveAspectRatio attribute, but i can’t remember a case where Firefox handled this different from Chrome. However, lets have look at the this weird behavoir.
The goal was to build a very flexible lines-background-element with CSS-Grid:
While Chrome renders everything perfectly fine, Firefox produced this:
<div class="line-bg line-bg--middle-center-to-bottom-right">
<div class="line-bg__item line-bg__item--curve-tl"></div>
<div class="line-bg__item line-bg__item--flex-h"></div>
<div class="line-bg__item line-bg__item--flex-v"></div>
</div>
.line-bg{
--line-edge-group-size: 268px;
--line-group-size: calc(var(--line-edge-group-size) * 0.5522);
position:absolute;
left:50%;
top:50%;
right:0;
bottom:0;
display:grid;
grid-template-columns: var(--line-edge-group-size) auto;
grid-template-rows: var(--line-edge-group-size) auto;
}
.line-bg__item--flex-v{
background-image: url('line_bg_v.svg');
background-repeat: repeat-y;
background-position:0 0;
background-size: var(--line-group-size) auto;
}
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 690 25" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1, 0, 0, 0.961538, 0, 0)">
<path d="M676.115,-0L676.115,26L690.031,26L690.031,-0L676.115,-0ZM507.101,-0L507.101,26L521.018,26L521.018,-0L507.101,-0ZM338.083,-0L338.083,26L352.004,26L352.004,-0L338.083,-0ZM169.069,-0L169.069,26L182.986,26L182.986,-0L169.069,-0ZM13.916,-0L0,-0L0,26L13.916,26L13.916,-0Z" style="fill:#878787;fill-rule:nonzero;"/>
</g>
</svg>
So after testing around, with the background-size, -position, etc. the conclusion was that the SVG itself must be the problem. And it kinda was, but i’im pretty sure its a Firefox Bug with SVG + background-size. As you can see in the code, i was not trying to change the aspect-ratio in any way, i just set a fixed with + auto height for the background and let em repeat verticaly, so the preserveAspectRatio shouldn’t needed here.
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 690 25" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g transform="matrix(1, 0, 0, 0.961538, 0, 0)">
<path d="M676.115,-0L676.115,26L690.031,26L690.031,-0L676.115,-0ZM507.101,-0L507.101,26L521.018,26L521.018,-0L507.101,-0ZM338.083,-0L338.083,26L352.004,26L352.004,-0L338.083,-0ZM169.069,-0L169.069,26L182.986,26L182.986,-0L169.069,-0ZM13.916,-0L0,-0L0,26L13.916,26L13.916,-0Z" style="fill:#878787;fill-rule:nonzero;"/>
</g>
</svg>
Set preserveAspectRatio=“none“ on the SVG wrapper. Done.
Im Beispiel sind nur die für den Consent Manager nötigen Attribute definiert, für ein umfangreicheres Beispiel, kann man sich beispielsweise das Core Video OPC-Portlet ansehen (\includes\src\OPC\Portlets\Video\Video.tpl).
<div class="embed-responsive embed-responsive-16by9">
<iframe class="needs-consent youtube" data-src="https://www.youtube-nocookie.com/embed/VIDEOID"></iframe>
<a href="#" class="trigger give-consent" data-consent="youtube">Youtube Consent geben</a>
</div>
Das funktioniert so ohne weiteres Zutun, eine eigene Initialisierung o. Ä. ist nicht notwendig.
document.addEventListener('consent.ready', function(e) {
console.log('consent ready!');
});
document.addEventListener('consent.updated', function(e) {
console.log('consent updated!');
});
if (e.detail !== null && typeof e.detail.youtube !== 'undefined' && e.detail.youtube === true) {
console.log('youtube consent given');
}
Offizielle Doku (zum jetzigen Zeitpunkt nur für Plugins/PHP dokumentiert): https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_privacy/consentmanager.html?highlight=cookie#jtl-shop-consent-manager
Because i had some pain when starting development with JTL Shops new OPC, I start to collect some stuff and things here to help others.
This is pretty simple, but i think it’s currently undocumented, just add this:
{opcMountPoint id='opc_before_filter' inContainer=false}
As of now, there seems to be no function to check if a OPC-Mount Point is empty. So we need to use Smarty instead:
{* Add further OPC region *}
{capture "opc_category_top"}
{opcMountPoint id='opc_category_top'}
{/capture}
{if $smarty.capture.opc_category_top|strip|replace:' ':'' != ""}
<div class="result-wrapper-top">
{$smarty.capture.opc_category_top}
</div>
{/if}
This is only required if have an extra wrapper surrounding the mount point.
… more to come.
I’m not a big fan of Font Awesome 5, i’m sure it has an amazing feature set and stuff, but I’m completely fine with simple, working iconfonts.
However, I just wanted to drop a link to project „Fork Aswesome“, a fork of Font Awesome 3 who keeps it updated. Fantastic!
Migrating SOME notebook to a current Dell notebook (Inspiron from 2020 in this case) using Clonezilla has some pitfalls, so i decided to publish the procedre.
Hint: After this you will not be able to (re)activate RAID in the BIOS, or lets say… doing this will result in boot problems you have to solve by yourself. I stick with AHCI.
I will not go into detail how to create a Clonezilla bootstick, i just recommend my favorite tool to create those bootsticks under Windows: https://www.linuxliveusb.com.
Clone your old disc to an external USB drive using Clonezilla. I’ve cloned the whole dics instead of just the needed C: Partition, to have a full backup of the old notebook. So ..feel free to just clone the C: partition.
You need to enter the BIOS by pressing the F2 key while booting. Now select „System Configuration“, search for „SATA Operation“ and switch from RAID to AHCI, otherwise – at the moment of writing this – Clonezilla is not able to enter the local drives.
Boot to the Clonezilla stick and choose to clone just the C: partition of the clone you’ve created in step 1.
After this is done, you reboot the PC, some ..aggregating.. repair .. spinner screens will automaticaly show up. After this is done, Windows 10 will start as usal. No struggle with the bootloader or something (what will happen very likely if you override the whole disc).
The touch pad doesn’t worked well for me after the migration. Simply use Windows Update, it will install some Dell apps. Start the „Dell Update“ App, it will automaticaly install all Drivers.
An your’e done.
Es gibt bedauerlicherweise kein Plugin um das zu erreichen (vom Alleskönner Dropper mal abgesehen), daher habe ich den Templatefile über das ID Feld der CMS Seite geladen und lasse einen Fehler ausgeben wenn die Datei nicht existiert:
{extends file="../../Evo/layout/index.tpl"}
{block name="content"}
{if !empty($Link->cIdentifier) && ($Link->cIdentifier|substr:0:11 eq "custom-tpl-")}
<!-- load custom tpl: {$Link->cIdentifier}.tpl -->
{assign var="custom_tpl_file_path" value="__custom-cms-tpl/{$Link->cIdentifier}.tpl"}
{if file_exists("SERVERPFAD_ZUM_TEMPLATE/{$custom_tpl_file_path}")}
{include file=$custom_tpl_file_path}
{else}
<div class="alert alert-danger">
Datei: "{$custom_tpl_file_path}" nicht gefunden.
</div>
{/if}
{/if}
{$smarty.block.parent}
{/block}
Das ganze in der layout/index.tpl im Bereich von H1 + cContent der CMS Seiten einfügen und natürlich den Serverpfad zum template ersetzen.
For now, there is no placeholder attribute available for HTML select elements what is really bad if you need to achive some kinda reduced form styling, without field labels and stuff.
But there is a workaround, we have to add the label as the first option with a value=““. Now we want to style it like the other placeholder texts. To do so we need just a little JS & CSS:
var $placeholderSelects = $('form select');
if($placeholderSelects.children().first().is(':selected')){
$placeholderSelects.addClass('select-placeholder-option-active');
}else{
$placeholderSelects.removeClass('select-placeholder-option-active');
}
$placeholderSelects.on('change', function(){
if($(this).children().first().is(':selected')){
$(this).addClass('select-placeholder-option-active');
}else{
$(this).removeClass('select-placeholder-option-active');
}
});
The JS ensures that we just have the placeholder style / color, if the first value is selected. (Yes, i better should put this in a function …)
select{
&.select-placeholder-option-active{
color: $input-placeholder-color;
> option:not(:first-child){
color: $input-color;
}
}
}