Make it possible to center "powered by" logos in sidebar

Hello, in order to center align the powered-by logos, you can create a custom site.css in src/resources/css/site.css. Inside this file, put the following CSS:

#poweredBy

It will align the powered-by logos, without the need to change the skin's code

Hope that helps.

Thanks, Bruno. That solves the problem for one project. It gets tedious, however, if you have dozens of them, as a custom site.css is not inherited. (At least, I don't know a way to inherit a resource from parent to child project.)

fixed on trunk see r1301988 thanks Bruno for the suggestion!

Unfortunately, as I just discovered, the fix doesn't quite work as soon as you have multiple "powered by" logos.

Compare the left sidebars of the following two sites, for example: http://www.alia4j.org/alia4j/ (fluido 1.1) and http://stage.alia4j.org/alia4j/ (fluido 1.2). When viewing the latter in a browser whose viewport is wide enough (1920px works; alternatively adjust the logos' width using Firebug or some such), the two logos (AOSD Europe, CASED) are shown side by side, which can be quite ugly, depending on the logos' sizes and aspect ratios.

IMHO, turning the images into block-level elements and centering those would be a better solution than centering them as inline-level elements with text-align:

img.poweredBy

Unknown macro: { display}

See my previous comment on problems with multiple "powered by" logos.

Thankjs for the feedbacks Andreas - can you provide please a patch with a testcase? It will be much more than appreciated!
Many thanks in advance, all the best!

Integration test using 5 different-sized "powered by" logos.

GREAT, thanks a lot! I'll review the patch ASAP!
best,
-Simo

Added a patch to accompany the integration test. (CSS tested on Firefox 11 only.)

@Andreas, could you verify if the patch is still required? I've updated the version of bootstrap and I don't see any real difference.

I just build a 1.3-SNAPSHOT. There are still two problems present, both due to the img.poweredBy being inline rather than block-level content:

• If the images are small, several may end up next to each other.
• If an image is larger than the sidebar, however, its edges are cut off.

You can experiment with this by explicitly setting the logo's width in your site.xml.

If you move to block-level content, you avoid the first issue as non-floating blocks cannot sit side-by-side and the second issue because the contained block pushes the boundaries of its container (the sidebar).

Fixed in r1356876
I don't see the issue with the large logo's.
I can imagine that logo's next to eachother might look odd, it just depends on the sizes. But having them under eachother seems like a safe solution.

Thanks for the patch!