Leaderboard

@jacmaes To remove all in an existing parent (i.e. Align), you can add: #Align { display: none } To add custom styles at the root level, omit a #Parent. So to add "Red text" at the root level, add: span.red-text { color: red } /* Red Text */ To add your own custom parent at the root level, specify it as the #Parent for any items you want to add within it, i.e. here's how we add a parent named "Hello": #Hello span.blue-text { color: blue } /* Blue Text */ #Hello p.outline { padding: 20px; border: 1px dotted #ccc } /* Outline paragraph */ I prefer the single line rules, but it's also fine if you want to use multi-line rules: #Hello p.outline { /* Outline paragraph */ padding: 20px; border: 1px dotted #ccc; }

While not "most of them" but surely a lot of them, so I agree that our options are limited. I'm not keen on Font Awesome icons, btw. I guess they can be downloaded and actually be bundled with the core, but I cannot find an easy way being offered to do that. https://github.com/google/fonts What I found is this: Download All Google Fonts You can download all Google Fonts in a simple ZIP snapshot (over 1GB) from https://github.com/google/fonts/archive/main.zip Another option is this, for example: https://icons.getbootstrap.com/

We have this kind of setup on integrations for a number of clients. It's a bit old fashioned and clunky but still seems to persist as a common way of working particularly in certain industries, e.g. fulfilment and ecommerce price lists. We have mainly used a couple of approaches. 1) Creating cloud based endpoints to which files can be sent with cloud functions (E.g. Google cloud) sitting behind them. So the relevant processing is triggered automatically when the data arrives to the endpoint. Not quite a full API but not traditional FTP either. 2) Time-based send-and-receive using SFTP and CRON tasks to trigger the processing by regularly checking for files in certain folders on the FTP servers. The biggest challenges we find are more about process and safeguarding the quality of data exchange rather than technical issues. E.g. should files be overwritten on arrival at the FTP sever? What is the naming convention for the files? What is the protocol for handling missing or overlapping data - e.g. if 2 files have a row with the same ID number should data be overwritten in your database? How are people notified if data exchange fails or there is a file parse error?

I've personally found the Font Awesome icon options for fields very limited since most are for some sort of online service. What are the chances that it could be replaced with Google Material Icons, or even a subset of them? https://fonts.google.com/icons

Hi @marie.mdna if i'm not wrong this depends on your config file $config->httpHosts var, if the first host in the array contains the www, the sitemap will use it too (at least, that's what happens for all the websites, a lot..., for which i've this module installed ? have a nice day

Hey @Spiria — just a heads-up that I have merged your post to the Menu Builder support thread. Official support thread is the best way to reach module author. Looking back to the report in 2021, it looks like that earlier report might've just gone unnoticed.

@jacmaes If you want to replace the entire styles menu on your own, you can do this with the custom JSON option (whether input or file). See the included defaults.json file "style_formats" item. But it sounds like you just want to remove a few things from the Styles dropdown. In that case, in your Module settings (or Field settings if enabled) edit the "Custom style formats CSS". The instructions there tell you how to add or remove items, but for the specific examples that you want to remove, enter this: #Align { display:none } #Blocks (Pre) { display: none } #Inline (Underline) { display: none } #Inline (Strikethrough) { display: none } #Inline (Code) { display: none } Note this option to remove items in this manner was added within the last week, so make sure you are running the latest version. Regarding the align options, I'm thinking we may just remove those since not many seem to want them, and our image plugin (pwimage) already includes the ability to assign alignment classes to images. For the Blocks tool, I think that is unrelated to the Styles tool in terms of configuration, and I don't think that it is a replacement for the Styles tool. I have built most of our configurable settings around the Styles tool since it offers a lot more flexibility in configuration. But if you want to investigate the Blocks tool further, it can be configured with the block_formats setting specified in custom JSON (input or file). What I would probably recommend instead of the Blocks tool is just to configure the Styles tool with exactly what you want. Keep in mind the parents (Blocks, Inline, etc.) are optional and you can add options to the root level if you prefer it, or create your own Parents within it.

Hello there! I recently updated my own website - I am a frontend developer living in the northern part of germany. https://www.thumann-media.de The old design has been online since five years (time flies...) and I thought that it was time to make things a bit flashier and include a better showcase of my web projects to give the user a more detailed description of the project features. It's a classic one pager design just for the sake of keeping things as short and simple as possible (I hope the image fits inside this thread). The new version of my site includes a "portolio section" where users get a sneak preview of each project I've been working on recently. It features nice fade-in-out animations powered by aos.js (animate on scroll). Also new is that every project gets a dedicated subpage where I describe some of the unique features that this website offers: I like to have some eye-catchers. I always used the animated wave theme on my website, so why not include a message in a bottle? The animation of the bottle is done via the awesome GSAP animation engine (https://greensock.com/gsap/). This is a super powerful library and I just started diving into the possibilities of this one. Tech Talk: Some of the things I used: - ProFields used for this one (repeater matrix, combo) - Frontend framework is Bootstrap 5. I had a hard time of deciding between Bootstrap and UIKit as my new go-to framework (I am bit biased though because I've been always using bootstrap since version 2). But the grid system alone makes bootstrap so flexible and powerful for me, so I will stick with it for another 10 years I think... - https://github.com/nbcommunication/PageimageSource for image srcsets with webp support - Ajax driven contact form with bootstraps frontend validation - AIOM+ for compressing the assets (CSS and JS) https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify - SEO Maestro - WireMail SMTP AOS.js vs GSAP Which animation library you should use? I discovered the GSAP library a bit too late in the development process, tough. So I am still using aos.js for some animations. AOS has a super small footprint considering its filesize (14 kb, minified) and is super easy to use and super reliable. Whereas GSAP is quite large (71kb, minified) and if you want to make use of scroll triggers you have to include a second library which adds another 40kb. AOS has lots of nice animations which come out of the box. GSAP does not offer this, you have to program those transitions yourself. So you need to spent some time, reading the docs and looking for tutorials! GSAP can do all that AOS can and beyond. If you want to have full control over everything I would advice you to give it a try. So that's all for now. I wish all of you a great weekend!

