Add our logo to the "powered by backdrop" footer.

[jenlampton]

Having an image that links to backdropcms.org is great for increasing the search ranking of backdropcms.org.

---

PR by @BWPanda: https://github.com/backdrop/backdrop/pull/2706

[ghost]

Here's a PR that adds the logo to the '/misc/' directory, displays the logo in the footer and styles the logo in the Bartik theme.

I had to invert the logo colours so it'd display nicely on Bartik's dark-gray footer. Hope that's acceptable/allowed...

[ghost]

Here's what it looks like:

[klonos]

Like it!

[quicksketch]

This block should work in any region and on any theme, so using white text like this could be problematic. We might be able to bundle an inverted logo like this for the footer and place it with CSS in Bartik only, but use a normal black logo for the block by default.

[ghost]

In D6 there was the ability to change the colour & size of the logo used in this block: http://cgit.drupalcode.org/drupal/tree/modules/system/system.module?h=6.x#n590 Perhaps we should do something similar (e.g. have a 'light' and 'dark' option)?

[jenlampton]

I personally think D6 had way too many options for changing the footer logo. How about we just offer two: black on white, and white on black (this looks like a great one for black-on-white). Surely one of them would work for most use-cases.

[docwilmot]

The black box wouldn't work out on a site with anything but a black background, why not just do one with white text, transparent background, the other black, also transparent background. Fits everything then.

[jenlampton]

Sounds good. Let's do it :)

[quicksketch]

I like the two-option approach (white-on-transparent and black-on-transparent). Back when this was an image in Drupal 6, the image/text didn't actually say "Powered by", it was just an image that had the alt text "Powered by Drupal". For the most versatility, perhaps we should ditch the text and have just the image (with alt text). Then we won't have to worry about font size or style conflicting with the image that is right next to it.

[thejimbirch]

Working on this.

[quicksketch]

@wesruv made a CSS-only logo in https://github.com/backdrop-ops/backdropcms.org/pull/91. Perhaps this logo could be used in our block instead of an image? It would have the advantage of being colorizable, so we could use both black and white. Just an idea.

[wesruv]

Here she blows: http://codepen.io/wesruv/pen/Xbvbvr?editors=110

There are three styles I made easy to change in that codepen:

• Logo size (decided by div width, can be any unit: %, px, em, ex, vw, vh, bla bla bla)
• Logo colors (see comments for Primary Color and Secondary Color)

It's using aspect ratio CSS, so the width of the logo will update the height.

[wesruv]

Worth noting that this isn't IE8 compatible, if the browser can't render it properly it'll just be a black square (not so bad).

Compatibility: http://caniuse.com/#feat=transforms2d

[ghost]

Made a new PR (https://github.com/backdrop/backdrop/pull/2706) that adds @wesruv's CSS logo to the footer. Also added a setting in the block configuration to choose between black and white logo. Feedback welcome!

[klonos]

@BWPanda I have tried the PR sandbox, and although I see the settings in the "Powered by" block, I see no logo actually being rendered - only Drop. Am I missing something?

[ghost]

Oh, so the Basis theme defines the system.theme.css file in its info file, but without actually adding it, effectively removing it. So it doesn't work in Basis. Need feedback on whether that's OK, or if CSS should be moved elsewhere (the whole 'who should have the final say regarding CSS' debate). So try any other theme and it should work.

[ghost]

Also, this issue was the subject of my first Backdrop (and indeed any) screencast: https://youtu.be/XwOaCEUHKTE

[klonos]

I have left comments inn the PR.

[ghost]

Should we add @wesruv's CSS logo to the Presskit page so others can use it in their own projects?

[klonos]

It wouldn't hurt @BWPanda

[ghost]

@klonos I've updated the PR based on your suggestions. I worked out an elegant way to avoid the inline CSS, and simplified the link tag code so it's much easier to read/understand.

Please re-test and let me know what you think.

[herbdool]

Is the idea to also get it into the Basis theme? In that case you might want to add it here too https://github.com/backdrop/backdrop/blob/1.x/core/themes/basis/css/component/footer.css

[ghost]

@herbdool Good idea. See updated PR.

[herbdool]

This is the footer now in Basis with default colours.

[docwilmot]

TBH I'm not loving the fact that there are two separate images/icons/logos at once; it feels like a bit of overkill.

Could the block allow you to pick one instead? Or two different blocks?

[herbdool]

Agreed it seems like overkill.

[stpaultim]

Looking at this issue got me thinking about my friend, Drop the Dragon. In regards to this issue and the question of having both both logo and mascot next to each other:

1) Drop is only there in the Basis theme. The block is theoretically there by default in every theme. It only clashes with Drop in Basis. 2) If a user were to find the presence of both Drop and the logo distracting, we would rather they hide drop and keep the logo (which links to BackdropCMS). But, we've made it much easier to remove the "Powered By Backdrop" block than it is to remove Drop. 3) We could float the logo to the right side of the page in Basis, which is at least a little better than what we have now.

This problem inspired me to open an issue that makes it easier for a site builder to remove Drop from Basis: https://github.com/backdrop/backdrop-issues/issues/3895

EDIT: My problems removing Drop were user error. Drop is removed from Basis if the "powered by Backdrop" block is removed or if it is repositioned.

[klonos]

Code-wise things look OK now @BWPanda 👍

I agree that both the logo and Drop at the same time in Basis is overkill.

Here's how things look if you add a block with custom text after the "Bowered by" block:

...and if you move the custom text block before the "Bowered by" block, Drop disappears:

In the later case, it would make a lot more sense to me to keep Drop resting at the top of the footer, and have the Backdrop logo remain after the footer contents.

Perhaps we should move drop in Basis settings instead of the block?