SamC

http://www.bbc.co.uk/news/business-41859941 Never used stripe myself (maybe to buy things, never implemented on a website) but heard it mentioned a few times on the forum here.

I made a quick (shabby non-centred) demo of something I've been working on, worked out OBS studio just enough to record this. There's no sound but you get the idea. There's also no sidebar, I thought I'd get the theming sorted first then work out how to incorporate that, I was actually thinking a sidebar with 'favourite' links would be pretty cool, which I guess could be a (process?) module. I'll add that to the bucket list. There was a lot of tracing variables about but I'm pretty happy with the outcome. The different colours are controlled with a single line in my custom theme less file and you see the mouse professionally disappear of screen whilst I recompile. Give us a shout if you want to try it, learning how to use github properly is also on the bucket list

Needed this, thanks! Seems so obvious afterwards.

Took it one step further, and with a bit of hackery on the templates and the module file, got my sidebar in and various other tweaks. Not properly responsive, breaks some theme settings, the breadcrumbs are ropey, the sidebar is not full height (or fixed), less needs serious refactoring. Not sure why the masthead is a fixed height, but anyway, this is what I want my admin theme to look like I personally think you don't need theme settings for layout, for me it just makes the admin theme harder to tweak. Why not just have a theme that does one thing? I don't want to use jquery layout, or any fly in anythings, other than the sidebar on mobile. It doesn't need to be overcomplicated. Would be awesome to get something like this working properly so it could be a proper admin theme. I'm a bit stuck on the php side of things, I can handle the less (need more practice with uikit though for sure). I'm more than willing to team up with someone if they like the idea/look of this.

Hi @tpr thanks for the advice. I use dropbox a lot so I guess I could upload to there. = EDIT = I stuck an image in dropbox, shows the kind of theme I'm looking for. Certain things don't work, the login form is awkward as the fields and the labels have separate background colours, which is set to white. Not sure why, as the white is inherited from the page background colour. Anyway, the image from dropbox: The contrast between the teal and grey could be improved, but I find something like this much more relaxing than a dark masthead/white page combo. I don't mind the large page title, but I do mind the fonts, the buttons remind me of Verdana 10px from websites c2000. The tab fonts should be bold etc. Changing font weights easily is not something I see here in the reno less file. Not sure if it's a good idea to use google fonts here though (although a nice simple solution!).

I'm having trouble with 'npm run watch' on the included version of uikit with the admin theme. It's not generating the uikit.pw.min.css file as it should when saving the less files. I'm replacing the uikit directory with the newest github version to see if that helps as per instructions here: https://github.com/ryancramerdesign/AdminThemeUikit As far as theming, it seems like all you have to do is modify: /site/modules/AdminThemeUikit/uikit/custom/pw/pw-theme-reno.less ...rebuild and you're good to go. Also, removed the white background colour set in: /site/modules/AdminThemeUikit/uikit/custom/pw.less Not got as far as any screenshots yet but I've easily changed the colours so far, made a much lower contrast version with grays & teal. Come to think of it, I can't add any screenshots anyway because I've run out of upload space!

Wow, didn't think about a limit, that sucks a bit. Guess my long storybook style posts are at an end!

