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

        Activity

        Andreas Sewe created issue -
        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.)
        Simone Tripodi made changes -
        Field Original Value New Value
        Assignee Simone Tripodi [ simone.tripodi ]
        Simone Tripodi made changes -
        Fix Version/s fluido-1.2 [ 18296 ]
        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!
        Simone Tripodi made changes -
        Status Open [ 1 ] Closed [ 6 ]
        Resolution Fixed [ 1 ]
        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.
        Andreas Sewe made changes -
        Status Closed [ 6 ] Reopened [ 4 ]
        Resolution Fixed [ 1 ]
        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.
        Andreas Sewe made changes -
        Attachment mskins-28-it.patch [ 59384 ]
        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.)
        Andreas Sewe made changes -
        Attachment maven-theme.patch [ 59387 ]
        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!
        Robert Scholte made changes -
        Fix Version/s fluido-1.2.2 [ 18392 ]
        Resolution Fixed [ 1 ]
        Status Reopened [ 4 ] Closed [ 6 ]
        Assignee Simone Tripodi [ simone.tripodi ] Robert Scholte [ rfscholte ]
        Fix Version/s fluido-1.2 [ 18296 ]
        Mark Thomas made changes -
        Project Import Sun Apr 05 13:18:34 UTC 2015 [ 1428239914904 ]
        Mark Thomas made changes -
        Workflow jira [ 12727077 ] Default workflow, editable Closed status [ 12764664 ]
        Mark Thomas made changes -
        Project Import Mon Apr 06 01:27:16 UTC 2015 [ 1428283636573 ]
        Mark Thomas made changes -
        Workflow jira [ 12964885 ] Default workflow, editable Closed status [ 13001813 ]
        Transition Time In Source Status Execution Times Last Executer Last Execution Date
        Open Open Closed Closed
        37d 6h 48m 1 Simone Tripodi 17/Mar/12 15:09
        Closed Closed Reopened Reopened
        10d 11h 4m 1 Andreas Sewe 28/Mar/12 03:14
        Reopened Reopened Closed Closed
        97d 12h 10m 1 Robert Scholte 03/Jul/12 15:25

          People

          • Assignee:
            Robert Scholte
            Reporter:
            Andreas Sewe
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development