Dries suggested having changing the background to a Druplicon watermark: #1337554-175: Develop and use separate branding for the installer
Webchick also said she likes it: #2030027-169: Use the Drupal software logo in the installer





Meta issue: #2030027: Use the Drupal software logo in the installer

It is very strong visually, but people will (hopefully) not be spending much time in the installer.

The Druplicon SVG at https://drupal.org/node/9068 has an invalid character, so I had to remove it manually before I could do anything with it. I gave it an opacity of 20%, ran it through the minimizer at https://petercollingridge.appspot.com/svg-editor and compressed it into SVGZ format. The filesize is 1.56kB. :-)

There is a bug in Apache where it does not set the correct encoding for SVGZ, so I had to make an addition to .htaccess : http://kaioa.com/node/45 We should be using SVGZ as much as possible in Drupal.

If the user has a very large window on a very large high resolution screen and their browser hasn't been configured properly (zoomed in), it may look strange as too much of the Druplicon will be visible. Apple Retina displays will not have this problem as the web browser is calibrated automatically. See CSS px is an Angular Measurement.

I removed the vertical-align: middle; (which only seemed to work on Chrome). It is much better to have the dialog a fixed distance from the top.

I also added in the curved corners to the mobile version, although weirdly the mobile version does not appear when viewed in Firefox or Chrome on Android, only when I resize a desktop browser.

It is not necessary to use -moz-radial-gradient

druplicon-watermark.svg_.gz needs to be renamed to druplicon-watermark.svgz and added to core/themes/seven/images
noise-low.png can be deleted as it is not used anywhere else.

Other responses to this can be found from #2030027-161: Use the Drupal software logo in the installer

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jbrown’s picture

Issue summary: View changes

Add images.

jbrown’s picture

Issue summary: View changes

Fix images.

cweagans’s picture

Rerolled patch with new file included + deleted core/themes/seven/images/noise-low.png. Should just be able to apply the patch and have it work now.

cweagans’s picture

I really like this as a path forward, fwiw :)

jbrown’s picture

Why does Git encode the added file as text, but the deleted file is binary? I didn't the put the binary changes in the patch because of this problem.

Thanks for your encouragement Cameron!

To avoid showing too much of the Druplicon on very high resolution displays that are not zoomed in we could use media queries.

cweagans’s picture

I have no idea why Git does what it does. :)

I just tested on some really high resolutions. 1920x1200 still looked okay with this patch, but at 2880x1800, you can see almost all of Druplicon. However, I'm not sure it's that big of deal - there aren't many people with that high of resolution, and we can always revisit this later if HiDPI displays become the norm (since we'd just be adding a couple of media queries + scaling an existing SVG).

cweagans’s picture

Issue summary: View changes

...converting links to issues and comments to their respective [#xxxxxx-yyy] equivalents.

jbrown’s picture

Cameron, you left out the .htaccess changes so #1 didn't work. ;-)

I zoomed the Druplicon out a little bit more and also made the background "fixed" so it doesn't move when you scroll down the page.

This patch includes the binary modifications.

jbrown’s picture

Sorry - try this one.

cweagans’s picture

Whoops :)

I have a .htacess hack that I have to apply for my environment (since I use VirtualDocumentRoot) - I have to set RewriteBase /, so I excluded .htaccess from the patch - I didn't realize there was a change there :)

andymartha’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
47.01 KB
99.59 KB

After applying the patch druplicon-installer-background.patch by jbrown in #6 to a Drupal 8 fresh install 8/12, I got these nice screenshots at 1280xsomething? and 480x800

2057383icondesktop.png

2057383iconmobile.png

webchick’s picture

Assigned: Unassigned » Dries

Assigning to Dries, although, I wonder why this was done as a separate issue. #2030027: Use the Drupal software logo in the installer seems like it should be notified about this issue, as there are plenty of people there who care about this.

webchick’s picture

Issue tags: +Usability

Also tagging Usability, since this should get feedback from the UX team.

Bojhan’s picture

Status: Reviewed & tested by the community » Needs review

