Individual style per sidebar item

[Eni]

Me again

I searched the forum up and down now. Pretty sure I saw a thread with the solution just a while ago.

For a colorful children's blog, I'd like to give every sidebar item a different style (color and top/bottom border image). If I recall correctly, every sidebar plugin has a specific css class I can define for the color. Can anyone give me a hint how the name format for these are?

As for the images, I assume the CSS3 border-image property is not a recommended solution at the moment? I'm thinking of nesting a div with the second image, while the first is used as background image, into the plugin layout. That's the easiest and most browser-safe solution I can think off

~eni

[Don Chambers]

Yes, most sidebar plugins emit both a common, and a unique class, such as:

Code: Select all

<div class="serendipitySideBarItem container_serendipity_plugin_comments">
<div class="serendipitySideBarItem container_serendipity_plugin_recententries">
etc....

How this is structured is dependent on your template's sidebar.tpl smarty template. If your template does not have such a file, it will use the one from the default template.

There may be some duplicate class names. One that comes to mind is the htmlnugget plugin - the plugin is "stackable" and as such can be used many times, but each instance will have the same class name. There may be others.

You can certainly use the css3 border image property, but not every browser will display it. I am not quite sure what you are trying to accomplish with nesting divs... perhaps you could explain, or show what you are trying to do?

[yellowled]

In addition to what Don said, you can still use different styles for multiple instances to a stackable plugin by giving each instance of a plugin a unique id in your sidebar.tpl – but I think you'd need to know beforehand which stackable plugins you're using, so I'm gonna save the explanation unless you really need it. There are not that many stackable plugins anyway.

As for the border-image support, see http://caniuse.com/#feat=border-image – only partial support in Opera, no IE support even in IE 10. You could, however, see the border-images as a progressive enhancement. That means you'd first come up with a simple style (without border images) which works in IE, Opera and older browsers and then add border-images for the browsers which actually support them.

Adding extra divs for multiple background images instead (like in the sliding doors technique, I guess) is kind of outdated, but if you want or need true backwards support and insist on the site looking just the same in any browser, that's the way to go. It will be a painful way, though.

YL

[Eni]

Thanks you, that was the class I was looking for

The kid I'm doing the layout for, wants to have different colored "stickies" for the sidebar items, similiar to this website (which I just googled as an example):
http://kool-entertainment.co.uk/index.html

So, I was planing for the sidebar items to have a top and bottom image for folded/lifted corner effects and a pin or paperclip on top. I haven't made them yet, so still thinking about how to do it best. But I wanted to make them in a way that the sidebar item isn't fixed-sixed in it's height (aka one fixed background image, but only the top/bottom with the middle being flexible), so the child can add links and categories without worrying on the item size extending the graphic.

With the "nesting", I meant that e.g. the top image is defined as background image and then there's an extra div containing the second image in the plugin layout defined for being on the bottom. The border-image property sounds like a great alternative solution but since this is for a children's blog and it's safe to assume that a lot of friends of the kid use the IE, I think it's better to have the layout be as browser-safe as possible.

I hope I'm understandable. Probably thinking too difficult x_X

[Don Chambers]

if you are not using a template with it's own admin template, you might be able to model your sidebars from the admin sidebar. It uses a unique top image, a repeating "body" image, and a unique bottom image for each sidebar group (ie Entries, Media, Appearance, Administration). If the image you use for your "body" is repetitive, each sidebar item can be of any height. Just a thought.