Leaderboard

Lately there have been lots of people that are not enjoying the default admin theme, so we've been working on making something new. Not trying to solve all issues or add every new feature we'd like, but just trying to come up with something to have as an interim replacement for the default admin theme until we can afford the time to do something broader in scope (like Phillip Reiner's great admin theme design for example). So this theme doesn't necessarily break a lot of new ground, but hopefully has some of the improvements that people are looking for. Visually, the goal here was to find a lighter, more modern look and reduce the boxes-in-boxes feel of the current admin theme. I've opted to commit it to the dev branch because it requires the latest version of ProcessWire on the dev branch, and likely will continue to with updates. Meaning, I can't distribute this one as a 3rd party theme very easily. This is because I'm making core updates related to the admin theme at the same time. So if you want to help test this new theme, you'll need to grab the dev branch of ProcessWire. The new admin theme is in /site-default/templates-admin/. That means you'll see it as the default theme if you are installing a new copy of PW. But if upgrading an existing copy, you'll continue to get the old theme. If you want the new theme, then just copy the /site-default/templates-admin/ directory to your /site/templates-admin/ directory on your existing PW install. This would be in addition to replacing your /wire/ directory with the latest one from dev, as usual for PW upgrades. The existing default admin theme also remains in place in /wire/templates-admin/. So if you want to stick with the existing/stable admin theme, then just make sure you don't have a /site/templates-admin/ dir in place (unless you are using a 3rd party admin theme). This admin theme is probably not production ready, as it's not been tested in many browsers yet. I personally haven't yet tested it in anything but Chrome and Firefox in OS X. Please let me know if you experience issues in other browsers. I fully expect things won't be pretty in IE... but they never are. To start, this comes with 3 color schemes (though we'll be adding more too): Warm: Modern (similar to processwire.com site colors): Classic (similar to existing admin theme colors): To switch to one color theme or the other, specify a GET variable of 'colors' in any URL you are accessing in the admin: /processwire/?colors=warm /processwire/?colors=modern /processwire/?colors=classic To specify a default, edit your /site/config.php and set to one of the following: $config->adminThemeColors = 'warm'; $config->adminThemeColors = 'modern'; $config->adminThemeColors = 'classic'; We'll probably make this switchable in the user profile at some point, but that comes later. This theme also comes with some new features (most of which have been copied/inspired from the work of others here, whether in other admin themes, modules or designs): It now uses Font-Awesome icons rather than jQuery UI icons. We now only use jQuery UI icons for actual jQuery UI widgets. Note that asmSelect and our file/image inputfields are built as jQuery UI widgets, but I don't think anything else is. Basically, the majority of icons in the system are now Font-Awesome icons. You can associate Font Awesome icons with templates. When associated with a template, the icons will appear in the page list, in front of the page title. To use this, edit any template and go to the Advanced tab. In the "List of fields to show in admin page list", you can type in any Font Awesome icon name (in addition to the field names you could before). For example, in the Page List screenshots above, I have my "search" template configured with the value: "icon-search title". You can associate Font Awesome icons with fields. When associated with a field, the icon will appear at the beginning of the input. For example, I associated a coffee icon with my "title" field in the screenshot below. To do this, edit the field, click on the Advanced tab, and enter the icon name in the new field provided for it. The top navigation now supports simple dropdowns. A new "user" dropdown has also been added that contains profile and logout links. The main Pages screen contains an "add new..." button, that is itself a dropdown to a list of templates that are configured adequately for us to know where they would be added. To use this, you have to configure your template "family" settings. The search box is now ajax powered, though this was introduced a couple weeks ago in the existing admin theme too. The theme is responsive too, of course. This is all kind of preliminary and open to changes. I'm trying to keep the scope of the project fairly small since I don't have much time to work on it. But just wanted something to quiet the haters a bit for a little while, so that we can take our time on the bigger admin theme project for longer term. We'd appreciate your feedback if anyone has time to help test.

Like it - nice additions One thing I was thinking about a while back was being able to maybe use a colorpicker to select 3-4 primary colours and have a module save those to a CSS file so the admin colours could be changed easily. Might be something worth considering time-permitting? Obviously you can end up with some pretty garish colour schemes that way so would be one for superusers to control I think.

A quick tutorial how to create file downloads using pages You will be able to create a new page using template "PDF" (or any you setup), upload a pdf file. You then can select this page using page fields, or links in Wysiwyg. The url will be to the page and NOT the file itself. This will allow to keep a readable permanent unique url (as you define it), unlike /site/assets/files/1239/download-1.pdf, and you'll be able to update/replace the uploaded file without worring about its filename. Further more the file will also have an id, the one of the page where it lives. Clicking those links will download or open the file (when target="_blank") like it would be a real file on server with a path like /downloads/project/yourfile.pdf. You'll be also able to use the "view" action directly in the page list tree to view the file. Further more you'll be able to esaily track downloads simply by adding a counter integer field to the template and increase it every time the page is viewed. Since the file is basicly a page. This all works very well and requires only minimal setup, no modules and best of it it works in the same way for multi-language fields: Just create the language alternative fields like "pdf, pdf_de, pdf_es" and it will work without modifying any code! Still with me? ok PW setup Download folder: Create a template "folder" or "download-folder" with only a title needed. Create pages in the root like /downloads/project/ using this template. Setup the template for the pdf files 1. Create a new template in PW. Name it pdf 2. Goto template -> URLs tab and set the URL end with slash to no. (So we can have /path/myfile.pdf as the URL) 3. Create a new custom file field, name it pdf. Set its maximal count to 1 under -> Details tab. 4. Add the pdf field created to the pdf template. Easy. 5. Create a new "pdf" page using the pdf template under a download folder you created earlier. 6. Give it the title and in the name field add ".pdf" to the end (could also leave as is) Template PHP file for the pdf files 1. Create the template file pdf.php in your /site/templates folder 2. add the following code: <?php // pdf.php if($page->pdf){ wireSendFile($page->pdf->filename); } Done. To see the options you have with PW's wireSendFile() you can also overwrite defaults <?php // pdf.php if($page->pdf){ $options = array( // boolean: halt program execution after file send 'exit' => true, // boolean|null: whether file should force download (null=let content-type header decide) 'forceDownload' => false, // string: filename you want the download to show on the user's computer, or blank to use existing. 'downloadFilename' => '', ); wireSendFile($page->pdf->filename, $options); } Simple and powerful isn't it? Try it out. Some thoughts advanced Create as many file types as you like. It might also be possible to use one "filedownload" template that isn't restricted to one field type but evaluate it when being output using $page->file->ext, or save the file extension to the page name after uploading using a hook. One last thing. You can add other meta fields or preview images to the template and use those to create lists or detail pages. It's all open to goodness. Again all without "coding" and third-party modules. Further more you can use the excellent TemplateDecorator to add icons per template and have a nice pdf icon for those pages. This as a base one could also easily create a simple admin page for mass uploading files in a simple manner, and create the pages for the files automaticly. ImagesManager work in the same way. Cheers

I think it kind of depends on the situation. There are many situations where I like how defined the boxes are, even if they are boxy. That's why the default admin theme hasn't changed much since the beginning. In other cases, I like the borders to be more faint, like what's in this theme. I think most people probably prefer the lighter look that. Ultimately, this theme will support either, but in the interest of keeping the scope small, I'm probably just going to focus on the lighter color schemes with this, and continue to use the old admin theme for situations where I want the boxes. Time is not permitting but this theme was built out with all the color definitions as SASS variables, so changing out the color theme is pretty simple already, but still a developers task. I'm just going to focus on getting a few good color schemes out there as choices, and I think the longer-term/bigger admin theme project should potentially pursue the ability to change colors in the admin. But probably not this project. Thanks, that's my favorite one too. I've been looking the PW blue palettes for too long. But I'm going to continue tweaking all the palettes and adding a couple more (one will be based on Nikola's Futura Remixed color scheme). If anyone here with a good eye for colors sees anything that looks amiss, please suggest changes. Though try out the actual theme, as my screenshots are a little off with the colors (I've got some weird color profile settings to deal with one of these Dell high-color displays, and it tends to mess with my screenshots). I think this is something that may be pursued in the bigger/longer-term admin theme project, but not in this interim project. Thanks I was able to reproduce as well. Looks like I need to wrap the mouseleave() in a 250ms setTimeout() for Firefox, at least that seems to fix it here. I'll commit this update tomorrow.

Hey Ryan, I am no designer, so take my comments with a grain of salt, but I like the warm color scheme the best - it looks great! The one change I would like to see is the implementation of a sidebar rather than top tabs like the ERGO theme has, but similar to onjegolder's modification: http://processwire.com/talk/topic/1856-release-ergo-admin-template/?p=43471 I love the way the left sidebar tree is expandable for quicker access to items under setup. Of course this could also be done by making the setup menu a dropdown menu (sorry, I see you have already done this - NICE!), but I still prefer sidebars - given our modern widescreen aspect ratios it seems a better use of space. Also, and maybe this is just me, I have always found it easier to move the mouse left and right, rather than up and down - hence I have my OS dock/taskbar on the side, rather than on the bottom. Maybe we need a real UI expert to chime in Maybe a little off-topic, but I have also been wondering if maybe it is time to have a new "Tools" item in addition to "Setup" where modules can place their interfaces if it would be more appropriate.

Started a new module for creating <tables> from repeater fields. Feel free to grab it from github, do with it what you want. It only works for simple text based fields inside a repeater. To use it: $table = $modules->get("RepeaterTable"); // initialize $table->thead = true; // (bool) true/false, default = true, will render <th> $table->indent = 3; // (mixed) false/int, where int is the level of indentation, default: false $table = $table->render($page->repeater); // repeaterfield called repeater <!-- output --> <table class="table-repeater"> <thead> <tr> <th class="col-1">Fieldlabel field 1</th> <th class="col-2">Fieldlabel field 2</th> <th class="col-3">Fieldlabel field 3</th> </tr> </thead> <tbody> <tr class="row-1"> <td class="col-1">data for field 1, first repeater item</td> <td class="col-2">data for field 2, first repeater item</td> <td class="col-3">data for field 3, first repeater item</td> </tr> <tr class="row-2"> <td class="col-1">data for field 1, second repeater item</td> <td class="col-2">data for field 2, second repeater item</td> <td class="col-3">data for field 3, second repeater item</td> </tr> </tbody> </table> For the HTML purist, I have added source code indentation where you can set how many tabs you wish to append before each element. Please let me know if I should add this to the modules directory ? Does someone have a good name for this ?

Chrome Php Logger Module to log useful details directly in your Chrome JS console. You can inspect most as objects and see infos or values. To enable logging with this module you have to enable debug modue in config.php. If debug is set to false in config.php, it will not output any log. Important: It is not recommended to enable it on live stage, as it reveal infos you might not want everybody to see, although it's not obvious as it requires the ChromePhp Extension installed and enabled. - render time - memory consumption - cpu usage - current user infos - current user roles - current user permissions - current page with all its fields and their value and field settings - page cache/loaded on request count - fuel - modules loaded - Server vars etc. - Cookies - Requests - mySQL query log When installed you can also use ChromePhp static methods to output your own data in all your templates or modules: ChromePhp::log($page->somefield); Note: This module requires the ChromePhp Extension installed to see the log in the Javascript console. More infos can be found on http://chromephp.com Download: Modules Directory: http://modules.processwire.com/modules/chrome-php-logger/ Github: https://github.com/s...ChromePhpLogger

I love the new themes and all the nice improvements (like font-awesome, "add new" etc) Ryan, fantastic work! I noticed that drag & drop file uploads aren't working: probably changes in dom are effecting the js init there?

I love it. ( also love font-awesome )

Hi Ryan, great work, i like cleaner look and feel. I am testing new theme in Firefox 24. I have issue with top dropdown menu. When i hover tob bar menu item, dropdown menu is shown without problem, but i cant focus any dropdown items with mouse (always dissapears).

I like admin default colours but totally agree that it has a boxy look when you get lots of inputFields. If the new theme solves that problem it would be a great enhancement.

Absolutely love the Classic colours and theme. To me these are the ProcessWire colours.

Hi Joe, If you go to the particular template and click to edit it, then click on the title field you can adjust the visibility of that field (along with other settings) for just this template. This is for all users though, but it sounds like it should be ok for your use.

Thank you diogo! Yes with this I arrived at the perfect solution! I actually placed the site settings template under the setup tab now, where it is accessible to the guest role user together with the function to restore pages from the recycle bin (Trashman module), which also resides there. That way things appear more logical to the user, as the site settings options are not any longer presented as a "page". Great! SiNNut: Thank you too! Since diogo´s solution is working so well I am not looking into this more closely now. But I think that would work too. However I´m not aware of how to add a custom tab to a template, if you could point me in the right direction that might be usefull for future use.

I'm not seeing through all this but have you seen this http://processwire.com/talk/topic/1421-twig/ ? Maybe something in there helpful? I'm not sure there's another method like you have now, but then I don't care about template engine anyway On a side note: "Instead of contaminating your template's and chunk's markup with php code, you would have the Twig templating syntax at hand." Should read: "Instead of using powerful ProcessWire template syntax code in your template's and chunk's markup, you would "contaminate" your templates with the Twig templating syntax." Sorry but just had to

Just set the value of the field like: $field->attr("value", "121-22"); or multiple I think: $field->attr("value", array("121-22"));

I'm not entirely sure about your exact scenario, but you could also add a fieldsettab, called 'site settings' or something, to the homepage template.

I have no plans to develop it further then this. For me it's just a time saver to build tables. If more people really like this module I can continue on this one. And add it to the modules directory to. Can imagine I build in support for normal PageArray, manipute output etc.

Thanks renobird - glad it was timely for you. I am contemplating adding a variety of conversion setting options and the ability to generate a PNG at a specific size via an API call that comes directly from the SVG so that quality would be maintained, rather than resizing the initially created PNG. Something else I will be doing, although maybe not as part of the module will be an interface for management of SVG metadata for maintaining a library of vector illustrations. If you have any other ideas, please let me know.

Perfect timing. As I was creating a handful of svg/png combos last week I was wondering if I could automate the process. Now, here you are with this module. Well done! A link to picturefill is in order, just in case anyone isn't familiar.

Joe, I just updated the Admin Custom Pages module to especially allow creating a "settings" kind of page on a tab of the admin http://processwire.com/talk/topic/3474-admin-custom-pages-module/?p=45361 Maybe that would also fit your needs.

I had a click while reading this post http://processwire.com/talk/topic/4642-keeping-a-page-in-a-fixed-position-last-in-the-sorting-order/ and quickly implemented something I was thinking about for some time already. I added a new functionality on the DEV version. Now the module allows to easily create a "settings" kind of page. Putting it simply, you can create a tab in the admin that shows the "edit" page of that same page. See it for yourself https://github.com/ocorreiododiogo/pw-admin-custom-pages/tree/dev edit: for those interested on how it works, don't look on the module file, look on the admin.php file.

Only if you take HelperFieldLinks, FormSaveReminder, PageEditSoftLock too @adamspirit I'll make a pullrequest to add support for Fredi.

@choppingblock: just like the exception says, '%=' isn't implemented with page type fields, as it's not needed there. I've explained this in more detail in another thread.

I'm seeing certain similarities with another thread, http://processwire.com/talk/topic/3530-most-selector-operators-throwing-errors/. Even the exception matches that thread perfectly. There's no "*=" or "%=" with page type field (just like that exception says.) It's not a bug or missing feature either, it's just that there's no need for such an operator. With page type fields "=" simply checks if page field value contains a value, not if it's equal to it What Antti pointed out above seems to be exactly what you're after; per your description you've got products with a field "categories" and pages with one category selected and you want to find any products that include that category in their "categories" fields. In this case this should do the trick: $pages->find("categories={$page->category}"); I'd even go as far as say that if it doesn't seem to work, the issue is probably something entirely different. Just to make sure, in your original post you mentioned field "categories" for products and your selector was "category=...", is it possible that something similar (ie. misspelled field name) is the actual issue here?

I quickly created a PW inspired color scheme for Sublime Text with this tool http://tmtheme-editor.herokuapp.com/. You can grab it from Github https://github.com/ocorreiododiogo/ProcessWire-SublimeColorScheme Enjoy! edit: I used the beautiful "Gloom" as starting point

Thank you Soma! I needed one for my current website development and I got it working nicely with your quick tutorial on http://mssoonline.org project. Thanks again.

Nice! Thank you Soma

@MatthewSchenker: Thanks a lot. We were searching for a CMS/CMF that completely fits our needs for quite a long time. We used to have our own, properitary CMS but quit developing it for several reasons. Afterwards we were using the usual suspects (Typo3, Wordpress, ModX...) but never were really satisfied with each of them. I think we finally found what we were looking for and will be happy contributing stuff to the community (in fact we've already started to ). @NoDice: If it inspires you that's propably the best thing that can happen. Thanks a lot!

Do you guys think it makes sense to bring LanguageFieldTabs into the core? So far I haven't come across a multi-language site install where I wouldn't want it, so starting to wish it was just there by default.

Applause!

Since your values appear to be integers, you can sanitize them as easily as: $sanitizedValue = (int) $t; That sanitizes, but doesn't validate the value. Validation is also important, especially with something like an ID number that indicates a reference to something else. This is even more important in ProcessWire, where page IDs can also represent things like users, admin pages and more. To validate, you'd want to make sure the number is valid for the selection. To do this, you'd need to confirm that the value you were given was present in the list of selectable options you gave to the user. Or, if you know the selection is limited to pages from a certain parent or template, you could validate like this: $p = $pages->get($sanitizedValue); if($p->id && $p->template == 'your-valid-template' && $p->parent->id == 123 && $p->viewable()) { // it is valid } else { // it is not valid }

Do you want to rename the original files on upload? If yes, here are some pieces of code I have collected in the forum from Soma. This could be a starting point for a module: <?php class ImageRenameOnUpload extends WireData implements Module { public static function getModuleInfo() { return array( 'title' => 'ImageRenameOnUpload', 'version' => 100, 'summary' => '', 'href' => '', 'singular' => true, 'autoload' => true ); } public function init() { $this->addHookBefore('InputfieldFile::fileAdded', $this, 'renameImage'); } public function renameImage($event) { $inputfield = $event->object; if($inputfield->name != 'images') return; // we assume images field !! name of the field is: images !! otherwise change it $p = $inputfield->value['page']; // get the page $image = $event->argumentsByName("pagefile"); // get the image $ext = $image->ext; // get extension $newBasename = 'my_random_name_' . time(); // create your random name here !! $p->images->trackChange("basename"); // prepare page to keep track for changes on basename //$image->removeVariations(); // isn't needed here, I think $image->rename($newBasename . '.' . $ext); // rename the image $p->save('images'); // save the page } } As of this code will work, you have to add something that refreshs your admin page at the end, because upload is via ajax request and the label presenting your imagefilename isn't updated now. But should be a good starting point. EDIT: Have changed addHookAfter to addHookBefore and then it all works, including updating the label with filename! Don't know really why in detail. Just have found out by trying!

You can always reset your password just by pasting this temporarily into any one of your templates, and then viewing a page that uses the template: $u = $users->get('admin'); // or whatever your username is $u->of(false); $u->pass = 'your-new-password'; $u->save();