"Curve" badly

[SoLoGHoST]

Maybe it's just me, but it you are considering on changing it, why not just do a simple 1 like this (or if you want you can give it some color to it)

This looks pretty good with 1 quote, but how would it look if you have nested levels of quotes?

Come on man, it's simple Another line going around it same as it is now...  Here's an example, I don't have the time to render it very nicely, so I just stretched it and shrunk it.  But, hopefully you get the idea on this...

[Antechinus]

S'uggers. I was thinking something more like this.

ETA: Oh and the idea there is to use the existing main_block.png to get a rounded top right corner without any more markup or images. The rest is just padding and border colour adjustments in the css.

[SoLoGHoST]

2 separate background images in the same div?  Why not make it a <span> tag inside of the <div> and give the <span> a background image?  There you go.

EDIT:  Now that is way COOL Antechinus!!  LOVE IT!  Go with that for sure!

[Antechinus]

Thanks. I like it.

RE the quote images: I know you can add another span inside the div, but tbh Curve is markup city already and we really are trying to not complicate things any more than absolutely necessary at this stage. This sort of thing tends to creep and I'm not sure an extra little " doover is worth yet more markup and css to handle it.

[SoLoGHoST]

I see what you're saying.  Well, it's all good, maybe using CSS Sprites could help out with this?  But really liking the quote box you got going on there.  Definitely 1 to go with.  Reminds me of the way posts are with 2 different colors, and makes perfect sense.

Cheers

[Antechinus]

Oh we are using sprites all over the place anyway. Right click and view image anywhere in the header or footer of the theme, or even in the top and bottom strips that do the rounded corners on posts. Almost the whole theme is one big sprite. I used part of it to do those quote header bars. It's actually the titlebg section of the sprite.

[SoLoGHoST]

Wow, so I see

[Antechinus]

The menus for the whole theme are done with another sprite. The buttons (all three colours) and the drop menu backgrounds are one image. The quote/modify/remove/split topic/ etc icons are another small sprite. The new topic icons on the message index are another.

This is one of the main reasons Curve loads like a rocket. Hardly any images need to be called from the server.

[SoLoGHoST]

Nice, so it actually loads all images right from the beginning and calls the image offsets based on the CSS rule, which in turn gets called through php in the templates.  That would explain a lot.  I just love using Sprites, though, it can be slightly frustrating and a bit more difficult to handle.

[Sverre]

S'uggers. I was thinking something more like this.

ETA: Oh and the idea there is to use the existing main_block.png to get a rounded top right corner without any more markup or images. The rest is just padding and border colour adjustments in the css.

Personally, I think it's a bit too complex and heavy looking, so I'm afraid that it would get old really fast once the novelty wears off. And although not as bad as in Core or other examples I've seen, side borders also means that the "dreaded" pyramid effect is created in deeply nested quotes

Obviously, I'm not entirely objective, but I'm still partial to the bottom border only version I posted in another topic...

Oh we are using sprites all over the place anyway. Right click and view image anywhere in the header or footer of the theme, or even in the top and bottom strips that do the rounded corners on posts. Almost the whole theme is one big sprite. I used part of it to do those quote header bars. It's actually the titlebg section of the sprite.

There seems to be quite a number of single images left though, so is the transition to image recombination still a work in progress, or are you roughly at a point where you want it to be for the final release?

[SoLoGHoST]

S'uggers. I was thinking something more like this.

ETA: Oh and the idea there is to use the existing main_block.png to get a rounded top right corner without any more markup or images. The rest is just padding and border colour adjustments in the css.

Personally, I think it's a bit too complex and heavy looking, so I'm afraid that it would get old really fast once the novelty wears off. And although not as bad as in Core or other examples I've seen, side borders also means that the "dreaded" pyramid effect is created in deeply nested quotes

Obviously, I'm not entirely objective, but I'm still partial to the bottom border only version I posted in another topic...

I disagree.

[Antechinus]

You will get a pyramid effect in nested quotes anyway. No way of avoiding it unless you make all backgrounds the same colour with no borders, and if you do that it will all run together in a mess.

Personally I didn't like the bottom-border-only look. However the borders are easy to change for colour, width, style (solid, dashed, dotted, whatever) or complete removal. That's all very simple with minor css edits. I like borders that "clean up" and define the edges without standing out too much. I think it looks raw and ill-defined without any border at all. You don't want any borders. Other people may want them 10px wide and bright orange.

ETA: Oh and yes, we are pretty close to having amalgamated the images we want in sprites. Some of them are best left as single images.

[TurtleKicker]

Well, this is what I came up with.

Actually, this is one of my favorites of all the recent submissions.

[Sverre]

You will get a pyramid effect in nested quotes anyway. No way of avoiding it unless you make all backgrounds the same colour with no borders, and if you do that it will all run together in a mess.

Yeah, to some degree the pyramid effect will always be present in nested quotes with alternating colours, but at least in my experience, side borders greatly enhances the effect...

Personally I didn't like the bottom-border-only look. However the borders are easy to change for colour, width, style (solid, dashed, dotted, whatever) or complete removal. That's all very simple with minor css edits. I like borders that "clean up" and define the edges without standing out too much. I think it looks raw and ill-defined without any border at all. You don't want any borders. Other people may want them 10px wide and bright orange.

On my own forum, I can style them just like I want them, but I just hope the default quotes, which I'm likely to run into here and on several other SMF forums I frequent, are kept sleek and simple rather than excessively complex and overstyled. In fact, I would be perfectly happy with the current top and bottom border version - even if it's not my favourite - as long as the borders are given a lighter colour shade.

ETA: Oh and yes, we are pretty close to having amalgamated the images we want in sprites. Some of them are best left as single images.

Hmm... I would have thought that something which is loaded as often as the on/off images on Board Index for example would warrant the extra markup???

[Antechinus]

Well they are cached anyway, and using sprites only helps initial caching. Once the images are in your browser having them in a sprite is no advantage.

[Arantor]

Well they are cached anyway, and using sprites only helps initial caching. Once the images are in your browser having them in a sprite is no advantage.

In some cases there may even be a memory/performance hit if you have too many instances of a single huge image being reused many times.

[SoLoGHoST]

I just want to take a moment of Silence for all Theme Developers out there that are going crazy because of this
...
...
...
Ok, whew, all done!

[[unplugged]]

Why not just use the pseudo-elements :before and :after in css?

Code Select Expand

.quote {
background:#d7daec;
border:1px solid #9b9eb3;
}
.quote:before
{
content: url(path/to/images/leftquote.png);
}

.quote:after
{
content: url(path/to/images/rightquote.png);
}

and then the quote code would be

Code Select Expand

<span class="quote">This would be quoted text.</span>

There you have left and right images within a single span. No awkward markup, and I believe all major browsers support the pseudo css. If they don't, then the images simply wouldn't show, which is what is basically being used now. Just my 10 cents.

[MultiformeIngegno]

S'uggers. I was thinking something more like this.

Beautiful!!!

P.S.: Is only my opinion, or <code> font-size is.. too small? it's difficult to read!!

[Antechinus]

Well actually I've refined the quote idea since then as after sleeping on it I thought it was a bit heavy and cluttered. I'm currently thinking this would be the best option.