I've had to mod my UIkit to include more subdivisions for the grid. UIkit 3 also doesn't have push pull and a few other source ordering features. They sortof expect you to order and filter based on content but sometimes it is nice to be able to have content semantically and visually ordered differently. Not sure why Yootheme made this choice, as the feature existed in UIkit 2. You can do a lot of similar things with flexbox, but if folks aren't as familiar or comfortable with flexbox, it's way more complicated than how Bootstrap does it. I think UIKit decided to really enhance the flexbox usage. There isn't really an easy UIkit variation for things like .offset and .order

I liked the rendering idea for showing both desktop and mobile versions of projects. That's a really cool practical display for portfolio work. I need to think more about adding animation to sites more - the dynamics and mood it adds to sites really does make an emotional impact. Works very well in your case! GSAP is incredible. I've been playing with it in conjunction with lottie presentation and there's just a lot of cool control it offers for scrolling timeline effects. I still have folks ask about bootstrap and foundation along with uikit. I think all three have their benefits.

It's a fun topic. Look ma - no magenta exists. ? And a cool one I found in college somewhere between the bronze and iron age - creating colors that don't exist with Wendy Carlos: https://www.wendycarlos.com/colorvis/color.html Do you see color in this image? Funny, its just made up of red and grayscale pixels.

FCKEditor actually is what CKEditor was originally called. I think it was a good marketing decision to change the name to CKEditor. ? It will be interesting to see what editor IP.Board switches to, whether CKEditor 5, TinyMCE 6, some other editor, or if they just keep using CKEditor 4. Currently, this version of IP.Board uses the same exact CKEditor version as ProcessWire (4.19.0).

RockAwesome ProcessWire Fieldtype to easily choose FontAwesome Icons Usage Install the module. Set paths in the Inputfield's settings page. Add a RockAwesome field to any template (or change an existing TEXT field). Preview https://modules.processwire.com/modules/fieldtype-rock-awesome/ https://github.com/BernhardBaumrock/RockAwesome

I took @bcartier's code from this post and made a configurable module from it. EDIT: to make it work, you need to follow 2 steps (thanks to @PWaddict for pointing it out): Add a page name to the default language on the Home page On Languages Support - Page Names module at "Default language homepage URL is same as root URL?" select "No - Root URL performs a redirect to: /name/" You can find the module attached. I can confirm that the redirection to a non-default language works on PW 3.0.172 DefaultFrontendLanguage.zip

Another update - RockPdf now supports FontAwesome 5 in mPDF library ?? This works using webfonts (after I've unsuccessfully tried with SVG) and it supports resizing and coloring icons via CSS or LESS (wich didn't work when using SVG). I've updated the readme: Using FontAwesome 5 with mPDF Download a copy of fontawesome (https://fontawesome.com/download, eg Free for Web) Copy the TTF file into your /site/assets/RockPdf/fonts/ folder Add your font to your settings and start using icons in your PDFs // tracy console $pdf = $modules->get('RockPdf'); $pdf->settings([ 'fontdata' => (new \Mpdf\Config\FontVariables())->getDefaults()['fontdata'] + [ "far" => [ 'R' => "fa-regular-400.ttf", 'I' => "fa-regular-400.ttf", ], ], ]); $icon = "<i style='font-family: far;'>&#xf118;</i> "; $pdf->write($icon.'Hello World ' . date('H:i:s')); d($pdf->save()); You'll notice that we used the unicode representation of the icon. You can find all the codes on the cheatsheet (https://fontawesome.com/cheatsheet) or on the details page of the icon: https://fontawesome.com/icons/smile?style=regular Be careful to use the correct style (regular, solid, etc) and unicode! Special thx to jamesfairhurst Using metadata to get the unicode Too complicated? RockPdf comes with a helper so that you do not need to take care of all this and just use the regular fontawesome classes that you might already be familiar with! To make that work, just copy the icons.json file that is shipped with fontawesome in the metadata folder into the RockPdf assets folder /site/assets/RockPdf/fonts. // tracy console $pdf = $modules->get('RockPdf'); $pdf->settings([ 'fontdata' => (new \Mpdf\Config\FontVariables())->getDefaults()['fontdata'] + [ "far" => [ 'R' => "fa-regular-400.ttf", 'I' => "fa-regular-400.ttf", ], ], ]); $pdf->write("<style>.far { font-family: far; color: blue; }</style>"); $icon = $pdf->icon('far fa-smile'); $pdf->write($icon.'Hello World ' . date('H:i:s')); d($pdf->html()); // print content to console $pdf->save(); // save file to file system Using this technique you can easily style your icons using CSS or even LESS (when using RockLESS). Another example Unfortunately duotone icons do not work (if you know how to make them work please drop me a line!). Also styling the icons is sometimes a bit tricky - some CSS selectors work while others don't. Using classes directly on the icon worked best for me: $icons = $pdf->icon('fas fa-guitar red-2x') .$pdf->icon('far fa-guitar red-2x') .$pdf->icon('fal fa-guitar red-2x') .$pdf->icon('fad fa-guitar red-2x'); .fab { font-family: fab; } .fad { font-family: fad; } .fal { font-family: fal; } .far { font-family: far; } .fas { font-family: fas; } .red-2x { font-size: 10mm; color: red; } v2.0.1