Half-started Theme Critique, Please

k4zzy

I've been working on a theme on and off for the past few weeks, and I was hoping I could get some critique on the design. I'm not a designer, I suck at design. The design is very weak, but I want to finish it anyways.

Only the main page and the login form have been completed, so please ignore the rest.

Comments, life-ending critique, and suggestions are all welcome.

My style, tentatively called Smoof or a screenshot

Username: guest
Password: guest

Disclaimer: I have only tested it in Camino 1.0.2(Mac) & Firefox 1.5.0.1(Mac), and I know that Internet Explorer messes up all my very hackish CSS. I'll troubleshoot later.

giginger

Very nice. Maybe a little dash of extra colour but it looks nice to me

sabina

nice, but dark maybe im too zen for this ;)

k4zzy

I've been having a hard time finding colours that will work with the page, unfortunately. I think the color I'm using now for the unread discussions looks terrible, I'm not sure how I can keep the repeating row colors and still show new posts in an easily-recognizable way.

Thanks for your feedback

On a side note, does anyone know how to mirror the top navigation in the foot.php page? Right now I'm just using static code down there. I've read up on delegates and all that, but I'm a PHP clutz and I don't quite understand it all.

LoOkOuT

I like it. Especially the rounded corners and fixed width. My only critique would be the sidepanel is difficult to read with that layout. I'd prefer it to be laid out closer to the default theme (I'm talking about the Headings and Links layout).

blizeH

Looks really nice, I think I prefer the colours used in the screenshot though :X

zinor

Its too hard to see the seperation between threads. You need alternating or contrasting colors

k4zzy

@LoOkHerE
I'm not 100% sure what you mean, sorry. The blue Panel with the feed links? Or the actual discussion list?

@blizeH
The screenshot is of the actual page.

@zinor
Is the grey/white alternating colors not contrasting enough?

pbear

Good start k4zzy!

You want to copy this part from menu.php:
<ul>'; while (list($Key, $Tab) = each($this->Tabs)) { echo '<li'.$this->TabClass($this->CurrentTab, $Tab['Value']).'> <a href="'.$Tab['Url'].'" '.$Tab['Attributes'].'>'.$Tab['Text'].'</a></li>'; } echo '</ul>
and put it into foot.php (note: you have to make sure all the "echo"s, semicolons, brackets, etc. are in there properly, but the menu is all that falls between the ul's). While you're at modifying the files, you might as well enclose it in a div with it's own special id. You will probably need the hook to target it with CSS.

I almost want a little more breathing room left and right of the content in the rounded box, but you may want it that close.

LoOkOuT

Yeah, sorry, the blue user control panel with the feeds and who's online.

k4zzy

@pbear

Thanks. I tried adding your code into the foot.php page like this:
echo '<div id="fnavblock"><ul>'; while (list($Key, $Tab) = each($this->Tabs)) { echo '<li'.$this->TabClass($this->CurrentTab, $Tab['Value']).'> <a href="'.$Tab['Url'].'" '.$Tab['Attributes'].'>'.$Tab['Text'].'</a></li>'; } echo '</ul></div>';
but this is all that outputs when the page is viewed:
<div id="fnavblock"><ul></ul></div>

I definitely agree with you on having more breathing room. I sketched up the design and then went straight into the CSS, but I definitely want the layout to be wider and allow for more whitespace. It's too cramped as it is right now.

@LoOkHerE
I've tried aligning the text in the SidePanel differently, and didn't really like the way it looked. Any suggestions?

Thanks again, everyone

mary

I quite like it overall. I don't like the blue menu/panel so much. My eyes keeps getting drawn away from the discussion list to look at the menu, it's a little annoying. I think it's because it looks a little too different than the discussion list's borders: they aren't rounded, they have an inner shadow, and because of the text on top of the discussion list, the top borders don't align either. The blue isn't a bad choice, it just exacerbates the border's differences.

k4zzy

Thanks, mary. I'm really hesitant to redesign the SidePanel because that's the base of the design for me. My original sketch had the top borders of the SidePanel and DiscussionList aligned vertically, but I never got around to moving everything to match.

I'm going to take a break from working on this style because I have to focus on my grandmother's funeral, but please keep the great feedback coming.

blizeH

"@blizeH
The screenshot is of the actual page."

Err, on the screenshot the discussions have a grey background, on the actual site itself they're blue!

// edit - just logged in, looks sweet!

pbear

but this is all that outputs when the page is viewed: <div id="fnavblock"><ul></ul></div>
Hmmm... I usually just hack away till something works. Maybe someone who knows what they're doing can step in here!

Bergamot

The only change I'd make to the sidepanel is centering the list items

k4zzy

@blizeH
I see what you mean now. I changed it so that if the user is not logged in, they see only the alternating row colors. When they log in, they see the highlighted new posts.

@pbear
Sounds good, I'll see what I can do with it.

@Bergamot
Centering looks a little funny to me. I have them aligned to the left now, it makes them a lot more readable. I definitely need to widen the layout more, though.

Thanks again, everyone.

blizeH

"@blizeH
I see what you mean now. I changed it so that if the user is not logged in, they see only the alternating row colors. When they log in, they see the highlighted new posts."

Looks great, good work!

k4zzy

Thanks

I'm kind of stuck on how to mirror the top navigation to the footer page.

menu.php has this:
$this->CallDelegate('PreHeadRender'); echo '<div id="header"> <a name="pgtop"></a> <h1> '.$this->Context->Configuration['BANNER_TITLE'].' </h1> <div id="navblock"><ul id="navigationul">'; while (list($Key, $Tab) = each($this->Tabs)) { echo '<li'.$this->TabClass($this->CurrentTab, $Tab['Value']).'><a href="'.$Tab['Url'].'" '.$Tab['Attributes'].'>'.$Tab['Text'].'</a></li>'; } echo '</ul></div> </div>';

If that code is placed in foot.php, only this is echoed:
<div id="header"> <a name="pgtop"></a> <h1>Vanilla</h1> <div id="navblock"> <ul id="navigationul"></ul> </div> </div>

The reason it's not working is because while Vanilla.control.Menu.php has the required Menu control, Vanilla.control.Foot.php does not. I can't edit these files for obvious reasons. As I see it, I have two options:
a) Create an extension that adds another menu control to the footer and then styles it.
OR
b) Create a duplicate copy of the navigation in the menu.php theme page and then position it later on.

Any thoughts?

jimw

The theme looks good except for colors and/or font sizes. Maybe it's just me, but I had a problem navigating when I made a comment. I was also distracted by the blue panel. But maybe it's just a "need to get used to" the new theme. And remember, the development of a theme (in my experience) is typically for your needs. Others may not like it. But that's the design and usability game.

k4zzy

Thanks. I haven't gotten around to styling much of the comments page, so that's why it looks so messed up.