Leaderboard

I have no idea how Tailwind works but when I need something like this I usually set a CSS variable and add them with the style attribute where needed. Something like: <?php namespace ProcessWire; ?> <div style="--color: <?= $page->color ?>"><!-- My content --></div> When I need something more complex, say a CSS animation depending on some of the page parameters (e.g. children count) then I output in a <style> element within my template.

I was browsing the requests repo and saw a request from @adrian that reminded me of a PW feature I had forgotten existed: from Page List you can open a page for editing in a modal window by long-clicking on the Edit button. This is quite handy for when you want to make a quick edit to a page. But as the request notes, it would speed things up if there was a "Save + Close" button in the modal. Until the request is actioned in the core I thought I'd try implementing it in some custom code, and it's also an opportunity to show an easy way you can add custom JS and CSS to the ProcessWire admin. The first step is to create the following files at /site/templates/admin-assets/admin-custom.js and /site/templates/admin-assets/admin-custom.css. The CSS is optional. admin-custom.js $(document).ready(function() { const $body = $('body'); const is_modal = $body.hasClass('modal') || $body.hasClass('pw-iframe'); if($body.hasClass('ProcessPageEdit') && is_modal) { const params = new URLSearchParams(window.location.search); const $save_button = $('#submit_save'); if(params.has('quick_edit') && $save_button.length) { $save_button.parent().append('<button type="submit" name="submit_save" value="Save" class="ui-button uk-hidden" id="save-and-close">Save + Close</button>'); } } if($body.hasClass('ProcessPageList') && !is_modal) { $(document).on('ajaxComplete', function() { $('.PageListActionEdit a:not([data-autoclose])').each(function() { $(this).attr('data-autoclose', '#save-and-close').attr('href', $(this).attr('href') + '&quick_edit=1'); }); }); } }); admin-custom.css /* Avoid Tracy debugbar appearing on top of modal */ .ui-widget-overlay.ui-front { z-index:40000; } .ui-dialog { z-index:40001; } /* Place modal buttons on the left rather than the right */ .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float:none; } The second step is to add the following hook to /site/ready.php One good thing about using a hook to AdminTheme::getExtraMarkup to add custom CSS is that the file gets loaded after any CSS files that are loaded by modules or the PW core, so you can override any CSS rules without needing to add extra specificity. // Add custom JS and CSS to admin $wire->addHookAfter('AdminTheme::getExtraMarkup', function(HookEvent $event) { $parts = $event->return; $config = $event->wire()->config; // JS file should exist at /site/templates/admin-assets/admin-custom.js $js_url = $config->urls->templates . 'admin-assets/admin-custom.js'; $modified = filemtime(rtrim($config->paths->root, '/') . $js_url); $parts['head'] .= "<script type='text/javascript' src='$js_url?m=$modified'></script>"; // CSS file should exist at /site/templates/admin-assets/admin-custom.css $css_url = $config->urls->templates . 'admin-assets/admin-custom.css'; $modified = filemtime(rtrim($config->paths->root, '/') . $css_url); $parts['head'] .= "<link rel='stylesheet' href='$css_url?m=$modified'>"; $event->return = $parts; }); The end result:

Hi @ngrmm Thank you so much. Your information and reference link helped to me. it is worked perfectly.

@SIERRA i think repeater items are actually pages. They are somewhere down the site tree branch of the admin page. So you could change the select field in your Test2 Repeater into a page reference field first Then you would use a hook to make those pages be selectable. Maybe it's even possible through the page reference, look here:

Hello folks! ? First of all... I'm not a PHP developer, so this project is quite challenging. Please don't be too hard on me. ? Over the last weeks i was working on my very first module, which should provide an appointment booking function including a calendar in the frontend and create all the necessary pages. You can manage locations, employees, services and bookings. Currently the dependencies for the frontend are jQuery, jQuery validate, Bootstrap 5 (only design and error toast) and twig template. This is how it currently looks like. Frontend: Backend: It's actually only meant to be a fun project and i am not sure if i will ever finish it. However maybe at some point i will just make a public github repository. As far as I know, there is no such module yet and I think it could be very helpful for some. If i have the time and motivation... this is still on my to do list: Frontend: Functionality to select "any" employee and show free timeslots accordingly Day not selectable / blocked if no timeslots available Check if timeslot is still free on form submit (to avoid double bookings) Backend: Add working times in backend (currently static array in the code) Add selection for holidays (for location or in general and for employees, currently as static array in the code) Functionality to send email to the user if the booking is rejected or accepted Selection of weekdays that should always be blocked

The TailwindCSS JIT compiler scans the source code rather than the html output, so it's looking for full class names in your PHP code. Hence you could do something like this: <?php namespace Processwire; $bg = $page->bgSetting === "success" ? "bg-green-500" : "bg-red-500"; ?> <div class="mt-4 max-w-md <?= $bg ?>"> Lorem ipsum dolor sit amet consectetur adipisicing </div> Or you could simply fake safelisting the expected values, e.g. in a comment if you just have a few you want to make available in a template: <?php namespace Processwire; $bg = $page->bgSetting === "success" ? "green-500" : "red-500"; /** safelist values: bg-red-500 bg-green-500 bg-blue-500 */ ?> <div class="mt-4 max-w-md bg-<?= $bg ?>"> Lorem ipsum dolor sit amet consectetur adipisicing </div> As long as the full string of the class name is in the code, it will get compiled by TW (use spaces between if you're using this method though, as if you were adding classes directly). (Of course there's also Tailwind's safelist setting in the tailwind.config file: https://tailwindcss.com/docs/content-configuration#safelisting-classes) Ian.

That is an interesting idea to handle fetching data. Would you mind showing us a short code example? I am planning to do the same in a project. Besides from that the the page you built is very avant-garde! It's kind of cool to see that designers go unusual and experimental ways in webdesign. It reminds me of the early days of the internet. Bedsides from that I have to admit - I also had my struggles understanding how navigating this website actually works ?

I should give you guys an early access to our websites in the Beer Garden lol Thank you though for the valuable feedbacks, it’s the kind of things you can have a hard time to see once you’re deep into projects with unconventional design: you get used to it and think it’s “understandable” enough. I went ahead and made the grey text darker and I’ve displayed the title in the center when you hover the outer strands. I also increased the contrast when hovering these. I hope this will do. Please don’t look at my code ?