Chris Bennett

Many thanks @BillH, I will certainly investigate that thread further, it expands on some of the snippets I tried unsuccessfully along the way. In the meantime, I lucked upon the thread below, thanks to Bernard posting, which got me a lot further along the path. Still experimenting, with a fair degree of success so far, but not yet ready to claim it is "solved". Enjoying learning more as I go. Module I am playing around with - mainly to force myself to learn more about how everything really works - is an attempt to recreate what I am already using (via normal admin page, a couple of fields with a nifty preview/review using RuntimeMarkup and a couple of php templates). It generates favicons from svg right the way through (unlike realfavicongenerator), with a fallback for pngs and all the necessary markup, manifest, browserconfig etc. Similar to realfavicongenerator (which I have long loved), but tweaked according to my personal wishlist. Could accomplish what is *needed* pretty easily, but would really like to add some polish for clients. Also so they can easily see what we have done and/or do that stuff themselves ? The php templates I am currently using simply by accessing the normal hidden admin page automatically generate: svg favicons for current gen browsers (if svg source provided) black safari pinned tab mask icon and white mstiles (if svg silhouette provided) automatic mask icon with required safe space for webmanifest automatic cropping of svgs/pngs so small icons can use the whole 16x16 or 32 x32 - because 3 or 4 px makes a big difference when you only start with 16 generation of webmanifest and browserconfig frontend markup for inclusion that basically just checks if the right file exists and plonks in the correct markup if it does Was a little surprised it seemed to work well. No zip files, no code, no third parties, plonk new sources in, click generate new, check results and done. Lots more previews/config options I could/will add but figured it might be wise to work out any inevitable kinks with implementation of a module along these lines within the api before I got carried away too much more.

Thank you @bernhard, @adrian and @kixe for this thread and the very timely thank-you note from Bernard that pointed my in a far more productive direction with regards to my question from yesterday: Had been playing around with hooks to try to achieve my goals but this has made things a whole lot better and a whole lot easier. I kinda figured there had to be a way to hook into the form build process, but without this thread I would have remained lost for much longer as I played around the edges. My very grateful appreciation to all!

