Jump to content


Photo

Futura Admin Template


  • Please log in to reply
32 replies to this topic

#1 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 29 December 2011 - 09:48 AM

  • For the end of the year, I've made a new admin template called Futura.

    UPDATE 1:

  • Moved position for logged in user to breadcrumbs area on the right / Ryan
  • Fixed logo being cut off ("s") / Ryan
  • Fixed Page List (blank row appeared when moving pages) / Ryan

UPDATE 2:

  • Replaced current code execution timer with PW integrated / Ryan
  • Removed "Sidebar headline" and replaced it with search in similar color fashion / Ryan, Apeisa
  • Added "Newest added" in the sidebar below "Latest updates"

UPDATE 3:

  • Replaced seach with finalized colors
  • I've overlooked some things in the UI and made according corrections

UPDATE 4:

  • I apologize, I've attached the wrong css file in the final build that was attached (1.0.4), please download it again.

UPDATE 5:

  • Replaced old screenshots with new ones

I've removed previous version from file downloads repository, consider the one attached in this post as final.

If I spot some mistakes along the way, I'll correct them and update this post.

Here are the screenshots:

Posted Image

Posted Image

Posted Image

Posted Image

Posted Image

Posted Image

Posted Image

Posted Image


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".

Tell me what you think and if you find any bugs in the template, please let me know...

Greets to all on the forum and I wish you a Happy New Year 2012.!

Attached Files


Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#2 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 29 December 2011 - 10:56 AM

Looks great Nikola, can't wait to test this one.

#3 SiNNuT

SiNNuT

    Hero Member

  • Members
  • PipPipPipPipPip
  • 547 posts
  • 431

  • LocationThe Netherlands

Posted 29 December 2011 - 10:56 AM

I haven't actually tried it but judging from the pics another excellent theme.
Also a nice touch with the page creation time you show in the footer.

Your Moderna template is also ace.

#4 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6571

  • LocationAtlanta, GA

Posted 29 December 2011 - 11:34 AM

Nice work Nicola! Another beautiful and fantastic admin theme–looks great! I like the design, colors, layout, sidebar, footer, and it all flows very nicely. Thank you for taking the time to put this together!

A few questions/suggestions/ideas: 

1. I'm not sure I understand why there is a headline in the sidebar that says "sidebar"? :) Is this to make sure I don't confuse it with the footer or masthead?  ;D just kidding, but was mainly wondering if it might not be necessary?

2. Depending on the number of buttons someone has in their admin, they may run out of space in the top nav–a good solution might be to move the label "you are logged in as ..." into the right side of the bar below it (the breadcrumb). That's just an idea. It works great how it is, but just wanted to point out that many people may have more pages in their admin root than what will fit up there (depending on screen width).

3. The last "s" in "Process" of the ProcessWire logo appears to be slightly cut off. Though I'm viewing it away from my desktop so might be this computer too.

4. I'm seeing some strange behavior in PageList when clicking the "move" link... some extra rows show up when the tree is opened up a bit. Like in the default profile, if you click 'move' on 'Child Page Example 1'.

5. If you are interested, PW has a built-in debug timer in the file /wire/core/Debug.php. It works like this:

$t = Debug::timer(); 
echo Debug::timer($t);



#5 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 29 December 2011 - 11:48 AM

Thank you all, I'm glad you like the theme.

Let's fly through questions/suggestions/ideas:

1. Sidebar headline is there just for cosmetic purposes.  :) I know it's not necessary but it came up nice  ;)

2. I thought about that before, might move it in the breadcrumbs area or maybe in the sidebar area...

3. Didn't notice until you mentioned it, I'll fix it tomorrow...

4. I'll have to fix that, I realize the same problem occurs in Moderna admin theme

5. I'll try the internal debug timer, didn't know it's in there. Every day you learn something new  :)
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#6 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 29 December 2011 - 12:59 PM

Ryan,

made suggested corrections as listed above (2,3 & 4).

I did try to use the Debug timer, but only on the first load would it show execution time, after that it only showed 0.0000 throughout the pages.
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#7 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 29 December 2011 - 01:03 PM

Just tried this. My only gripe is that "Sidebar" button - it is most visible element on theme and it is just for visual purpose. I think it will get annoying very soon. I do like the visuals there (red color etc). Maybe you could use that style on search form? Drop the Search heading and just style the search form like you have Sidebar at the moment. I think that would be great.

Other than that - very well build and nice theme!

#8 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 29 December 2011 - 01:18 PM