From what I gather so far, I might be wrong here, but I think you could: 1) Git clone the admin theme. 2) Go to '/AdminThemeUikit/uikit/'. Copy the '/custom' folder into the same level, rename the old folder 'custom.original' or something in case things go pear shaped. Your theme must be inside a folder called 'custom'. The folder inside this is called 'pw', but you could leave that as is. 3) Crack open terminal, navigate to the uikit directory. In my case: cd /Users/Sam/Desktop/AdminThemeUikit/uikit npm install // installs webpack and other random node stuff npm run compile // to compile everything npm run watch // to watch for changes 4) Add your overrides into '/AdminThemeUikit/uikit/custom/pw.less'. Saving this then compiles your new colours/padding/whatever etc. It would just be a case of just using this new admin module with your new css in /site/modules/ as the paths to the css/js would remain the same. The final compiled file transforms from 'pw.less' (which pulls in 'uikit.theme.less' and 'pw/_import.less': _import.less in turn pulls in the components) into: /AdminThemeUikit/uikit/dist/css/uikit.pw.min.css All the available scripts you can run are in: /AdminThemeUikit/uikit/package.json Prepend with 'npm run...' npm run build-scss', 'npm run compile-js' etc. "build-scss": "mkdir -p src/scss/theme & mkdir -p src/scss/components & node build/scss", "compile": "npm run compile-less && npm run compile-js", "compile-js": "node build/build", "compile-less": "npm run icons && node build/less", "compile-rtl": "npm run compile-less -- rtl", "icons": "node build/icons", "prefix": "node build/prefix", "scope": "node build/scope", "release": "npm run compile && npm run compile-rtl && npm run build-scss && node build/release", "watch": "npm-watch", "test": "webpack-dev-server --inline --hot && open http://localhost:8080/tests/" Then you can run: npm run test I got some errors, but strangely, after a couple of attempts and refreshing the page, I get a test page at: http://localhost:8080/tests/ Sadly, I can't upload my screenshots because: Drag files here to attach, or choose files... Max total size 0.02MB I don't know why but it's happening to me constantly, and it's quite limiting to say the least! Anyway, I might be wrong and I haven't modified anything yet, but I believe it's along these lines. One thing that's strange to me is that: /AdminThemeUikit/uikit/custom/pw/ ...has both less and css files within. This doesn't seem right, the css should only be in the dist folder. Anyway, this is as far as I've investigated. Maybe this helps a little. I'll probably try and build a theme just with custom colours tomorrow to see if this is the correct method. Ultimately, I want an admin theme with a sidebar, no overlay sidebar at all and a minimal masthead.

The documentation for my arduino sensor kit I received the other day written in Chinglish made more sense. For bootstrap, I just installed with npm and made a gulpfile to do all the preprocessing with some tools of choice. 'use-strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('autoprefixer'); var postcss = require('gulp-postcss'); var sourcemaps = require('gulp-sourcemaps'); var postcssFixes = require('postcss-flexbugs-fixes'); var cssnano = require('cssnano'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify'); var paths = { sass: 'src/scss/', css: 'src/css/', js: 'src/js/' }; gulp.task('sass', function() { var processors = [ autoprefixer({browsers: ['last 2 versions'], cascade: false}), postcssFixes() ]; return gulp.src(paths.sass + 'styles.scss') .pipe(sass({ includePaths: ['node_modules/bootstrap/scss'] })) .pipe(postcss(processors)) .pipe(gulp.dest(paths.css)) }); gulp.task('watch', function() { gulp.watch(paths.sass + '**.scss', ['sass']); }); gulp.task('minifycss', function () { var processors = [ autoprefixer({browsers: ['last 2 versions'], cascade: false}), postcssFixes(), cssnano() ]; return gulp.src(paths.css + '*.css') .pipe(sourcemaps.init()) .pipe(postcss(processors)) .pipe(rename({suffix: '.min'})) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/css/')); }); gulp.task('uglifyjs', function() { return gulp.src(paths.js + '*.js') .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('dist/js/')); }); gulp.task('build', ['minifycss', 'uglifyjs']); Now, theoretically, I could simply 'npm install uikit' and change a few things, use less, point to uikit instead of bootstrap etc. var less = require('gulp-less'); //... includePaths: ['node_modules/uikit/src/less'] Something like that, then pull everything in to a less file, make you theme inside your project directory, not in the node_module folder, thus using 'my own' build process. I have not tried AIOM module yet but that looks interesting. I've noticed a couple few things so far with uikit: 1) The less has all the prefixing in it already for some reason, rather than autoprefixer. 2) The compile time with their out-the-box (less) build process is painfully slow, about 5-6 seconds before I can refresh and see changes. My build process above was pretty much instant (but was also sass). 3) It seems I'm forced to include their JS just to use the grid. So far, I've got /custom/pwtuts.less: // Core @import "../src/less/uikit.less"; // My theme @import "pwtuts/_import.less"; // mixin to add new declaration .hook-card() { background-color: orange; color: white; } @card-body-padding-horizontal: 100px; @card-title-font-size: 51px; // weird number so I can find it easy in the css output file... I'll give it a shot for another week or so and see where it gets me. I'd like to use it but their build script is just too slow and I can't see a way of including my own custom JS into it. I also still have no idea why I've got '/src/less/components/' and '/src/less/theme/' folders. They import slightly different things in their respective '_import.less' file but the penny has definitely not dropped for me yet. Actually, now I've got the core (components), the theme (theme), and a custom theme (pwtuts). lol where's the banging head against wall emoji?

