Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Half-started Theme Critique, Please

edited May 2007 in Vanilla 1.0 Help
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, and I know that Internet Explorer messes up all my very hackish CSS. I'll troubleshoot later.


  • Very nice. Maybe a little dash of extra colour but it looks nice to me :)
  • nice, but dark maybe im too zen for this ;)
  • 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.
  • 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).
  • Looks really nice, I think I prefer the colours used in the screenshot though :X
  • Its too hard to see the seperation between threads. You need alternating or contrasting colors
  • @LoOkHerE
    I'm not 100% sure what you mean, sorry. The blue Panel with the feed links? Or the actual discussion list?

    The screenshot is of the actual page.

    Is the grey/white alternating colors not contrasting enough?
  • 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. :)
  • Yeah, sorry, the blue user control panel with the feeds and who's online.
  • @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.

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

    Thanks again, everyone :)
  • 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.
  • 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. :)
  • blizeHblizeH ✭✭
    edited August 2006
    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!
  • 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! :D
  • The only change I'd make to the sidepanel is centering the list items
  • @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.

    Sounds good, I'll see what I can do with it. :)

    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. :D
  • "@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!
  • edited August 2006
    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.
    b) Create a duplicate copy of the navigation in the menu.php theme page and then position it later on.

    Any thoughts?
  • 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.
  • Thanks. I haven't gotten around to styling much of the comments page, so that's why it looks so messed up.
This discussion has been closed.