Maven Skins
  1. Maven Skins
  2. MSKINS-28

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

    Details

    • Type: Wish Wish
    • Status: 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

      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. maven-theme.patch
        0.5 kB
        Andreas Sewe
      2. mskins-28-it.patch
        7 kB
        Andreas Sewe

        Activity

        Hide
        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
        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
        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
        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
        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
        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
        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
        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
        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
        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
        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
        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
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development