Jump to content

Futura Admin Template

nikola

By nikola,
in Themes and Profiles

 Share

Recommended Posts

nikola Sr. Member

nikola

Posted
Posted
  • 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:

6605702385_861be740b7_b.jpg

6605702497_d437554d2d_b.jpg

6605702875_a811217ee7_b.jpg

6605702323_b563dfc443_b.jpg

6605702657_96898bfaef_b.jpg

6605703013_37edfa7465_b.jpg

6605737633_6ab0f6a1d9_b.jpg

6605737873_91f189a78e_b.jpg

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

cirkuit.zip

futura-admin-template-1.0.4.zip

  • Like 2
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

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);
Link to comment
Share on other sites
nikola Sr. Member

nikola

Posted
  • Author
Posted

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  :)

Link to comment
Share on other sites
apeisa Hero Member

apeisa

Posted
Posted

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!

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

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)
Link to comment
Share on other sites
nikola Sr. Member

nikola

Posted
  • Author
Posted

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:

6595590175_1238976b1f_z.jpg

How do you like it guys?

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

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!

Link to comment
Share on other sites
nikola Sr. Member

nikola

Posted
  • Author
Posted

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  ;)

Link to comment
Share on other sites
almonk Jr. Member

almonk

Posted
Posted

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.alasdairmonk.com/472Y0B1k2r3Q1I472m0X/o

http://cloud.alasdairmonk.com/1d1E2s2S2I1t2s163537/o

Github Download:

https://github.com/almonk/Al-s-Futura-PW-Theme

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
nikola Sr. Member

nikola

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
  • 1 month later...
netcarver Hero Member

netcarver

Posted
Posted

Hvala, Nikola!

This has been my favourite admin theme for a while and I've done some very minor tweaking to suit my own preferences.

  • Increased the width of the main nav items by 20px.
  • Reduced the heavy search box.
  • Made the animations much faster -- so menus pop open almost instantly and the scrolling panel on the right is now almost sticky.
  • Added the 'back to top' link to the scrolling panel (helpful in long pages.)

If anyone is interested in trying this out, you can find the 'futura-delta' theme on github.

  • Like 1
Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

This is a beautiful theme. Great update and nice to see it again.

Only issue I'm running into is that if there are more than 4 top nav items, the 5th wraps to a second line where it gets cut off. Not sure if the issue is with the original Futura or the update. But it's a fairly minor thing as I think most probably don't have as many admin menu items as I do. :)

Link to comment
Share on other sites
alan Hero Member

alan

Posted
Posted (edited)

Steve, not the fix, but I edited the outer UL that comes after #nav to:

<ul style="width: 110%;">

and all works correctly. Still poking about.

Update: forget the above, this fixes it and is less hack-y, and of course one could look deeper to see what's making this necessary in case there's a neater fix:

<div id="nav" class="nav" style="width: auto;">

Update II: looks like editing /site/templates-admin/styles/main.css and removing the width rule fixes this.

#nav {
position: absolute;
top: 26px;
left: 220px;
/* width: 340px; */
font-size: 12px;
}

I am using the ManageFiles module which add a new item to the #nav, so perhaps that's why I am seeing this.

That is probably a full fix, I hope it's been helpful, it's certainly been nice to add something here on the forums instead of just being a whiney-question-asker all the time (but I'll return to that v.soon I am sure ;)) Cheers, -Alan

Edited by alan
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
Go to topic listing

  • Recently Browsing   0 members

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