Camen Design Forum

First (I hope) userstyle for this forum

append delete Jose Pedro Arvela

I'm a long time reader, first time poster on this site and forums.

Today I had a sudden attack of inspiration, and decided to remove the C64 appearance (which I like a lot, but do not think is very readable). So, in a few hours, I made this quickly patched up CSS, available to install in Firefox or Chrome or any other browser which supports user styles at userstyles.org/… .

I tried my best to make a well structured and non-redundant CSS (I failed miserably at that part) which makes the forum get more close to the main site (which I think I succeeded). I'll update the code with your suggestions or my own ideas whenever I feel like it.

So... tell me what you think of the user style.

Reply RSS

Replies

append delete #26. JJ

I had an idea. I was thinking of putting the search form below the list of posts, the <dl>, and I considered using absolute positioning. I thought of two ways to make it work.

When you adapted Kroc's CSS to make this style, you used his properties that set the body height to 100%, the original purpose of this is to allow child elements of the body to have a min-height of 100%, but this doesn't seem terribly necessary for the forum's design. So if the body's height is set to auto, you can absolute position the form element to below the thread list:

body { position: relative; height: auto !important; }

form[action^="http://google."] {
position: absolute; bottom: 815px;
left: 5px; right: auto !important;
}

I also thought of a different method of positioning the form to below the thread list, it looks something like this:

form + dl { position: relative; z-index: -1; }
form[action="google.com/…"] { display: run-in; position: absolute; bottom: 0; left: 0; }

I haven't tested it, but in theory it would cause the form to "run in" to the <dl> element, which would become its new containing block, then the <dl> element's position is set to relative, and the form could be absolutely positioned within the <dl>. I've had this idea before for other things, but I've never actually tried it and I've never seen it done before. (Technically, once the form run's into the <dl> it would become an inline element, however, this doesn't matter because all absolutely positioned elements can have block properties.) Unfortunately, I don't think Firefox supports "run-in" properly.

append delete #27. JJ

After thinking about it even more, we could even move the search box down to the fixed header. It's pretty sparse anyway.

Something like:

form[action*="search"] {
position: fixed !important; z-index: 1;
bottom: 20px !important; right: auto !important;
margin-left: 560px !important;
}

Just gotta find a spot that it looks good in. Although, I still think the search looks really good absolutely positioned below the <dl>, but its your style, up to you.

append delete #28. JJ

Hmm, I see what you mean about the search box in google chrome now. It does look weird.

#29. Rits

This post was deleted by its owner

append delete #30. Rits

Ah, got it wrong, it wasn't Opera but my text editor screwing up the encoding.

append delete #31. Geoff

The style isn't too bad! Although the scroll seems to be locked to a slower than normal speed...

append delete #32. Jose Pedro Arvela

That's quite strange Geoff, because my style only changes CSS, and there is no way that I know of to change scroll speed. Perhaps some specific CSS property might be causing your browser to slow down when scrolling. But I am using the style myself at the moment, and I don't see any slowdown myself. Which browser are you using?

append delete #33. JJ

Jose, he's right. A lot of browsers have trouble rendering, among other things, linear gradients efficiently. For me, the slow scrolling is apparent when you actually click and drag the scrollbar. This seems to affect Chrome, Firefox 3.6, and pretty much every browser except Firefox 4.0b7+. Firefox 4 is the first browser I've seen to render linear gradients, box shadows, and fixed elements without the "slow scrolling" performance issue.

There's not much that can be done. My own site is affected by this.

Also, I thought I'd mention, I've made some changes to the style to fix some Chrome issue if you're interested:
- Webkit has trouble rendering an inset box shadow on replaced boxes, i.e. inputs, if there is also a border-radius. To fix this in chrome, I gave the search box a regular box shadow instead of an inset.
- In Chrome, the generated "Camen Design Forum" text seems to behave strangely, shifting around in position from time to time. To fix this, I changed it from a ::before to an ::after.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn