Nico Knoll Posted December 27, 2012 Posted December 27, 2012 Hi, just had some free days and build my first admin template. I'm open for any ideas how to improve it. You can download it here: GitHub Greets, Nico 11
ryan Posted December 27, 2012 Posted December 27, 2012 Very nice Nico. I like how clean it is, and the background color relative to the white inputfield boxes is pretty. My first thought was "where are the breadcrumbs?", but then I figured out it was in the footer. It's a nice variation and actually looks great. Though I'm having a little trouble with it in Chrome just because Chrome uses that space to display live messages (loading type messages, etc), which initially masked that the breadcrumbs were there. Still it might just be a matter of getting used to it. But I'd probably find it more usable to have the breadcrumbs at the top rather than the bottom. I'm not suggesting you change it, because that's just subjective on my part. However, the one thing I ran into that you may want to change is the foreground color for when rolling over an asmSelect list (see attached screenshot). Also, please add to the modules directory when you get a chance. Thanks for the nice work here.
ryan Posted December 27, 2012 Posted December 27, 2012 Nico, one other minor point. I'm having a little trouble differentiating the numChildren quantities in the Page List from the page titles, just because the font and color appear to be the same between them (as in your first screenshot). As a result, I'd recommend a minor tweak of making the quantity number visually different in some way. Usually, I've just made this number appear a light grey to differentiate it.
Nico Knoll Posted December 27, 2012 Author Posted December 27, 2012 Thanks for the feedback. I will include the points into the next "pull"/"push"/"version"/whatever 1
bcartier Posted December 28, 2012 Posted December 28, 2012 Hi Nico, Just wanted to say this is the the nicest theme for PW I've seen so far... In my opinion, you've managed to make complex forms a lot easier to digest for clients - which is huge. Great work, and thanks for sharing! -Brent 1
adamspruijt Posted December 28, 2012 Posted December 28, 2012 Awesome Nico, the clear separation on the fields is really nice. I really enjoy seeing everyones take on how to approach the ProcessWire admin. 1
diogo Posted December 28, 2012 Posted December 28, 2012 Very nice Nico!! Love where you are going with this! There's a problem you might want to solve with longer usernames I understand why you put the breadcrumbs on the bottom (I usually sweep them under the sofa), but I agree with Ryan, and besides the chrome problem, it makes them a bit invisible also. What if you would bring it inside the main div?
Luis Posted December 28, 2012 Posted December 28, 2012 good work Nico. I just tweaked the breacrumb for myself, I use the breadcrumb really often and so I moved it to the top. For those interested. Open the main.css in /templates-admin/styles Search #main add: margin-top:32px; Search nav add: margin-top:32px; Search #breadcrumb change: bottom:0px to top:0px; 1
bcartier Posted December 28, 2012 Posted December 28, 2012 Hi Nico, Was working with your theme and noticed it doesn't have a "modal" version yet. An exampleof where this shows up is if you got to Setup > Templates then edit a template. If you then click on the name of a field in the list of fields it gives you a modal view of the admin interface to quickly change the field in place. I think you'd just need to add a conditional to check for "modal=1" in the querystring and not output the nav and breadcrumb elements. -Brent 1
ryan Posted December 29, 2012 Posted December 29, 2012 Another way to approach the modal option is to just add an extra class to your body tag when it detects modal: <body class="<?php if(input->get->modal) echo "modal"; ?>"> Then just hide the elements you don't want on the modal view: body.modal #sidebar { display: none; } 1
woop Posted January 2, 2013 Posted January 2, 2013 Super nice! Some comments: The "children count" on the page tree could be a bit lighter in color to differentiate it from the page's name. The standard greenish button doesn't look as modern and "popping" as the rest of the theme. I think the standard web browser button actually looks better (at least in Safari/Chrome). Not sure I like the Processwire-logo link. I see the admin as something strictly tied to my site which makes external links feel weird. Maybe the link could go to the "pages" page, instead - since this is your typical admin home page. Hidden pages in the page tree doesn't look hidden with that green color. Try using a lighter version of the color from the "not hidden" pages. Foldable boxes doesn't look foldable. Maybe position the "folding arrow" to the left of the box's title instead of to the far right. There's no active state on the submenu buttons inside a page (Content, Children, Settings, Delete, etc). This menu doesn't really look like a menu, but more of a content box. Maybe make it more similar to the sidebar in styling? A "View Site" button in the upper right corner would be nice. I really like where you're going with this! I'll keep an eye on Marine's future releases. 2
Adam Kiss Posted January 12, 2013 Posted January 12, 2013 Hey Nico, I am totally using this already on two sites, but… Have you tried this with $config->debug turned on? It appends debug result under the mainframe, so you have effectively two body sliders - one on the content (next to sidebar, above breadcrumbs), and one for the whole page, because with debug info it's longer than 100%. Just letting you know. P.S.: Some solutions: If it's possible, you could control where the debug output is and push it in your div for content. Or, based on $config->debug, you could turn off some CSS styles and just let it grow naturally.
Nico Knoll Posted January 12, 2013 Author Posted January 12, 2013 Still fixing some bugs. But will definitely do it when I'm done doing this!
Ibn Saeed Posted June 10, 2013 Posted June 10, 2013 Any update ? Still fixing some bugs. But will definitely do it when I'm done doing this!
Ibn Saeed Posted June 12, 2013 Posted June 12, 2013 Just added a pull request. Moved the breadcrumb to the top and adjusted the padding. 2
onjegolders Posted June 12, 2013 Posted June 12, 2013 Hi Nico, This is a fantastic looking theme, great work as usual. I'm just having an issue with a repeater block stuck at the top of an edit page. Screenshot:
Nico Knoll Posted June 13, 2013 Author Posted June 13, 2013 Hey, thanks for the pull request. I merged it.
Ibn Saeed Posted June 13, 2013 Posted June 13, 2013 Thanks Knoll Theres an issue with the width of the breadcrumb extending beyond the main div. Ill try and solve it later. Hey, thanks for the pull request. I merged it. 1
Ibn Saeed Posted June 15, 2013 Posted June 15, 2013 Corrected the breadcrumb issue (width going outside of the div) and the white space beneath the nav bar. Changes are uploaded to the github. Knoll can you accept the pull request 1
Nico Knoll Posted June 15, 2013 Author Posted June 15, 2013 Of course, thanks! - and you can call me Nico 1
Ibn Saeed Posted June 15, 2013 Posted June 15, 2013 Nico, just updated the theme, cosmetic changes as requested by "woop". Pull request at github. * give the hidden pages an italic style and a lighter shade * lighten the shade of the children page count * Added active state style for the submenu buttons 4
Ibn Saeed Posted June 17, 2013 Posted June 17, 2013 *Missing id added "bcwrapper" and adjusted the padding in #main and placed the breadcrumb at the top. Pull Request 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now