More and more I think about it, you're right Apeisa (and Ryan). I could style the search box that way and there would be room for newest added pages, just like the "Latest updates" part...
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#9 apeisa

apeisa

    Hero Member

  • Moderators
  • 3,154 posts
  • 1705

  • LocationVihti, Finland

Posted 29 December 2011 - 01:28 PM

Sounds good Nikola!

#10 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6571

  • LocationAtlanta, GA

Posted 29 December 2011 - 01:36 PM

Looking great Nikola!

For debug timer, you might also try giving it a name just in case it's getting confused with another, like this:

<?php

Debug::timer('futura_timer'); // 1. start a new timer called futura_timer

// do a bunch of stuff 

echo Debug::timer('futura_timer'); // 2. echo how long it took

// do more stuff

echo Debug::timer('futura_timer'); // 3. Echo how long it took (since timer started, step 1)


#11 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 29 December 2011 - 02:08 PM

Ryan,

thanks for extra code, it works perfectly now.  ;)

Ryan & Apeisa,

I've removed "Sidebar headline" graphic and used orange color variation on search field + added "Newest added" below "Latest updates".

Screen:

Posted Image

How do you like it guys?
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#12 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6571

  • LocationAtlanta, GA

Posted 29 December 2011 - 02:29 PM

Nice, I think that's a definite improvement. I also think it would be just fine to not have any red background over there–it's a great looking admin theme either way. But I understand the purpose of the red is weight and balance, so can see why you want the color in the sidebar – it anchors the right side, sets the boundary and carries some weight to balance the sidebar with the content area. From that standpoint, I think your solution (with the search box background) is a good compromise. Thanks again for your great work with this admin theme!



#13 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 29 December 2011 - 03:17 PM

Thanks Ryan!

You are right, it's about the balance of colors, that's why I've initially set "sidebar headline" so it can hold overall design. This is a compromise, though I'm not 100% pleased how it looks. Maybe I'll come with something these days.

Anyways, enjoy using the theme as I've enjoyed making it.

P.S. Adminbar skins for Moderna & Futura template coming soon. Stay tuned  ;)
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#14 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 29 December 2011 - 03:30 PM

Seems I'm restless with this one  :)

I think this might be it ...

Posted Image
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#15 MarcC

MarcC

    Sr. Member

  • Members
  • PipPipPipPip
  • 315 posts
  • 107

  • LocationCalifornia

Posted 02 January 2012 - 01:55 PM

What a great theme. Thanks, Nikola. I tend to prefer the Publish/Save button to have a bit of added weight, because my clients look for it most. Like this: http://www.boscartoo.../images/234.png ...but as I said, this looks great.

I'm a freelance, processwire-using web designer based in california. work site | personal site | visuals


#16 almonk

almonk

    Jr. Member

  • Members
  • PipPip
  • 41 posts
  • 6

Posted 02 January 2012 - 07:18 PM

I love love love this theme. But I'm very particular ;)

I've made a branch and simplified it a little further and changed things to my taste. Please feel free to fork yourselves. In short, I've disabled the animation, got rid of the sidebar and changed the fonts back to your standard Arial.

Screenshots:
http://cloud.alasdai...k2r3Q1I472m0X/o
http://cloud.alasdai...S2I1t2s163537/o

Github Download:
https://github.com/a...Futura-PW-Theme

#17 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 03 January 2012 - 03:00 AM

Looks like Futura "lite"  :)

I still like the original version better  ;)
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme

#18 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6571

  • LocationAtlanta, GA

Posted 03 January 2012 - 09:53 AM

Nice branch Almonk. I agree it does fee like a Futura Lite or "Futura Minima". :) I think this might be the first admin theme "family". Both look great.

#19 Sevarf2

Sevarf2

    Sr. Member

  • Members
  • PipPipPipPip
  • 373 posts
  • 48

  • LocationBratislava

Posted 02 March 2012 - 10:14 AM

Schermata 2012-03-02 a 16.10.11.png Hey there, i love this template but i've found a bug when you are in advanced mode...look at the screenshot.

#20 nikola

nikola

    Sr. Member

  • Members
  • PipPipPipPip
  • 233 posts
  • 137

  • LocationZagreb, Croatia

Posted 02 March 2012 - 03:14 PM

Hi Sevarf2,

I'll try to fix it as soon as possible, I'm very busy at the moment so I haven't had time to do it. I also have in plan to update the theme to support multiple languages.
Check out my ProcessWire admin themes: Futura Remixed Admin Theme / Moderna Admin Theme / Futura Admin Theme




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users