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.

new style for inkscape-forum.de

edited September 2006 in Vanilla 1.0 Help
Seeing all the boys'n'girls presenting their impressive new styled vanilla forums I thought it's time to present the recently fresh styled, german speaking inkscape-forum.de vanilla forum. With the help from some of you guys here in the lussumo community I was able to finish the new style for the forum.
OK, it's no big deal. Just modifying the "vanilla default" stylesheet to replace some colors, add some images and so on. :)
As all the other people I'm asking for any design critiques, tipps, opinions, ... whatever you can say about it. ;)

As the forum is already existing quite some time (used version 0.9.2 before updating to 1.0) I think it's one of the "older" vanilla forums. ;) Don't you think so? It's in existence since 2005/08/14.

So, what do you think about the new style?
«1

Comments

  • I like it a lot.
  • Nice, I used to get quite a lot of hits from your site, but I couldn't understand what anyone was saying to find out why :)
  • Well, it's not my site, I'm just one of the users there. :) I made the new style.

    Concerning the traffic from our site:
    Yes, we we're looking for a good style for our forum. So we found your nice soul-scape style. It was part of the discussion. We also discussed about huge-entity.com. In the end we took all the things we liked about the different styles into consideration for our new style.
  • wow im impress of the layouts made for yours sites i badly needs idea for my site :/
  • Cool stuff man! ^_^
  • edited August 2006
    Looks really nice and I'm partial to the blue colors.
  • Ausgezeichnet! :)
    The category icons for the posts are a nice addition.
  • I created a mock layout for category icons prior to gaining access to this forum that I planned on posting as a request for such an extension. Considering that you've already done what I wanted done in the same way that I imagined, Inkscape, do you intend to release a category icons extension? :)
  • edited September 2006
    ... do you intend to release a category icons extension? :)
    Sorry, but I don't know how to create such an extension. Lack of knowledge. :) But why do you need an extension for this?
    It's just a matter of CSS. I studied http://www.huge-entity.com.

    Just take a look at the css code. All you need is:

    .Category_1 ul { background: transparent url('cat1_unread.gif') 12px 50% no-repeat; } .Category_2 ul { background: transparent url('cat2_unread.gif') 12px 50% no-repeat; } .Category_3 ul { background: transparent url('cat3_unread.gif') 12px 50% no-repeat; } .Category_4 ul { background: transparent url('cat4_unread.gif') 12px 50% no-repeat; } .Category_5 ul { background: transparent url('cat5_unread.gif') 12px 50% no-repeat; } .Category_6 ul { background: transparent url('cat6_unread.gif') 12px 50% no-repeat; }
    and of course a padding within .CategoryDescription, .CategoryDiscussionCount, .CategoryOptions and #Discussions li ul
    Our icons are 30px * 30px and I chose a padding of 55px (well just like huge-entity - what a coincidence ;) ).

    EDIT

    I nearly forgot that we shrinked our icons to 30*30px instead of 40*40px.
    The values within the CSS code are for 30px wide/high icons. I corrected the dimensions within the posting.


    Feel free to study our stylesheet vanilla.css

    Hope this helps. :)

    Cheers
    Inkscape
  • I suck at CSS. That's why I need an extension. :)

    I'll try out your suggestions. Thank you!
  • It's no big deal. Trust me. :D

    Just add the .Category_1 things within the /*Category*/ section (you'll find it easier later) and add the padding within the mentioned sections. Oh well and you'll need the icons of course. Upload the stylesheet and the icons. That's it.

    If you've difficulties, just check our stylesheet. :)

    Cheers
    Inkscape
  • Cool stuff man, I will definitely implement the category icons on our forums. I have been thinking about it lately, but now that you've posted the code I just can't resist. :)
  • edited August 2006
    It would be cool if you report back when you were successful :)
    An URL to your styled forum would be cool too.

    Cheers
    Inkscape
  • No problem man, I am in the process of making the icons, I have applied the styles with no problems though. You can see a discussion on our forums here.

    Cheers.
  • I'm getting curious. :-)
  • edited September 2006
    Hi folks, I've got a (probably dumb) CSS debutant question about this category/discussion icons stuff.

    Here's my problem: it works great if your categories & discussions don't use an image as a background. Here's the tricky part of my CSS file so far:

    #Discussions li ul { background-color:#d99ad9; background-image: url(discussion-new-gradient.gif); background-position:top; background-repeat:repeat-x; border-bottom:8px solid #D99AD9; } #Discussions li li { height:auto; border:0px; } .NoNewComments, #Discussions li.Read ul { background-color:#d99ad9 !important; background-image: url(discussion-old-gradient.gif); background-position:top; background-repeat:repeat-x; .BlockedCategory { background-color:#d99ad9; background-image: url(discussion-new-gradient.gif); background-position:top; background-repeat:repeat-x; } .UnblockedCategory { background-color:#d99ad9; background-image: url(discussion-old-gradient.gif); background-position:top; background-repeat:repeat-x; }

    Icons are displayed correctly over the images I use as a background in the category tab, but they don't appear in the discussions tab because they're kind of overrided by the background. Problem is either I use a nice gradient as a background, either I have the icons, but I've no idea how to display both. I guess it's quite easy to manage but I'm more a copy n paste user than a real coder, so I'm a bit lost here. Would somebody have a clue?
  • edited September 2006
    One little error I have to correct. I forgot that we shrinked our icons to 30px dimensions. So the CSS code (e.g. the 12px padding within the Category1, ... definitions) is for 30px icons.
    So you'll have to alter the values for 40px icons or check the stylesheet of huge-entity.com for values with 40 px icons.
  • edited September 2006
    @ Ø:

    That is exactly one of the reasons I have made up my own method of going about it. Check it out in this thread.
  • Nice work DraganBabic, I'm just interested. As your category icons are clickable, apart from CSS you must have changed s.th in the HTML code too, haven't you? I haven't studied your code yet.
  • I haven't done any changes to the markup, just CSS. What's "s.th"?
This discussion has been closed.