There is absolutely no reason for this to be a separate issue, I actually advised against doing it in the other issue - sadly that was ignored. I significantly dislike strategies that are set out to ignore a part of the community, and to just rush a new design in. If anything this issue should simply be closed, and this patch should be brought into the actual issue. Practices like this should be discouraged.

I have spoken to this about with yoroy, we agree that it looks pretty cool. It conflicts a little with the style guide, that is against any big ornamentation. But we see no other way to solve this issue, than introduce some of it. Other ornamentation proposed so far requires a change of the Druplicon to fit in well.

My only point of change would be to see if we can reduce or remove the white effect in the top left, I think it makes it a little too busy, it also isn't necessary to give the idea of a druplicon the infinity eyes do that. I also noted this in the other issue.

Frankly, I'd also love some feedback from chx. Because he was the primary reason we do this, I don't want this to have endless follow ups.

jbrown’s picture

@webchick, I notified the other issue at the time: #2030027-183: Use the Drupal software logo in the installer.

I stand by my decision to create a separate issue for this. It makes sense to do so and is in line with established best practise on drupal.org.

Typically when an issue gets too long we simply create another one. The other issue has almost 200 comments, with many large and heavy in-line images.

The other issue deals with the broader topic of adding the Druplicon back to the installer. This issue is for exploring one specific technique for that. We may end up implementing more than one. If we decide not to proceed with this technique, this issue can be closed in isolation from the broader discussion.

I marked the other issue as [META] at the time, but I failed to add a link to this issue in the summary. I will do this now.

Patches that are created to implement other ideas from the meta issue should also be in separate issues and added to the summary of the meta issue.

@Bojhan, I take offence at this statement:

I significantly dislike strategies that are set out to ignore a part of the community, and to just rush a new design in.

I have been part of the Drupal community for seven years and have never sought to participate in the manner you describe. Please withdraw your statement.

My strategy was not to ignore part of the community. I came up with an idea, I made a mockup, I posted it in the issue, people got excited, I got excited, I made a patch, it made sense to create an new issue. There was no nefarious intent for my creation of this issue.

I agree the effect in the top left is too busy. The first image in #8 is not the intended effect. It is meant to look like the last image in the summary - I will post an updated patch that uses a media selector.

Bojhan’s picture

@jbrown Sorry for coming of strong, not my intend to offend you. I have been part of these kind of visual changes for many years, and its incredibly hard to keep them on track - fragmenting to different issues, does not make it easier. Although I understand its very uncomfortable to discuss in a #200 comment thread. It is the best way, to make sure those previously involved in exploration and discussion are still part of the decision.

Although its very common in technical issues, to at some point turn it into all kinds of small issues - for design a much more holistic approach should be taken. While we can easily make sub-issues for each direction, that largely feeds the process where what gets the most code activity gets in (that leaves many designers left in the cold). While you might not feel like it alienate a part of the community, it most certainly does - because people are now forced to track all the possible solutions in separate issues with no oversight, which one is going in. I hope that puts some background to why. So we might just need to agree to disagree on this :)

Happy to know we are fixing the top left :)

Dries’s picture

Assigned: Dries » Unassigned
Status: Needs review » Postponed

I believe we're still flushing out the preferred approach and complete solution in #2030027: Use the Drupal software logo in the installer. There are a lot of good suggestions in #2030027 and there appears to be quite a bit of momentum. Until we have made a decision in #2030027, it makes no sense to commit this patch. Let's focus on getting to a conclusion in #2030027 first, please. Thanks for understanding.

jbrown’s picture

@Dries, to be clear, I was not advocating that a patch from this issue should be committed before a decision was made in #2030027: Use the Drupal software logo in the installer. I just wanted some space to develop this idea. I think that was the right decision. At your request I will continue to develop this idea in #2030027.

jbrown’s picture

Issue summary: View changes

Add endorsements from Dries & webchick

jcnventura’s picture

Status: Postponed » Closed (duplicate)

It seems this is became a duplicate of #2030027: Use the Drupal software logo in the installer.