Maven Skins

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

Details

  • Type: Wish Wish
  • Status: Closed Closed
  • Priority: Minor Minor
  • Resolution: Fixed
  • Affects Version/s: fluido-1.1
  • Fix Version/s: fluido-1.2.2
  • Component/s: Fluido Skin
  • Labels:
    None
  • Number of attachments :
    2

Description

Left alignment may look OK for badge-like logos like <http://maven.apache.org/skins/maven-fluido-skin/images/logos/maven-feather.png>, but is quite ugly for other types of logo.

  1. Text File
    maven-theme.patch
    28/Mar/12 6:52 AM
    0.5 kB
    Andreas Sewe
  2. Text File
    mskins-28-it.patch
    28/Mar/12 4:09 AM
    7 kB
    Andreas Sewe

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Bruno P. Kinoshita added a comment -

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

{ text-align: center; }

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

Hope that helps.

Show
Bruno P. Kinoshita added a comment - 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 { text-align: center; } It will align the powered-by logos, without the need to change the skin's code Hope that helps.
Hide
Permalink
Andreas Sewe added a comment -

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.)

Show
Andreas Sewe added a comment - 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.)
Hide
Permalink
Simone Tripodi added a comment -

fixed on trunk see r1301988 thanks Bruno for the suggestion!

Show
Simone Tripodi added a comment - fixed on trunk see r1301988 thanks Bruno for the suggestion!
Hide
Permalink
Andreas Sewe added a comment -

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}
Show
Andreas Sewe added a comment - 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}
Hide
Permalink
Andreas Sewe added a comment -

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

Show
Andreas Sewe added a comment - See my previous comment on problems with multiple "powered by" logos.
Hide
Permalink
Simone Tripodi added a comment -

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!

Show
Simone Tripodi added a comment - 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!
Hide
Permalink
Andreas Sewe added a comment -

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

Show
Andreas Sewe added a comment - Integration test using 5 different-sized "powered by" logos.
Hide
Permalink
Simone Tripodi added a comment -

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

Show
Simone Tripodi added a comment - GREAT, thanks a lot! I'll review the patch ASAP! best, -Simo
Hide
Permalink
Andreas Sewe added a comment -

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

Show
Andreas Sewe added a comment - Added a patch to accompany the integration test. (CSS tested on Firefox 11 only.)
Hide
Permalink
Robert Scholte added a comment -

@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.

Show
Robert Scholte added a comment - @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.
Hide
Permalink
Andreas Sewe added a comment -

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).

Show
Andreas Sewe added a comment - 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).
Hide
Permalink
Robert Scholte added a comment - - edited

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!

Show
Robert Scholte added a comment - - edited 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!

People

  • Assignee:
    Robert Scholte
    Reporter:
    Andreas Sewe
Vote (0)
Watch (2)

Dates

  • Created:
    Updated:
    Resolved: