Forum:Skinning for variable width widgets - can CSS handle this

This is a tricky question about background-image styling using CSS. I rather optimistically hope there is a solution that does not require changes to the HTML structure of a widget.


 * 1) Some attractive skins make use of the CSS property   as opposed to the simpler:.
 * 2) Sometimes that background image is only a few pixels wide but the CSS property   causes it to be tiled in the X direction and in doing so this allows the element being styled to retain that skin regardless of what width it is.
 * 3) A third skinning style is to use a background-image that has left/right symmetry about a vertical center line.

My question is about this third style. So long as the width of a widget is fixed then the background image can be of fixed width also. For widgets that only get used in a 206px wide div of the Monaco sidebar that is an expedient solution for skinning. Over at w:c:rappelz this is precisely what has been done. This image http://images.wikia.com/rappelz/images/8/8c/Widget-dark-top.png is used to decorate the header portion of a widget used in the Monaco sidebar.

Now these widgets can be used in the widget dashboard as well as the Monaco sidebar. The monaco sidebar container has ID  while the three columns in the widget dashboard have IDs ,   and The default widths of sidebar_3/4/5/ is also 206px so normally that fixed width symmetrical image will yield a consistent skin when rendered within the widget dashboard.

So now I add a wrinkle to this situation. Instead of 3 columns of 206px fixed width I make 2 of those columns variable width. The width of two columns of widgets will now scale with the browser window size instead of being a fixed number of pixels. So this begs the question:
 * Is it possible to achieve a   style of skin where that background image has vertical symmetry AND stretches or shrinks with a change of width?

Referring to the example image given earlier this might be sliced into three pieces: left (102px) http://images1.wikia.nocookie.net/central/images/d/de/Widget-dark-top-left.png + center (2px) http://images2.wikia.nocookie.net/central/images/f/f8/Widget-dark-top-center.png + right (102px) http://images3.wikia.nocookie.net/central/images/a/ac/Widget-dark-top-right.png

So now the challenge is how to use these three piece-parts to style the background of an HTML element such that when the width of the element scales with browser window size the vertical symmetry is preserved.

The HTML structure of a widget is typically a DL element with DT title and DD description sub-containers. viz.   Title of widget     
 * I haven't cluttered the above with mention of the  span elements but I am mindful of their presence, as well as the "sprite" images they use.

Is there some clever use of such CSS properties as: that will allow 3 different background images to be used for the one HTML element ?

e.g something that might resemble: .widget_title { background-image:url('/images/f/f8/Widget-dark-top-center.png'); background-repeat:repeat-x;

background-image:url('/images/d/de/Widget-dark-top-left.png'); background-position:left; background-repeat:no-repeat;

background-image:url('/images/a/ac/Widget-dark-top-right.png'); background-position:right; background-repeat:no-repeat; } or is this only going to be possible if I first partition the DT element into 3 parts, viz.   Title of widget      With 3 piece-parts as described above I can imagine how CSS such as: .widget-title-center { background-image:url('/images/f/f8/Widget-dark-top-center.png'); background-repeat:repeat-x; } .widget-title-left { background-image:url('/images/d/de/Widget-dark-top-left.png'); background-position:left; background-repeat:no-repeat; } .widget-title-right { background-image:url('/images/a/ac/Widget-dark-top-right.png'); background-position:right; background-repeat:no-repeat; } ought to do the job.


 * Is it necessary to partition the HTML source in this way or is there a less intrusive solution involving only CSS?

I can appreciate that the most expedient skinning is to forego the left-hand and right-hand slices and only use a solid color or maybe tile with only the image of the center slice. viz.
 * 1) sidebar_3 .widget { background: #333 !important;}
 * 2) sidebar_4 .widget { background: #333 !important;}
 * 3) sidebar_3 .widget_title { background:#D6E0F5 !important;}
 * 4) sidebar_4 .widget_title { background:#D6E0F5 !important;}
 * 5) sidebar_3 .widget_contents { background:transparent !important;}
 * 6) sidebar_4 .widget_contents { background:transparent !important;}

-- najevi 23:29, December 6, 2009 (UTC)