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
Comment | File | Size | Author |
---|---|---|---|
#8 | 2057383icondesktop.png | 99.59 KB | andymartha |
#8 | 2057383iconmobile.png | 47.01 KB | andymartha |
#6 | druplicon-installer-background.patch | 10 KB | jbrown |
#5 | druplicon-installer-background.patch | 8 KB | jbrown |
#1 | 2057383_1-druplicon-installer-watermark.patch | 9.01 KB | cweagans |
Comments
Comment #0.0
jbrown CreditAttribution: jbrown commentedAdd images.
Comment #0.1
jbrown CreditAttribution: jbrown commentedFix images.
Comment #1
cweagansRerolled 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.
Comment #2
cweagansI really like this as a path forward, fwiw :)
Comment #3
jbrown CreditAttribution: jbrown commentedWhy 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.
Comment #4
cweagansI 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).
Comment #4.0
cweagans...converting links to issues and comments to their respective [#xxxxxx-yyy] equivalents.
Comment #5
jbrown CreditAttribution: jbrown commentedCameron, 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.
Comment #6
jbrown CreditAttribution: jbrown commentedSorry - try this one.
Comment #7
cweagansWhoops :)
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 :)
Comment #8
andymartha CreditAttribution: andymartha commentedAfter 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
Comment #9
webchickAssigning 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.
Comment #10
webchickAlso tagging Usability, since this should get feedback from the UX team.
Comment #11
Bojhan CreditAttribution: Bojhan commentedThere 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.
Comment #12
jbrown CreditAttribution: jbrown commented@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 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.
Comment #13
Bojhan CreditAttribution: Bojhan commented@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 :)
Comment #14
Dries CreditAttribution: Dries commentedI 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.
Comment #15
jbrown CreditAttribution: jbrown commented@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.
Comment #15.0
jbrown CreditAttribution: jbrown commentedAdd endorsements from Dries & webchick
Comment #16
jcnventura CreditAttribution: jcnventura commentedIt seems this is became a duplicate of #2030027: Use the Drupal software logo in the installer.