Yeah, I liked that, and one of the reasons I like PW too. The templating reminded me of twig, which was one of the reasons I liked Craft. The tree looks somewhat familiar too: https://our.umbraco.org/documentation/Getting-Started/Backoffice/#tree Not going back though

Hi @Smoo and welcome to the forum btw (if I haven't done that already in another post?!) The '-' sorts them ascending or descending. In this case, it's newest first.

So I'm trying Uikit 3 again. I wanted to get to know this framework in order to better understand making an admin theme. Testing it on a simple HTML page, with a structure: test - uikit - build - dist - src - etc... - index.html I just git cloned it rather than NPM install because I wanted to use their build script. Then I created a custom folder and a file at /uikit/custom/styles.less with the following: @import "../src/less/uikit.theme.less"; // mixin to add new declaration .hook-card() { background-color: orange; color: white; } Running 'npm run watch' recompiles, I get the output at /uikit/dist/css/uikit.styles.css and results in: So all seems to work. What I don't understand is how to make a theme. I see a file at /uikit/src/less/theme/uikit.theme.less Basically I can't seem to put two and two together. I'm well familiar with preprocessors but this has me stuck. 1) Can anyone elaborate (further than the docs) on how to set this up? Am I supposed to modify the theme folder to create my theme? In which case, would be overwritten when I update. 2) If I use their build process, how do I include my own app.js file into their build process and have it output at /uikit/dist/js/uikit.app.min.js? Any advice would be awesome thanks.

I sort on my site straight inside the selector by field 'postDate' which is a datetime field: <?php $entries = $pages->find("template=blog-entry, sort=-postDate"); ?>

I think you'll really enjoy PW. I came from Umbraco CMS, then Drupal 7, with Wordpress/Craft CMS in-between. PW is by a long way my favourite to use (I did like Craft though, but not the price tag per site for multiple users/granular permissions). Having complete control over the output is really important to me. In fact, a bunch of the stuff I've done easily with PW, I don't even know how to do in the other CMSs.

@fractalflux welcome to the forum. I was a designer with plenty of css/html experience. 16 months later after starting with PW, built 5 sites and have improved JS and PHP skills. Go for it! Was well worth it for me, plus the forum has amazing members. You can also check out my tutorials site which is aimed at beginners/designers just starting out.

Thanks @adrian I’m only trying to take pre-existing elements, move them around, change the template layout and the css. A ‘concept’ idea I guess you could call it. I think it will help me better understand how the admin is actually constructed. I don’t understand a lot of the code in the uikit admin theme and I thought the templates might be more like login.php for login page, main.php, modal.php, sidebar.php etc. i.e. the pages broken up into blocks for easier customisation. Would also prefer to use BS4 than uikit. Clearly I need to spend a lot more time looking into this.

After looking through the files, I'm still not following how this fits together. In my admin, the source is like so: Not sure why css is being pulled from templates-admin and AdminThemeUikit folders? As there are no source files (sass/less) in the core AdminThemeUikit folder, I need to download the admin theme module instead then work with that for compiling from source. i.e. download the module and put it in '/site/modules/'. I presume what you mentioned @Zeka is this: That makes sense, but still don't know what 'templates-admin' folder is for.

Interesting. Could you elaborate on this a bit? I presume a textformatter module runs when you save the page. How do you then get the width/height info from the image field and then add them on to the resulting image that’s displayed on the webpage? Would you use JS inside the PHP module to do the dom parsing? I’ll also look at the code from the fluid images module but tbh, I’m not good enough to read code and know what it does yet. Just after a brief outline. I’d like to try something like this, would be a good learning experience.

Please can someone explain to me the relationship between the templates-admin folder and the AdminThemeUikit module? I wanted to try and make an admin theme just as a learning experience (plus a process module to go with it) but stuck at the first hurdle. In the page source, when I’m logged in, files from both these locations are involved. But there seems to be duplicate stuff in both locations. I copied templates-admin into /site/ but these files are never used, ones from /wire/ are always used to display the admin root page. Also, where are the sass (or is it less?) files to compile in AdminThemeUikit? Where do customisations go? I thought I saw it in one the PW blog posts but can’t find enough info to get started. Any advice is appreciated, thanks.

I went a bit off topic, but the question remains, what happened to the sidebar option? The video shows a sidebar with the usual pages, setup, templates etc. but the only option I have on the newest PW dev branch is an overlay (when clicking the logo?!) or a sidebar with the tree in it (equally weird), @maxf5 I think it’s clear that we both want the same thing! @tpr then drops a big teaser into the game.

