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!!
Kinder Kid at Heart 
Hi Katie! Thanks so much for the blog. Love them. I was wondering how you make your name black instead of white letters since my background is light but I don’t want the gray screen over the banner. Any ideas?
LikeLike
Hey Carrie!! I did play around with the coding and found a way to change the color for the “Class code” and “Meet link” – I added to my post for others too! So check it out. If I find a way to change the colors on the other words on the Header, I will make sure to post!
LikeLike
Hello! I took your class this morning and LOVED IT! As I was playing around with the font colors, I accidentally shrank the section with the class name. I can’t figure out how to fix it. I deleted the class and started fresh, but it seems the settings are still there. Any tips? TIA
LikeLike
Hello! I tried to post a comment a bit ago, but don’t see it yet, so if this is a repeat, I apologize. I took your AWESOME class today. I have been trying to get rid of that grey banner overlay forever, I am so happy. Lol. I was playing with the font colors and accidentally changed the “class title” sizing. I can’t get it back to how it was without making other areas extra large. Do you have any ideas on how to fix this? I tried to just delete the class and start fresh, but the settings are the same. Any help you can provide would be super appreciated. TIA
LikeLike
Hi! I am SO glad you enjoyed the session. It seems like you’re in a pickle (and I don’t like pickles!) Lol. I do NOT know.. but I will also play with it and see what I can come up with & I’ll respond with what I’ve come up with! 🙂 Good luck!!
LikeLike
HELP!! I attended your presentation and was trying to make my class banner- I can not get the grey off the banner? I right click and inspect is greyed out. I am on a PC- any ideas? Thanks!!!
LikeLike
Oh man!! Soooo I noticed that on my CPS Google Classroom I can’t take the gray away but on my personal Google Classroom, I can… that might be why! CPS has to make things just a little more difficult… lol
LikeLike
Hello!! I followed steps to get the black overlay off my banner and it worked!!! But it doesn’t seem to save. Every time I close out my classroom it goes back to the original. Any ideas?
LikeLike
hmmm… honestly… no! Yikes, it seemed to work on my end (with my personal google classroom, not my CPS one) I will continue to play around and see if I can find anything else to try!
LikeLike
Hi Carrie,
Thanks for sharing your material…so helpful!
I followed your directions on how to brighten up my banner and it worked like magic except when I re-opened my google classroom the gray tint was back, Is there a way to save the changes?
LikeLike
hmmm… honestly… it seemed to work on my end (with my personal google classroom, not my CPS one) I will continue to play around and see if I can find anything else to try!
LikeLike
Is it correct that we cannot remove the gray overlay in our CPS Google Classrooms? It seems that the “Inspect” feature is not enable.
LikeLike
Yea… apparently bc of ADA regulations, they keep that gray overlay on so students/people with visual impairments can easily view your class banner & the information that is on there! Sorry!!
LikeLike
Great Sessions!!! I also, have been trying to get rid of the dark overlay. My computer won’t allow me to select inspect. Is there something else I may can try?
LikeLike
Hmm… I’ll have to look into it – I know that one of the reasons they have that dark gray over it is for ADA compliance (for visual impairments), so I’m not sure if they are going to give a feature to take that away… but I’ll keep researching!
LikeLike
Hi Carrie, I really enjoyed your presentation via CPS-Googlepalooza. In response to removing the overlay in the Google banner, I found that if you are using a CPS device you can’t access “inspect” but it is possible using your personal device. Now I just need to find out how to change the font color. Any suggestions?
LikeLike
So I learned that the gray overlay is actually for ADA compliance (so visually impaired students/people will be able to more easily see the information that is located in your banner) So I don’t think CPS is allowing us to adjust it bc of that reason… sorry!!
LikeLike
Thank you so much for blogging about this issue. It has annoyed me for a long time now and I am so happy that my designed banner is now bright and colourful!
LikeLike