First (I hope) userstyle for this forum

append delete 13 Nov ’10 · 20:40 #1. JJ

Haha, very cool.

BTW, for anyone interested, it took me a second to find the actual raw css file: userstyles.org/…

I don't know if it's just me, but some things look to be out of place or incorrectly positioned in Firefox 3.6. The camendesign logo's height is greater than the fixed header's, and the reply textarea seems to be a bit small. A lot of different little things as well. It might be my fault though because I don't use stylish and I simply copied and pasted all of the CSS file directly into Firebug.

I like it though, although I love the C64 design, it's cool to see the forums and the main site with a consistent design.

append delete 13 Nov ’10 · 21:28 #2. Kroc

Oh wow! That is genuinely awesome. You’ve done such a good job of this. I couldn’t of imagined it like this.

The forums aren’t consistent with the site because I decided that I wanted them to not be tied to the glacial progress of the main site, nor tied to the design decisions that were specifically made around my content, rather than a forum setting. That is, I wanted to ensure one design didn’t lead me to making poor decisions on another design. Also, that I wanted to get the forums up and running early as possible rather than waiting for camendesign.4.

Thanks for sharing this Jose, it’s a great bit of work! Personally, I would have put the replies outside of the <section> (on the orange background), and then the reply form back in a section. My main site’s CSS lets me switch back and forth between writing on the orange background, and on the paper sections, but this would require altering the HTML, which you couldn’t do with CSS alone. You can modify the HTML by downloading the source code and making a new theme folder, but I don’t yet have any way for readers to change themes (and nor am I sure how I’d even go about implementing this, given the design restrictions on these forums).

append delete 13 Nov ’10 · 21:51 #3. Jose Pedro Arvela

I agree with the reasons not to make the forums consistent with the site. Still, I wanted a more readable appearance (C64 theme is awesome, but it becomes tiresome to read for extended periods of time), and I though the ideal was the main site's style.

I do think it would be possible to make your idea without modifying the HTML. The first article and reply form would be styled as a section, and a negative margin would be added to the first h1 element so it was visually inside the section.

About having a theme switcher, I honestly don't like the idea. Each site has its own theme, and usually this theme is (or should be) the visual identity of that site. People don't complain (a lot) about this and I see no reason forums need to be different. It's just my own opinion.

append delete 13 Nov ’10 · 22:19 #4. JJ

