Recently Browsing 0 members
No registered users viewing this page.
By Peter Knight
I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.
You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.
The main column in the above URL is successfully centered in most browsers except IE11.
On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.
Here's a simple CodeKit and JSFiddle of the issue
Inspired by this thread with a little nugget based on AOS by @benbyf to visually distinguish development systems from production ones, I wrote a small module that does the same and lets you adapt colors and text.
Link to the github repo:
Version 0.0.1 is still very alpha and only tested on PW 3.0.124.
This module lets you change the color for the top toolbar and add a small piece of text for development systems, so you are immediately you aren't working on production (and vice versa). The adaptions are made through pure CSS and applied if either the "Enable DEV mode" checkbox in the module's configuration is checked or the property $config->devMode is set to true in site/config.php.
Works with Default, Reno and Uikit admin themes (though probably needs a lot of testing with different versions still).
Since a screenshot says more than thousand words...
Production system (unchanged):
Dev system (Default admin theme):
Dev system (Reno admin theme):
Dev system (Uikit admin theme):
Feel free to leave any feedback here and report any problems either in this thread or the github issue tracker.
Hi everyone, here's the problem I'm trying to solve.
I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:
Home Config Aesthetics Colours Red Field: Custom Label - "Red" Field: Class name - "theme--red' Green Field: Custom Label - "Green" Field: Class name - "theme--green' Blue Field: Custom Label - "Blue" Field: Class name - "theme--blue' etc... Sizes Small Field: Custom Label - "Small" Field: Class name - "sm' Medium Field: Custom Label - "Medium" Field: Class name - "md Large Field: Custom Label - "Medium" Field: Class name - "lg" etc... Icons Target Field: Custom Label - "Hands shaking Icon" Field: Icon SVG - "[svg code]' Target Field: Custom Label - "Target icon" Field: Icon SVG - "[svg code]' Success Field: Custom Label - "Happy face icon" Field: Icon SVG - "[svg code]' etc... HOW I USE THIS
I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.
This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.
I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.
Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:
Navy Blue Deep Blue Bright Blue Sea Blue ... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.
Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:
Hands shaking icon Target icon Happy face icon Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.
I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.
Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?
Thank you in advance for anyone who's read this far and has any words of wisdom!
The basic Processwire workflow assumes that I (as an Editor) want to save new Pages in draft mode - and therefore new pages are always set to unpublished by default. To publish the page, it is necessary to actively press "Publish", otherwise the Page will not be visible.
The workflow is:
Add new Page Status is now "Unpublished: Not visible on site." Press Publish - the page is now visible on site I want to publish pages right away (without having to press Publish).
Where is that configured?
Uikit v3 admin theme (0.3.0)
I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
I have found the following resources:
https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?