Hi @sebr and welcome to the forum. Out of curiosity, I tried this. My JS skills are not great but I managed to get it working by copying the folder: /wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage ...into: /site/modules/InputfieldCKEditor/plugins/pwimage So our custom plugin is used instead of the '/wire/' one. Then changed a few lines in '/site/modules/InputfieldCKEditor/plugins/pwimage/plugin.js' Lines 11-18, added height to allowed and required. Like this: // These are the allowed and required elements & attributes for images. // It should clean all other classes but hidpi and three align classes that are generated by ProcessWire var allowed = 'img[alt,id,!src,title,width,height](align_left,align_center,align_right,hidpi,align-left,align-center,align-right);' + 'a[!href];' + 'figure{width}(align_left,align_center,align_right,hidpi,align-left,align-center,align-right);' + 'figcaption;'; var required = 'img[alt,src,width,height]'; Then on line 211, added another like: if(width > 0) $insertHTML.attr('width', width); if(height > 0) $insertHTML.attr('height', height); // << add this Inserted an image and: Not sure if it has any knock on effects but the height's in there for sure. I tried double clicking image, cropping, resizing and re-inserting image and the new values are reflected in ckeditor. There's possibly an 'easier' way which another member might know but maybe you can try this to get started

I've just installed 3.0.83, but what happened to the sidebar option? The options I have now are: Masthead only has no sidebar and the other options have the entire page tree in a sidebar. So I go to 'Navigation': And the options are to either click the logo to go back to default tree list page, or click logo for an offcanvas menu, which is just weird. Who would expect a menu when clicking on a logo? I would have liked this sidebar menu positioned to the left and kept there, with the masthead doing a disappearing act. Or having a dumbed down masthead when there is a sidebar present. Modern monitors have a lot of width, why used a masthead and cram everything in vertically? I feel this makes my editing experience worse than using the older reno theme. The design just feels so unbalanced. You can probably tell I'm not a fan of masthead navigation at all, but of course this is all personal opinion. These are the best looking admins IMO so I need to look into how to create a custom admin theme in order to emulate something like these. Of these three, craft is my favourite. I've used it to make a site before and it was extremely nice to use. It's obviously possible with the new uikit so need to find some info on making my own theme. I see in the readme: "To install a new admin theme, you would place it in /site/templates-admin/ and leave the one that is in /wire/templates-admin/." ...so I guess that's my starting point. Looking at the current uikit admin module files though, I may be in a bit over my head here! Not sure whether you need to make a whole new module of just a '/site/templates-admin/' folder. Can't work out how the module AdminThemeUikit relates to the stuff in templates-admin folder.

Can say that again! What sort of stuff are we talking about here?

I've read many bad things about PHP over the years and actually wonder (from an experienced dev point of view) whether there's any truth in it? As a inexperienced programmer, you hear stuff like "the language doesn't matter, just learn to program". On the other hand, you hear, "don't choose language X or Y". You also face the choice of "am I going to learn a language that sucks?" which can be a total brick wall to a newbie. In PHPs case, the internet consensus is that it sucks almighty balls. I was reading this earlier: https://whydoesitsuck.com/why-does-php-suck/ Do devs get annoyed with a language because they don't fully understand it, or because they expect to be able to program in the same way they do in another language? Do they focus too much on the tools rather then end product as mentioned here: https://blog.codinghorror.com/php-sucks-but-it-doesnt-matter/ Why do people comment on posts like the above with stuff like "Dynamic, weak typing sucks. I won't say more"? Is confirmation bias that important to programmers? Remember when Ruby was popular? Can I see a trend here... How are inconsistencies in PHP any different from the total weirdness of JavaScript, which is super popular? I'm well pleased with my sites I built over the years, they could be powered by fairy dust for all I care. Anyway, just after a few thoughts here.

The Steve Jobs book was good too. Didn't enjoy the movie though, lots of shouting and just found it pure boring. I think he was a very unique man indeed. I totally understand the fanboy stuff, buying into Apple is like joining a community, there's a feeling that goes with it, it's not 'just a product'. The old keynotes were exciting to watch and still are. Personally I use android/iOS/OSX/Win10/Linux as I just can't be tied down. I get FOMO if I stick to one system for too long.