Oh when will XBL2 get here?! =(

Yeah, I'm not particularly fond of a theme switcher for users either. It's my impression that they rarely get used on forums.

append delete 18 Nov ’10 · 22:55 #5. Z. Smith

I've been using the user style for a while now and it's pretty nice to look at. I have, however, edited the original style to create regular verdana icons for the symbols on the main page and the delete button instead of the C64 ones. Also, (just a minor annoyance I can't seem to fix myself) when you hover over the links on the index page, the underline doesn't extend across the whole link (it is shifted 1em to the right). Any ideas what could be causing this?

append delete 18 Nov ’10 · 23:23 #6. Jose Pedro Arvela

One of my plans was to be able to replace the C64 icons with Unicode equivalents. If you'd like to share the code, I might implement it in the user style.

In both Firefox and Google Chrome I don't have that problem. I suppose it might be because the pseudo-element a:before from the home page list has a negative margin, but it doesn't happen to me.

append delete 19 Nov ’10 · 01:11 #7. Z. Smith

Someone with more experience then me could probably do this with less code but I go:

header > nav > a:before { content: '♦ ' !important; color: #443311 !important; }
header > nav > ol > li > a:before { content: '← ' !important; color: #443311 !important; }
header > nav > a[href$="#new"]:before { content: '+ ' !important; color: #443311 !important; }
header > nav > a:hover:before, header > nav > ol > li > a:hover:before, header > nav > a[href$="#new"]:hover:before {
color: white !important;
}
dt > a:before { content: '♦'!important; }
dt > a.sticky:before { content: '♥' !important; }
a.delete:before { content: 'X ' !important; font-weight: bold !important; }

Also, in lines 16-23 of your code, I changed the font-family style to read like this:
font-family: verdana, sans-serif !important;

(It should be noted I couldn't find a suitable unicode icon for the rss link, so I left it as a diamond)

And concerning the underline thing, I reinstalled your original style and it was fixed. I guess I inadvertently caused the error myself :P

append delete 19 Nov ’10 · 01:27 #8. Z. Smith

Oh, and if you want the nav to more closely act like Kroc's:
nav a:hover, nav a:hover:before { text-decoration: none !important; }

append delete 27 Nov ’10 · 19:05 #9. Jose Pedro Arvela

I have updated the style with all suggestions and snippets provided. It is available in here: userstyles.org/… .

I made quite a few changes under it. First I applied Kroc's idea for comments, which simplified the code of the CSS a lot (because I do not need to "pull" certain items into the orange background with negative margins anymore). I also applied Z. Smith's code, so now I don't need to use the C64 font. I also tried to make the original posting have the metadata (the header stuff) just like in Kroc's articles, and I do think it turned out quite nicely.

For some reason, either due to it being a form, or due to the existence of a fieldset, I couldn't make the "New Thread" and "Reply" title look like expected (the negative margins didn't move the element, although I just remembered I could have used relative positioning :P ). I also discovered Firefox doesn't detect IDs with only numbers (like #1 or #2) as valid IDs for styling. I am also aware that I duplicated a lot of CSS in a lot of places... but I am not in the mood to hunt it down, so... I might make it... uh... later...

Tell me what you think!

append delete 27 Nov ’10 · 19:51 #10. Kroc

You need to use display: block on <legend> to get it to use margins; note though that <legend> is behaves very badly due to legacy reasons and can be difficult to wield.

append delete 27 Nov ’10 · 20:00 #11. Kroc

Just installed it, and damn, this is so nice! I love the good choice of positioning for many elements.

I would suggest that you hide the hgroup with the "*** Camen Design Forums v2 *** …" titles, and use content generation to insert another title instead, more befitting the theme.

I would also recommend an extra blank line after each reply meta (no., name, date), and to do the meta in white instead (like the hover / selected state on the main site’s menu) so that each reply looks like it has a title.

I’m going to sticky this thread so that hopefully it gets more attention, it’s a fine piece of work you’ve done here. I wouldn’t personally use it permanently (I like the C64 theme), but I can easily see others wanting to.

append delete 27 Nov ’10 · 21:16 #12. Jose Pedro Arvela

I like the ideas and I'm applying the changes right now. They're now available on the same link I've posted so far ( userstyles.org/… ). On a side note, on the first version, I used generated content to replace the h1 in the hgroup, but then I supposed it'd be better to use the real text, but as I agree with you with the idea of a nicer title, I'll replace it with generated content. Probably something as simple as "Camen Design Forums", and I'm wondering whether or not to keep a smaller copyright notice (something as simple as "© Kroc Camen" or "©cc-by Kroc Camen"), so I'm going ot leave it out for now and you then tell me if you want to keep it.

On a side note, since you're making this thread sticky, could you edit out the "(I hope)" in the title? I tried to use it as a little joke (about FIRST!!!!111ONEONEONE11!!11! comments) but it didn't turn out the way I expected. You can keep the URL the same tough.

27 Nov ’10 · 21:25 #13. Jose Pedro Arvela

This post was deleted by its owner

append delete 27 Nov ’10 · 21:26 #14. Jose Pedro Arvela

On a side note: Google Chrome users using it will need to add 2 rules to the style for it to display correctly:

On "body > header h1", you need to replace margin with "-38px 0 0 !important";
and on "body > header hgroup:before" you need to add a left-margin of "105px".

I'll try to make it somehow so these changes aren't necessary (I made them very quickly anyway), but for now it is as it is.

27 Nov ’10 · 22:55 #15. Grimmeh

This post was deleted by its owner

append delete 27 Nov ’10 · 23:31 #16. Wannes

Although I already liked the first version. This revision certainly is a very good refinement. It is more readable if you find the c64-version hard on your eyes. Very nice Jose.

append delete 28 Nov ’10 · 00:59 #17. JJ

Ah, now I see the style in its full glory. Very nice. I like how cleverly everything was put together. Looks very true to camendesign.

Jose, are you planning on creating another userstyle once Kroc is ready with his new design?

append delete 28 Nov ’10 · 01:17 #18. JJ

Just had an idea: here's a rule that moves the camendesign[dot]com link from the footer and places it over the kroc eye logo.

footer > p > a + a {
position: fixed; z-index: 1; bottom: 0; margin-bottom: 15px; margin-left: -250px;
height: 50px; width: 75px; overflow: hidden; text-indent: 150px;
}

This makes it simpler to navigate back to the main site if you want - just click the logo.

append delete 28 Nov ’10 · 22:36 #19. Jose Pedro Arvela

JJ, I included your idea as it is awesome. I also updated the search bar to look like the one on the main site (with some slight differences). I do not understand why, but on Google Chrome the search bar is a total wreck. I'll try to fix it soon, but if someone wants to try and take a shot at it (is that the expression? It's feeling a bit unnatural on my tongue), I'd be happy.

append delete 28 Nov ’10 · 22:51 #20. Jose Pedro Arvela

Just for you all to know: I made a very simple userscript which places the main site's favicon (whichever it is) in this forum too. It is available in here: userscripts.org/…

It certainly works with greasemonkey for Firefox, and should work with other browsers.

append delete 28 Nov ’10 · 23:22 #21. JJ

Nice.

BTW, webkit has its own weird appearance for the search widget. Do something like this:

[type="search"] { -webkit-appearance: textfield; }

That should fix the search box in chrome and safari.

append delete 28 Nov ’10 · 23:28 #22. Jose Pedro Arvela

I had tried it already JJ, didn't work. The problem is some sort of weird mix between the form and inputs positioning and the styling of the searchfield, which looks unnatural (even when I use the code you told me to). For some reason it didn't look as expected, even when I forced the positioning attributes in the web inspector.

append delete 28 Nov ’10 · 23:38 #23. JJ

Hmm, weird. I've noticed some oddities in positioning elements in webkit at times, but they mostly had to do with padding. I'd have to look at it in chrome to see if I could try to figure it out.

BTW, the search form seems to be in a better spot on firefox either with a margin-top of 0 or -60px. Looks kind of awkward where it is right now.

append delete 28 Nov ’10 · 23:47 #24. Jose Pedro Arvela

I think it looks the best with a margin-top of -9px and a right value of 9px. Having it with a margin-top of 0 seems to be too out of place, and I don't like how it looks when centered with the title. I'll update it later unless there is some other opinion.

append delete 28 Nov ’10 · 23:53 #25. JJ

I like margin-top: 0 the most. The way it currently is, it looks like its hugging the border of the "Threads" header too much.

First (I hope) userstyle for this forum

Replies

Reply