For those of us teaching online using Google Classroom, there is a fun way to personalize your Google Classroom Banner! You can add just a photo of your classroom, of your students (I did this at the end of last school year, so the kids still had a chance to “see” all their friends, even if it just was a picture) OR you can use a Bitmoji to create a fun header!
This year I decided to use a Bitmoji of myself to create my Google Classroom Banner. To do this you need to:
Open up a Google Slide. Click File, Page Setup, Click on the drop down menu and pick Custom. Then make sure you are in INCHES and your screen size should be changed to: 16.67″ x 4.17″. This will ensure that the dimensions are perfect for your header!!
Next you get to decorate!!! A lot of teachers are using their header to create a classroom… just in a stretched out way. Others are using it more like a Bulletin Board. That’s what I decided to do! Here was my original post (I used Google Buttons that Bethany Jean created – they are GREAT, you can find a copy here: https://docs.google.com/presentation/d/15DMaVcDdahjiVPbBU90HTEFIeE_shgxrQTNeh5DifOk/copy?usp=sharing )
After adding some of the buttons/banners from her link, I also added a real photo of myself and a Bitmoji version as well (they will see me during Live lessons, but I will be using my Bitmoji self on some flyers, expectation posters, etc; so I wanted my students to be familiar with who that was as well!).
This was SUPER easy to make & I made sure I kept most the of material on the right side of the screen since the left side has the class codes, etc on your Google Banner. When I added the above picture up on the Banner/Header it ended up looking like this:
As you can see there is an Overlay (the grayness) on top of my originally made banner. This was the tricky part… but not really, just LOOKS tricky… To get rid of the gray overlay:
Right click on the banner. A menu (like below) will pop up, click on inspect.
Then a CrAzY screen of all the “behind the scenes” coding will pop up on the right side of your screen. Don’t be overwhelmed…. you can do this! Scroll down to the bottom. Make sure it is clicked on Styles (highlighted in purple below) then look under: Pseudo (highlighted in blue below) and UNCHECK background color (it will put a line through it, like below).
And then like MAGIC you will have a beautiful header with no more grayish overlay!
I did have a small problem after I took away the overlay… now I couldn’t see the class code & Google Meets link… and that’s problematic! SOOO… I went back into my google slide with my original header design and reworked it:
After I rearranged the bubbles it was MUCH easier to see the class code!
From a Comment – Changing the Font Color on your Header:
I’ve done some playing around and have found that I can change the “Class code” and “Meet link” labels by:
Right click the header, click inspect (just like above) But this time make sure its still on Styles (in purple), scroll down to element.style (in blue) then click on square next to the word: color (in green).
A color choice will pop up (see below):
Then choose what color you would like and it will adjust: “Class code” and “Meet link” in the header. I haven’t figured out how to change the colors in anything, but I will continue to explore! If you know how to (or have figured it out!) Please leave a comment below and tell us how!!!
If you have any questions or extra tips, please leave a comment below!! Thanks!!