Hi all, I am going round and round in circles and would greatly appreciate if anyone can point me in the right direction. I am sure I am doing something dumb, or missing something I should know, but don't. Story of my life ? Playing round with a module and my basic problem is I want to upload an image and also use InputfieldMarkup and other Inputfields. Going back and forth between trying an api generated page defining Fieldgroup, Template, Fields, Page and the InputfieldWrapper method. InputfieldWrapper method works great for all the markup stuff, but I just can't wrap my head around what I need to do to save the image to the database. Can generate a Field for it (thanks to the api investigations) but not sure what I need to do to link the Inputfield to that. Tried a lot of stuff from various threads, of varying dates without luck. Undoubtedly not helped by me not knowing enough. Defining Fieldgroup etc through the api seems nice and clean and works great for the images but I can't wrap my head around how/if I can add/append/hook the InputfieldWrapper/InputfieldMarkup stuff I'd like to include on that template as well. Not even sure if it should be where it is on ___install with the Fieldtype stuff or later on . Not getting Tracy errors, just nothing seems to happen. If anyone has any ideas or can point me in the right direction, that would be great because at the moment I am stumbling round in the dark. public function ___install() { parent::___install(); $page = $this->pages->get('name='.self::PAGE_NAME); if (!$page->id) { // Create fieldgroup, template, fields and page // Create new fieldgroup $fmFieldgroup = new Fieldgroup(); $fmFieldgroup->name = MODULE_NAME.'-fieldgroup'; $fmFieldgroup->add($this->fields->get('title')); // needed title field $fmFieldgroup->save(); // Create new template using the fieldgroup $fmTemplate = new Template(); $fmTemplate->name = MODULE_NAME; $fmTemplate->fieldgroup = $fmFieldgroup; $fmTemplate->noSettings = 1; $fmTemplate->noChildren = 1; $fmTemplate->allowNewPages = 0; $fmTemplate->tabContent = MODULE_NAME; $fmTemplate->noChangeTemplate = 1; $fmTemplate->setIcon(ICON); $fmTemplate->save(); // Favicon source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFavicon'; $fmField->label = 'Favicon'; $fmField->focusMode = 'off'; $fmField->gridMode = 'grid'; $fmField->extensions = 'svg png'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Favicon Silhouette source $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeImage"); $fmField->name = 'fmFaviconSilhouette'; $fmField->label = 'SVG Silhouette'; $fmField->notes = 'When creating a silhouette/mask svg version for Safari Pinned Tabs and Windows Tiles, we recommend setting your viewbox for 0 0 16 16, as this is what Apple requires. In many cases, the easiest way to do this in something like illustrator is a sacrificial rectangle with no fill, and no stroke at 16 x 16. This forces the desired viewbox and can then be discarded easily using something as simple as notepad. Easy is good, especially when you get the result you want without a lot of hassle.'; $fmField->focusMode = 'off'; $fmField->extensions = 'svg'; $fmField->columnWidth = 50; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon(ICON); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($fmField); // Create: Open Settings Tab $tabOpener = new Field(); $tabOpener->type = new FieldtypeFieldsetTabOpen(); $tabOpener->name = 'fmTab1'; $tabOpener->label = "Favicon Settings"; $tabOpener->collapsed = Inputfield::collapsedNever; $tabOpener->addTag(MODULE_NAME); $tabOpener->save(); // Create: Close Settings Tab $tabCloser = new Field(); $tabCloser->type = new FieldtypeFieldsetClose; $tabCloser->name = 'fmTab1' . FieldtypeFieldsetTabOpen::fieldsetCloseIdentifier; $tabCloser->label = "Close open tab"; $tabCloser->addTag(MODULE_NAME); $tabCloser->save(); // Create: Opens wrapper for Favicon Folder Name $filesOpener = new Field(); $filesOpener->type = new FieldtypeFieldsetOpen(); $filesOpener->name = 'fmOpenFolderName'; $filesOpener->label = 'Wrap Folder Name'; $filesOpener->class = 'inline'; $filesOpener->collapsed = Inputfield::collapsedNever; $filesOpener->addTag(MODULE_NAME); $filesOpener->save(); // Create: Close wrapper for Favicon Folder Name $filesCloser = new Field(); $filesCloser->type = new FieldtypeFieldsetClose(); $filesCloser->name = 'fmOpenFolderName' . FieldtypeFieldsetOpen::fieldsetCloseIdentifier; $filesCloser->label = "Close open fieldset"; $filesCloser->addTag(MODULE_NAME); $filesCloser->save(); // Create Favicon Folder Name $fmField = new Field(); $fmField->type = $this->modules->get("FieldtypeText"); $fmField->name = 'folderName'; $fmField->label = 'Favicon Folder:'; $fmField->description = $this->config->urls->files; $fmField->placeholder = 'Destination Folder for your generated favicons, webmanifest and browserconfig'; $fmField->columnWidth = 100; $fmField->collapsed = Inputfield::collapsedNever; $fmField->setIcon('folder'); $fmField->addTag(MODULE_NAME); $fmField->save(); $fmFieldgroup->add($tabOpener); $fmFieldgroup->add($filesOpener); $fmFieldgroup->add($fmField); $fmFieldgroup->add($filesCloser); $fmFieldgroup->add($tabCloser); $fmFieldgroup->save(); /////////////////////////////////////////////////////////////// // Experimental Markup Tests $wrapperFaviconMagic = new InputfieldWrapper(); $wrapperFaviconMagic->attr('id','faviconMagicWrapper'); $wrapperFaviconMagic->attr('title',$this->_('Favicon Magic')); // field show info what $field = $this->modules->get('InputfieldMarkup'); $field->name = 'use'; $field->label = __('How do I use it?'); $field->collapsed = Inputfield::collapsedNever; $field->icon('info'); $field->attr('value', 'Does this even begin to vaguely work?'); $field->columnWidth = 50; $wrapperFaviconMagic->add($field); $fmTemplate->fields->add($wrapperFaviconMagic); $fmTemplate->fields->save(); ///////////////////////////////////////////////////////////// // Create page $page = $this->wire( new Page() ); $page->template = MODULE_NAME; $page->parent = $this->wire('pages')->get('/'); $page->addStatus(Page::statusHidden); $page->title = 'Favicons'; $page->name = self::PAGE_NAME; $page->process = $this; $page->save(); } }

See, more thanks needed :) Love your work Robin

Thank you Robin S, I find myself continually (eventually) finding the answers I am looking for with your name attached. Many thanks! Had gone round and round using the wrong method for the job I wanted. In my case, was just trying to clean up fields added by a module generated page I was playing with. Deleting api generated page, templates and fieldgroups was very easy but kept on bumping up against deleting the fields. Finally realised I could just set a tag on them, but kept using the (very wrong) getTags() method instead of the delightfully easy find('tags=...). Knew I was doing something wrong and when I eventually found your advice was acting as expected in minutes. public function ___uninstall() { parent::___uninstall(); $page = $this->pages->get('name='.self::PAGE_NAME); if ($page->id) { $page->delete(); } $addedTemplate = $this->templates->get(MODULE_NAME); if ($addedTemplate) { $this->templates->delete($addedTemplate); } $addedFieldgroup = $this->fieldgroups->get(MODULE_NAME.'-fieldgroup'); if ($addedFieldgroup) { $this->fieldgroups->delete($addedFieldgroup); } $addedFields = $this->wire->fields->find('tags='.MODULE_NAME.''); foreach($addedFields as $addedField) { $field = $this->wire->fields->get($addedField); $this->wire->fields->delete($field); }

I use this approach for breadcrumbs with built in structured data to help Google etc know what is going on. Could definitely generate separate json to do the same but I kinda like doing it once and not worrying. It's nothing fancy, just building on the default sample function. Mainly adds extra schema stuff and the current page, in an <ol> for semantics and accessibility. Rather than a function, I often just plonk it in my default where I want the breadcrumbs, surrounded by an if to see if I want to display them or not. <nav class="breadcrumbs" aria-labelledby="breadcrumblist"> <h2 id="breadcrumblist" class="visually-hidden">Breadcrumbs</h2> <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <?php // Display breadcrumbs in a Google-friendly aria-compliant microdata format $count = 0; // count link depth foreach($page->parents() as $item) { $count++; // output parent pages, links and schema breadcrumb info echo'<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="' . $item->url . '"><span itemprop="name">' . $item->title . '</span></a> <meta itemprop="position" content="' . $count . '"></li>'; } // output the current page as the last item $count = $count+1; echo'<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <link itemprop="item" href="' . $page->url . '"> <span itemprop="name" aria-current="page">' . $page->title . '</span> <meta itemprop="position" content="' . $count . '"></li>'; ?> </ol> </nav> After that, touch of CSS and you're ready to go. Correct breadcrumb data and order reported with Structured Data Testing Tool and Rich Results Test.

Plenty of posts on the forum relating to Content Security Policy (CSP) and how to integrate it with Processwire. It's not too hard to implement a decent htaccess CSP that will get you a solid B+ at Mozilla Observatory. If you're after A+ it's a little harder because of all the back-end stuff... until you realize it's surprisingly easy. After a lot of testing, the easiest way I found was to specify only what is needed in the htaccess and then add your required CSP as a meta in your page template. Plenty of people have suggested similar. Works very easily for back-end vs front-end, but gets complicated if you want front page editing. Luckily, a little php will preserve back-end and front page editing capabilities while allowing you to lock down the site for anyone not logged in. None of this is rocket science, but CSPs are a bit of a pain the rear, so the easier the better, I reckon ? The only CSP I'd suggest you include in your site htaccess is: Header set Content-Security-Policy "frame-ancestors 'self'" The reason for this is you can't set "frame-ancestors" via meta tags. In addition, you can only make your CSP more restrictive using meta tags, not less, so leaving the back-end free is a solid plan to avoid frustration. Then in your public front-facing page template/s, add your desired Content Security Policy as a meta tag. Please note: your CSP should be the first meta tag after your <head>. For example: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="Your CSP goes here"> <!-- followed by whatever your normal meta tags are --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no"> If you haven't got Front Page Editing enabled, this works fine by itself. Just one extra step is needed to make sure you don't have to worry either way. The easiest way I found to allow both CSP and front page editing capabilities is the addition of a little php, according to whatever your needs are. Basically, if the user is a guest, throw in your CSP, if they're not do nothing. It's so simple I could have kicked myself when it finally dawned on me. I wish it had clicked for me earlier in my testing, but it didn't so I'm here to try to save some other person a little time. Example: <!DOCTYPE html> <html> <head> <?php if ($user->isGuest()): ?> <meta http-equiv="Content-Security-Policy" content="Your CSP goes here"> <?php endif; ?> <!-- followed by whatever your normal meta tags are --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no"> If you want it a bit more involved then you can add additional tests and be as specific as you like about what pages should get which CSP. For example, the following is what I use to expand the scope of the CSP only for my "map" page: <?php $loadMap = $page->name === "map"; ?> <!DOCTYPE html> <html> <head> <?php if ($user->isGuest()): ?> <meta http-equiv="Content-Security-Policy" content="default-src 'none'; base-uri 'self'; manifest-src 'self'; form-action 'self'; font-src 'self' data: https://fonts.gstatic.com; frame-src 'self' https://www.youtube.com; img-src 'self' data:<?php echo ($loadMap) ? " https://maps.googleapis.com https://maps.gstatic.com" : ""; ?> https://www.google-analytics.com; script-src 'self' <?php echo ($loadMap) ? "https://maps.googleapis.com " : ""; ?>https://www.google-analytics.com https://www.googletagmanager.com; style-src 'self' <?php echo ($loadMap) ? "'unsafe-inline' https://fonts.googleapis.com" : ""; ?>"> <?php endif; ?> Hope this saves someone a little time testing. https://observatory.mozilla.org/analyze/bene.net.au

Sorry, I realized after sending that your pen had already done exactly that. My apologies and nice work!

No worries mate. Yep, the label I added was just an addition for resizing the label and to ensure alignment, as I wasn't sure what other CSS was acting on it. You are spot on with needing to over-ride the .uk-checkbox:checked but it should be nice and easy with specificity because the attribute selector [type="checkbox"] should trump the class selector. Just add background-image:none and it should clear up the problem; input[type="checkbox"]:checked { border-color: #3eb998; background-color: #3eb998; background-image:none; }

Sorry about delay, the curse of living in the Southern Hemisphere ? I'm not seeing anything too weird when setting label and checkbox to 0.85em on @LostKobrakai's example but it may be influenced by other CSS. If it's the alignment of the span in relation to the you toggle, you could add a little CSS for the label. Depending on your needs you might want to add a class to the label to limit it to your toggle. Either way, something along the lines of: label {display:flex;align-items:center;font-size:0.85rem;} and input[type="checkbox"] {font-size:0.85em; ...should make it smaller and align the text in the middle.

@flydev's solution should do the trick for you, nice and clean, unlike the uikit one that had to negotiate the specificity issues inherent with uikit. If not I am happy to take a look for you.

0.0.4 is the one that worked for me, before that not so much. I believe it is from here rather than the master branch featured in the modules directory: https://github.com/kongondo/FieldtypeRuntimeMarkup/tree/dev

No worries Psy, give me a minute to look-see what I have and try to track down where I got it

Are you using the dev branch RuntimeMarkup version? That one worked like a charm for me once I thought to try it instead.

Absolutely Craig, it's not the actual typeface I dislike, just the occasional (maybe baseline related?) vertical alignment issues that make it act that little bit differently from all the rest. Generally makes no difference to display, but every now and then will bite you out of the blue when you try to do something that should be easy.

I quite like sites that use the system font stack, with the exception of Segoe UI which doesn't really behave like the rest. For example, every Twitter button which defaults to Segoe for me looks off, with text dropped well below the vertical centre. Just the nature of Segoe and not a huge deal, but I usually leave it out or replace it with something that plays nicer with the rest and is reasonably likely to be in cache, like Roboto. Speaking personally, I would even prefer a boring Arial than a weirdly aligned Segoe every day of the week.

Weird one relating to the Docs dropdown not behaving. Win7 here, can reproduce the aligning left at certain zoom levels, not at others. The weird part is if I change fonts to /?font=roboto, the issue disappears. Not sure why or what that means. Raleway, for example, exhibits the same problem with unwanted left align.

Little thing, but #content2 seems to be (at least partially) responsible for the unwanted horizontal scrollbar at widths below 1600px. Specifically, if margin-right: -40px; is commented out in .blog-posts, the unwanted scrollbar disappears, consistent with it being overwritten to 0 at the 1600px breakpoint.

This is true, but would surely also be true of every uikit theme and alternative theme, everywhere, including the processwire default admin theme. If they radically changed all the hooks then wouldn't everything need to be altered accordingly anyway? Personal opinion only, of course, but in this respect I quite like just unobtrusively overriding what is there, because even if every hook suddenly and dramatically changed overnight, the default would still work as expected.

Oh, absolutely Bernhard. We're largely doing a similar thing in different ways, I'm just going old-school, no-compiler CSS override driven by php variables outputting as CSS. I have no intention of touching anything beyond the variables at the top unless I need to down the track to add something else ? $font_family = ''; // Sets font-family. Defaults to "-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;" if none provided, because segoe sucks :) $html_bckgndcolor = '#1b2836'; // Background color, also used by masthead and footer if no over-rides are provided for them. Defaults to #e5e5e5 if none provided. $html_color = ''; // Text color for document. Defaults to "#354b60" if none provided. $body_bckgndcolor = '#C1C1C1'; // Background color of body, the area not covered by masthead, footer and possible extra space at bottom of footer. Defaults to "#eee" if none provided. $link_color = ''; // Link color. Defaults to "#009cd6" if none provided. $linkhover_color = ''; // Link hover color. Defaults to "#15BFFF" if none provided. $masthead_bckgndcolor = ''; // Overrides $html_bckgndcolor for masthead background, if required $masthead_minheight = '30'; // Minimum pixel height of masthead. Defaults to "55" if none provided. Anything much under 20 is tiny and over 73 will trigger mobile view. $footer_bckgndcolor = ''; // Overrides $html_bckgndcolor for footer background, if required $spacesave_heading = '1'; // Page Heading tucks beside breadcrumbs and margins altered $currentpage_color = '#FFF'; // Sets color of current page text, Defaults to uikit default if not set. $button_bckgndcolor = '#228B22'; $button_bckgndcolor_hover = '#176117'; $button_bckgndcolor_active = '#64ad64'; $button_radius = '.5'; // Sets border-radius (in rem based off root font-size) of buttons. Defaults to uikit if not set. $input_radius = '.33'; // Sets border-radius (in em based off parent font-size) of inputs. Defaults to uikit if not set. $input_bordercolor = '#e5e5e5'; // Sets border color of inputs. Defaults to uikit if not set. $input_bckgndcolor = ''; // Sets bckgnd color of inputs. Defaults to uikit if not set. $input_bckgndcolor_focus = ''; // Sets bckgnd color of inputs that are focused. Defaults to uikit if not set. $input_bordercolor_focus = '#cbd7e3'; // Sets border color of inputs that are focused. Defaults to uikit if not set.

Absolutely mate, but having done a pretty deep dive into the uikit theme over the last few weeks it is - surprisingly - not as difficult as it would first seem when I started wading through 14000 or so lines of unminimized CSS to get an idea of what was going on ? Basically you can just bunch a heap of CSS overwrites together and use the single variable like your example video, which is very cool. To be honest, there's stuff in uikit that could be bunched together more anyway, but generally speaking there's not too much difficulty targeting what you need because most of the styling is tied together pretty logically so it ends up working much like your example. I should have said earlier, I love your idea and it is something I have kind of been working towards with my experiments. I can't help but want to play with stuff, it's just the way my brain works. Took it a step further today prompted by this - and because any time I open my mouth I instantly want to make sure I can actually deliver on my suggestions - and can pretty comprehensively change the skin with around 25 php variables (so far) for less than 30kb in a completely uncompressed php file. As you would imagine, it is still very much a work in progress but had a pleasant amount of forward momentum. Naturally it wasn't from a standing start, as I have been playing around with my custom admin css for quite a few weeks now so had already "collected" a lot of the CSS I needed to target over that time. The beautiful thing for me - now I have finally taken the plunge - is I can more easily change stuff myself with what is essentially a config section at the top of my php/css file, which could definitely draw from the backend. Random example below plucked from the file, setting radius, backgrounds and borders (if desired) on all input items, defaulting to uikit if nothing specified. Once I have setup all the variables similar to this, I don't intend to look past the top section again ? .Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank), .Inputfields textarea:not(.uk-form-blank), .Inputfields select.uk-select:not(.uk-form-blank), .cke_chrome {<?php echo $input_radius ? 'border-radius:' . $input_radius . 'em;' :''; ?>} .cke_chrome {overflow:hidden;} li#Inputfield_navigation_order .Inputfields.uk-grid {border-radius: .5em;} .Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank), .Inputfields textarea:not(.uk-form-blank) { <?php echo $input_bckgndcolor ? 'background-color:' . $input_bckgndcolor . ';' :''; ?> } .Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank):focus, .Inputfields textarea:not(.uk-form-blank):focus { <?php echo $input_bckgndcolor_focus ? 'background-color:' . $input_bckgndcolor_focus . ';' :''; ?> <?php echo $input_bordercolor_focus ? 'border-color:' . $input_bordercolor_focus . ';' :''; ?> box-shadow: 0 0 .5em rgba(0,0,0,0.2) }

Sorry if this seems naive, but wouldn't the easiest way to re-skin parts of the admin be to simply leave the compiled default files alone and use the Cascading part of CSS? $config->styles->add() in admin.php has been like magic for me and has made my experimentation with custom styling much easier. If desired, you could generate the css based on your desired backend variables, similar to CSS variables.

Sorry flydev, not at the moment. I am an old-school, banging-rocks-together, CSS kinda dude, so am not experienced with compilers in general, yet. I get why they are very useful, I just haven't *needed* to use them in the past. It is something I plan to work towards with processwire after many years of static sites.. Using variables are starting to make great sense. It's still very much a work in progress and is not very fancy or tricky, so it should be able to slot in somewhere without much hassle.

Didn't realise I wouldn't be able to edit the original post with inevitable tweaks and changes. Whoops, sorry about that. Below is an extended version dealing with a few more common admin backend use cases. .uk-form-controls-text label:only-of-type input.uk-checkbox, .Inputfield input[type=checkbox].uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius:3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink:0; } p.template-checkboxes input[type=checkbox].uk-checkbox { font-size:.6rem; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after, .Inputfield input[type=checkbox].uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked, .Inputfield input[type=checkbox].uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after, .Inputfield input[type=checkbox].uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span, .Inputfield input[type=checkbox].uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type, .InputfieldCheckboxes table label, .uk-form-controls .InputfieldCheckboxes ul li label { display: flex; } label:only-of-type input.uk-checkbox + span, .Inputfield input[type=checkbox].uk-checkbox + span { color: #c3c3c3; display: flex; width: 100%; max-width: 22em; align-items: center; justify-content: space-between; line-height: 1.1; } label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }

Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies. So here is my humble offering, rough and ready, which can be thrown in at the bottom of your Uikit css as a starting point. Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size. It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently. .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }