Mockups for new theme
I just started using PP a few days ago, but I like it so much and find it so useful, that I wanted to give something back. I started doing some mockups yesterday for a new theme for PP. Please tell me what you think and if this kind of theme (with lots of icons) would be something that people want. I used the Tango library for the icons except for the tasks and tags icons, which I used another set of GPL icons. I wanted to move away from the tabs because with that setup breadcrumbs look like secondary links (children to the primary links), when that really isn't the case. I think icons might make it easier for a new user to find his way around administration and project administration. The drawback to using so many icons of course is that the theme will probably load a bit slower than the rest, but I intend to do my best with CSS sprites to make it as light as possible.
First mockup
First mockup with quick admin variation
Admin nav bar with hover state
Projects mockup
Projects mockup with background and round corners
Hi ipwa,
I like it! It's pretty clean.
A few things:
- the plan is to have a plugin system, giving (amongst other things) the ability to modify and add tabs. I'm not sure your theme would be flexible for that. Maybe make the icons smaller? Just a thought...
- even though, this hasn't been committed, you could look at this: http://projectpier.org/node/328. The goal of the patch is to replace the little tags on the dashboard with translatable, customizable strings. I'm suggesting that for 2 reasons: 1. you might have wanted to style this part and if you were to provide some CSS and images for that, it would help pushing the patch for commit ;-) 2. you might be able to weigh in on what the markup should look like.
- if you haven't already, you might want to have a look at the Marine theme, by kemie. She added some code to modify the behavior of the user box.
Regarding the User box, by the way, I prefer the light-color one but I do like the round corner of the blue one.
Tim
Thanks for your comments Tim, you and This-Alex in IRC have helped me save a lot of time on a mistake I was going to make early on. The way I was planning on doing the navigation won't work because of translations and the plugin system later on. I was planning on using image replacement to have a nice hover effect of the gradient background (revert), the text (shadow) and the icons (glow), all with one image. What I'm planning on doing now is using regular text, apply the icons to the li ids and apply the background to the ul, this way we won't have a hover effect of the background or shadow in the text, but it's a fair compromise. There will be a default icon for new tabs, and eventually the most used used plugins will have an individual icon in the theme. Having the icons a bit smaller might be good for loading time as well.
I think the efforts you guys are putting to have translatable icons on dashboard is a great thing! Maybe themes can ship with some icons for the most used languages. I am planning on theming that part, so I'll do some mockups for that this week and maybe a working example. I saw the Marine theme and I really like it, I also love the Sand theme, but I don't like that it needs a patch. I want to make a theme that anyone can use in the current version without requiring a patch. But they are fantastic themes, I'm currently using Marine, and activecollab-monochrome.
Here's a screenshot I just took of my work so far. I had to write far too much CSS for the menu, I wish PP had body ids and classes!
Another screenshot, now of the admin section.
I think this theme is beautiful. When will it be available? I'd love to start using it.
I'll post the theme in my blog and post the link here.
I'm glad you like it, I'd like to contribute it to PP but don't know how.
I Like your idea..
Maybe some suggestions ? Maybe header is too big. if i use my latop, then actual working area will to down on the page?
Can you create header height smaller? I understand that you have big monitor, i have on my deskt too 1920x1200 but not on my laptops. many people are using now those ery lightweight small laptops, with small screens..
___________________________________________
New ProjectPier edition available!!!
ProjectPier GoalPanel SF Edition.
I'll try to make the header smaller, I'm a big fan of whitespace, but I'll have to make some compromises I guess. Cheers.
Why not to make some screen resolution shecking and then according to this adjust header? If you have small screen, then you see small version of header?
___________________________________________
New ProjectPier edition available!!!
ProjectPier GoalPanel SF Edition.