Jump to content

Release: Moderna Admin Template


nikola
 Share

Recommended Posts

EDIT: Fixed missing top right button (didn't show 'cause I've been using old main.js file...)

EDIT2:

  • Fixed font issue, it display now correctly all European characters, cyrillic characters (Russian, Macedonian, Bulgarian, etc.) and also Greek characters (slkwrm, apeisa)
  • Fixed sidebar using media query / added scrollbar if window is to narrow (apeisa)
  • Downsized page title font a little bit (diogo)
  • Reworked page list sort selector (apeisa)

I've made a new admin theme called "Moderna", screenshots are attached below.

For full user experience, download cirkuit.zip (it's TinyMCE theme) and put it into this directory:

/wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.3.9.2/themes/advanced/skins/

then open InputfieldTinyMCE.js located in /wire/modules/Inputfield/InputfieldTinyMCE/ directory and replace skin: "o2k7" with skin: "cirkuit".

Hope you'll like it...

6254483724_47e671892d.jpg

6253952395_3cc07e3bdd.jpg

6254483830_b7e6ebb3d3.jpg

6253952497_1d6bbb09f5.jpg

6254484014_59900bd9da.jpg

cirkuit.zip

moderna-admin-template.zip

moderna-admin-template-v1.1.zip

  • Like 2
Link to comment
Share on other sites

Looking great, but have this issue in Chrome.

xyeCf.png

Also top Save button is missing. I believe, Ryan posted something about cloning bottom Save button to the top using jQuery. It works in original theme, but seems like doesn't work in yours.

Cheers

Link to comment
Share on other sites

I've tested it in Chrome and it looks fine. Did you try to flush your cache?

I've lost the top save button in the process of making the theme, must investigate it, I'll post updated version.

@Diogo: I thought about making the pink alternative theme, it might come in next few days...

Link to comment
Share on other sites

Yes, I flushed both browser and PW caches. I use Chrome v 14.0.835.202 running on Windows.

It's weird 'cause html code for the menu goes like this:

<ul id="nav">	
		<li><a href="/processwire/page/"></a></li>
		<li><a href="/processwire/setup/"></a></li>
		<li><a href="/processwire/module/" class="active"></a></li>
		<li><a href="/processwire/access/"></a></li>
</ul>

So the text of the links is missing.

Link to comment
Share on other sites

The top button is back :) I haven't used latest main.js file, now everything is back in order. First post updated...

I've attached screenshot - latest Chrome running Moderna theme (exact build as yours), code normally shows text links... weird ...

Anyone else experiencing this issue?

post-354-132614279386_thumb.jpg

Link to comment
Share on other sites

Guys, you are releasing too many great admin designs lately - I have big difficulties to decide which one I should settle :)

This one is super clean and has many very nice details (like view site, up arrow when browsing to bottom). Excellent work nikola, thanks for this theme!

Only few minor issues though:

1) If poor resolution or small window, the left side doesn't work (elements get hidden without scrolling possibility)

2) When moving pages, the placeholder for drop area is too small (easy fix with css)

3) I kind of used to dropdowns and quick access to subpages.. maybe those could be always visible opened with small font on left menu?

No other issues, works great and is definitely one of my favorites!

Link to comment
Share on other sites

Great to hear!

Now that I played with this little more, gotta say that I really enjoy the overall polish you have put into this. Very, very nice work. I think it has best pagelist implementation so far - nice balance between effective to use and nice to look at.

Also this fixed top and left side gives this nice "application" feel, at least on bigger screen this is just perfect. Might be good idea to throw in some simple media queries to provide nice 1 column UI for smaller screens also.

By the way: If you use AdminBar and latest commit of it, then you can customize it looks just by adding AdminBarCustom.css to your /modules/AdminBar/ folder. It would be great to see first "AdminBar skin" also ;)

Link to comment
Share on other sites

One more issue, the font that is used on titles doesn't support äöå characters - leaves those empty.

This is why I get empty titles. I renamed admin pages in Russian, so it seems like they get stripped.

Edit: Ryan, I have a question. PW's default encoding is ANSI. In order to make templete files work with Russian symbols I often have to convert them to UTF-8 without BOM (I use Notepad++). Do you have any strategy about encoding (espesially with the realease of multilanguage back-end support)? I think that using UTF-8 considered now the best practice. I'm not very experienced in this question, but I never had any problems with UTF-8.

Link to comment
Share on other sites

Already tested it! I'm glad the problem was spotted. On my Chrome, everything is fine.

I like the theme very much, but I confess I liked it more in small on the pictures. For me the typography on the sidebar and on the title is too big (and also the sidebar itself) especially for smaller screens. But really, either than this, the theme is just great!

Despite all the awesome themes, I'm still using Processwire's default. My girlfriend likes it very much :)

Link to comment
Share on other sites

It's great Nikola!

one more thing :)

I think the view on the edit page dialog shouldn't be a tab. It just doesn't feel right to press one tab and leave the page. And now that the save page button is one the top, I think the view page could be maybe a light grey button next to it. What do you think?

Link to comment
Share on other sites

Actually that what I thought and experienced with behaviours of co-workers. I actually modified my Teflon admin theme some times ago to make it not a tab visually. :)

Ohh, great new theme we have here. Nice work nikola! Thanks for sharing.

Link to comment
Share on other sites

Very nice theme!

Liking the recent edited pages - I think as time goes on there could possibly end up being enough of these "widgets" that maybe the admin homepage could be a dashboard and not necessarily just the page list. Just a thought ;)

Link to comment
Share on other sites

If we use fonts from font face library we would lose support for all special charcters now included in cufon font used in this theme. The only way would be to create custom font face kit and to replace cufon references. I might try that...

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...