7

Currently, it appears like a square with no text beside, we want to customize the look & feel without disturbing the icon of course to match our other buttons.

Already tried adding styles to the div which is converted to the share icon, but unsuccessful so far.

<div id='widget-div' class='btn btn-blue'>Google Classroom</div>

The above line renders as below :

enter image description here

Any idea how to proceed further or which direction to look into ?

Hareesh
  • 113
  • 9
  • Did you check this link https://developers.google.com/classroom/guides/sharebutton which has sample on customizing classroom share button. – SGC Aug 14 '15 at 20:45
  • 1
    yeah, went through it, but all I could find is that it allows to change to 3 predefined colors and sizes. – Hareesh Aug 17 '15 at 04:32

3 Answers3

4

To get a completely different share button you will need to write your own JS to style the button correctly, handle the mouse click, etc., and then direct the user to a URL of the form https://classroom.google.com/share?url=https://foo.com/ (source). (You'll need to following the branding guidelines too.)

Neal Gokli
  • 475
  • 7
  • 18
mjs
  • 63,493
  • 27
  • 91
  • 122
1

To modify the button you can refer to the Share button documentation. However, there are some restrictions that you would need to follow to modify the Classroom button in the appropriate way.

Here you can find all the specifications and restrictions to the logo. Check if these specifications allow you to modify the logo accordingly to your needs.

Gerardo
  • 3,460
  • 1
  • 16
  • 18
  • 2
    have already gone through, but couldn't find any way to customize the way I want (please refer the snapshot in the question). All it allows is change to 3 predefined colors and sizes. Please see the updated question on what type of customization I need. – Hareesh Aug 17 '15 at 04:34
0

You can put the white logo (square or circle) on a colored background of your choice. Full brand guidelines here

SGC
  • 1,025
  • 1
  • 6
  • 6