Recommended Posts

1 hour ago, Noel Boss said:

Would love to, but it's not a priority for me right now and I don't have time. But since I documented how it works, I'm open to implement it if someone finds a way…

Same here. Maybe someone else wants to give it a try. Or I'll go for it myself when I find some time. Would also love to. And your explanations definitely help a lot to understand everything a lot quicker. Thanks!

Share this post


Link to post
Share on other sites

@maxf5 - fixing it – is an issue with AOS, release 0.5.3 does fix it.

And I've also further refined the login screens:

black-login.thumb.png.367ba1f7fae3a40e42c2bb5301e1ad4f.pngpw-login.thumb.png.6a971310bc6ed57369e92eafb2164092.pngvibrant-login.thumb.png.71806c54a7b1f390b7a5f6da70b88fa5.pngpink-login.thumb.png.4679b3a505fec272d1633daf8a380018.png

Well, I had designed colourful login screens, but did not really like them. If you still want to look at these and maybe give some feedback, you are welcome:

Spoiler

Quick question: How do you guys like these colourful login screens?

black-login.thumb.png.f5fb8783f6eb90d878046e49aed66a59.pngpt-login.thumb.png.e956eebd833b2f02c801e48896955fb9.pngvibrant-login.thumb.png.8c5e0f86f51fdc86d3e91a927a613671.pngpink-login.thumb.png.36667d73e3ed7b122a92c06e095e9e13.png

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Hey @Noel Boss, me again 🙂

I still don't get how your theme works or how you built it. Where do all those LESS files come from? I see you include a copy of UIKIT in your module including all the regular uikit less files. But there are lots of pw related LESS files in it as well:

uMCI3s5.png

Did you build those files on your own? I can't find any less files in the PW core... I've already successfully built a custom UIKIT frontend theming module where LESS parsing is done on the fly via PHP: https://screencast-o-matic.com/watch/cFXnX1Y72l

It would be great to have such an easy way of customizing the backend as well.

Share this post


Link to post
Share on other sites

Those .less files don't come pre-installed - at least not in my instances (mostly blank or multi-language profiles).

So... I don't think you messed anything up while searching for the files.

Share this post


Link to post
Share on other sites

AAAAh 🙂 Now I understand. That's the github version of the admin theme and the shipped version in the core is different. Thx for clarifying!

  • Like 1

Share this post


Link to post
Share on other sites

Thx again @wbmnfktr I tried that approach today and created a new thread that might be interesting for some others here as well:

 

  • Like 2

Share this post


Link to post
Share on other sites
20 hours ago, Noel Boss said:

Did you miss the readme or did I mess up and should make anything more clear there? 

Everything fine now, thx.

Share this post


Link to post
Share on other sites

Just wanted to let you guys know that I've just released my new module that we've discussed here:

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.
      The website was build with help of the framework UIkit.
      www.musik.stadtkirche-pforzheim.de
       
      Features:
      Events Download dates  
      Events

      The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.
       
      Download dates

      It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.
       
      Modules used:
      Email Obfuscation (EMO) Front-End Page Editor Import Pages from CSV Markup Sitemap XML ProCache Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
       
    • By SwimToWin
      I have a website that allows users to create their personal "website" (a page with sub-pages).
      Users shall be able to:
      Log in (frontend and/or admin), Edit "their" page(s) - I am using the "Page Edit Per User"-module (https://modules.processwire.com/modules/page-edit-per-user/) to grant access to the relevant pages Create child pages - possible? Users shall not be able to see other pages in the admin interface - "Admin Restrict Page Tree" may do the trick (https://modules.processwire.com/modules/admin-restrict-page-tree/)? Frontend editing shall be possible - I am considering "Fredi" (https://modules.processwire.com/modules/fredi/) for this. The challenge is that it takes a lot of modules and configuration.
      Is there a way to set this up that doesn't require a lot of configuration for each new user?
    • By Chris Bennett
      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; }  

    • By AndZyk
      With around 3,400 employees worldwide, IMS Gear develops and produces specific drive solutions for international customers. In addition to the focus on the automotive industry, the focus is on applications for industry and e-mobility concepts.
      Finding new employees is important for the day-to-day business of IMS Gear. For this reason our agency designconcepts developed a job portal, where potential employees can easily inform themselves about the company, the application process and find the job they are looking for. The website was build with help of the framework UIkit.
      jobs.imsgear.com
       
      Features:
      Job finder Job offer PDF Newsletter Fly-in information pages  
      Job finder
      Core of the website is the job exchange with the job finder. Here you get a list of all available jobs which you can filter by three main areas (categories, task areas and locations). Or you can type in anything in the search field and filter by various keys (for example ID, title, country and hidden tags). The job finder was build with jQuery Typeahead, which was really helpful in building this complex logic. If you want to know which job is the closest to you, you can sort them by distance.

       
      Job offer PDF
      Every job offer has a printable PDF version for newspapers or other job platforms. The job offer PDF can be created by checking a checkbox in the back-end and saving the page. The PDF will then be created with all needed fields of that page and DocRaptor. This workflow is really easy for editors and guarantees a consistent layout for all created PDFs.

       
      Newsletter
      If there is no job for you available at the moment, you can subscribe to a newsletter with your areas of interest. Then you will be notified daily if a job is available with your interests. Instead of using a separate newsletter tool, the nice module Newsletter Subscription was used to manage subscribers. The newsletter will be send via a shell script executed by a daily cron job.
       
      Modules used:
      Continents and Countries Front-End Page Editor Functional Fields Markup Sitemap XML Newsletter Subscription ProCache Repeater Matrix Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas