Google Apps for Educators
Illustration by

Styling your website


Google Apps for Educators

with Aaron Quigley

Video: Styling your website

When it comes to creating a Google site,
Expand all | Collapse all
  1. 2m 47s
    1. Welcome
    2. Things to know before watching this course
      1m 30s
    3. Using the exercise files
  2. 18m 22s
    1. What is Google Apps for Education?
    2. Setting up Google Apps
      4m 27s
    3. Verifying your domain name
      2m 40s
    4. Adding users
      5m 30s
    5. Customizing Google Apps
      4m 51s
  3. 26m 11s
    1. Configuring Gmail
      7m 37s
    2. Gmail communication
      5m 5s
    3. Creating a school signature
      3m 56s
    4. Archiving school communication
      2m 0s
    5. Sending large attachments
      3m 5s
    6. Using common shortcuts
      4m 28s
  4. 16m 12s
    1. Collaborating with calendars
      4m 47s
    2. Adding office hours with repeating events
      4m 48s
    3. Creating event invitations
      3m 0s
    4. Managing alerts
      3m 37s
  5. 8m 8s
    1. Understanding Google Drive
      1m 44s
    2. Creating a lesson-planning workflow
      3m 21s
    3. Centralizing school documents
      3m 3s
  6. 13m 6s
    1. Understanding Google Docs
      2m 30s
    2. Collaborating with Google Docs
      3m 10s
    3. Surveying other teachers
      7m 26s
  7. 26m 2s
    1. Getting started with a collaborative planning website
      3m 6s
    2. Adding collaborators
      1m 39s
    3. Adding pages
      3m 55s
    4. Styling your website
      5m 14s
    5. Styling individual pages
      4m 49s
    6. Adding dynamic elements for user interactions
      3m 55s
    7. Publishing your website
      1m 55s
    8. Google Sites in the classroom
      1m 29s
  8. 8m 14s
    1. Adding educational apps
      3m 6s
    2. Using YouTube for education
      2m 27s
    3. Teaching with Google Scholar
      2m 41s
  9. 45s
    1. Next steps

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Google Apps for Educators
1h 59m Beginner Nov 21, 2013

Viewers: in countries Watching now:

Google Apps has been embraced by millions of schools and campuses, but is your classroom getting the most from it? Join educator Aaron Quigley as he shows K–12 teachers how to use Google Apps for Education to streamline communication, save time, and increase content mastery. Administrators can learn how to set up Apps for Education, verify your domain name, and add users, while teachers learn how to sort personal from school email, set up email signatures, add events to calendars, and create lesson plans with Google Drive. Administrators and teachers alike can learn how to set up custom Google sites for collaboration with parents and students, and extend Google Apps with apps like YouTube and Google Scholar.

Topics include:
  • What is Google Apps for Education?
  • Creating a Google account
  • Verifying the domain name
  • Configuring Gmail
  • Archiving school communication
  • Adding office hours to calendars
  • Centralizing school documents
  • Collaborating with Google Docs
  • Creating a Google site
  • Adding educational apps
Education + Elearning
Apps for Education
Aaron Quigley

Styling your website

When it comes to creating a Google site, even though we're using a page template, we have a lot of control over the look and the feel of the actual website itself. Before we start adding a ton of content, I want to go ahead and layout how the site itself should look. Each individual page can also be styled, and we'll take a look at doing that in a later video. To help us start styling the site, I've actually added a little bit of content to each one of our pages. This content is found in chapter six of the exercise files, in a word document called Website_Page_Contents.docx. All I've done is I've edited each page and copied and pasted the appropritate text.

To edit a page from your site, you simply select it, and then click on the Edit button in the upper right hand corner. Let's go ahead and talk about how we can make changes, though, to the overall look of the site. Any time we'd like to make site wide changes, we need to do this by using the Site Management menu. To access this, we're going to click on the More button with the drop down arrow. Under the drop down, we're going to go ahead and choose to Edit the Site Layout. So at this point, we have the ability to make changes that are going to impact the entire site. What that means, is whatever I change here, even though I'm currently viewing the home page, those pages will stay consistent, no matter what page of the site I'm viewing.

For example, let's go ahead and edit the sidebar. On the left hand side, I can see that the sidebar has an Edit button, as well as a Plus button. The Plus button will allow me to add additional elements to the sidebar. The Edit button will allow me to change the format of the sidebar. I'm going to go and click the Edit button. At this point, we have a chance to choose whether or not the sidebar is going to display on the left or the right of the screen and what its overall width is. By default, it's at 150 pixels for this particular theme. I'm going to go ahead and make this a little bit wider, to, let's say, 250 pixels, so that it takes up a little bit more of the screen space.

And as we start adding more pages, as well as more drop downs to those pages, all the text will fit without wrapping. I'm going to go and click OK. You can now see that the sidebar has been widened by an additional 100 pixels. In addition to that, let's go ahead and add something else into our sidebar by clicking the Plus button. One thing that we can do with collaborative sites, especially if we're working on a project, is we can add a countdown to when the project begins. So I'm going to go ahead and add a countdown until the date that we expect our garden to be complete. To edit this, I'm simply going to click on it.

Let's just say that our garden is one year away from completion. I'm going to go ahead and give this event a title, which is Garden Opening. And I'm going to choose a date that's exactly one year from today. So I will go to October 11, 2014. I will click OK. And I can now see on the left-hand side, I have a countdown showing that there's 365 days left until we expect our garden to open. The next thing I'd like to edit is actually the header of our particular sidebar. To do that, I want to make sure that the header's turned on. The buttons in the top corner act as toggle buttons.

Clicking the header button actually turns it off. Clicking it again, turns it back on. In addition to having the header there, I'd also like to add some horizontal navigation. This is some navigation that's going to go across the top of our website, and for this navigation, currently there's only a Home button available. To edit the navigation, I'll put my cursor anywhere above it, and I'll go ahead and click. At this point, I'm going to go ahead and add a couple pages to the navigation. I'll select Funding Page, and I will click OK. And then I will add another page, and I will select Planning Page and click OK.

So at this point, we should have three different items across the top of it. I can also choose whether or not they're be boxes, tabs, or links. I'm going to go and leave them as boxes and then click OK. So now we have some top level navigation. We have some sidebar navigation. We have the title of our site, and then the main content area. The last thing we need to do is take a look at some of these colors. By default, a lot of these fonts are coming through with kind of a red color. However, our school colors are blue. So let's go ahead and edit the colors of these particular fonts. To do that, we need to exit the Site Layout and go into Managing the Site.

I'm going to go ahead and click Close to save those changes. I'm going to go back to More > Manage Site. Under Managing Site on the left-hand side, I'm going to select Themes, Colors, and Fonts. Here I have the ability to change how different parts of the site look. For the entire page, I can choose to change the colors of the background, how images display, as well as wrapper images. I can also click on Text, and I can choose to change how the text looks. Now, by default that pulls all this information from the theme that we have selected.

However, I can choose to overwrite any of these theme options by selecting the radio button to the right of it and then making whatever changes I want. So, for example, if I want to change the font of the text, I can use this drop-down menu, I can come down here and I can choose the font that I want, click it, and you'll see that the fonts automatically change in the preview screen below. Now even though I can see the change in the preview screen, this change has not taken effect yet. None of the changes I make will take effect until I click the Save button. But the preview screen allows me to see how the font colors, sizes, and everything fit together before making those changes.

The next thing I'm going to change is the link color. As of right now, the theme has kind of this reddish color for all links. I'm going to go ahead and change this, and I'm going to choose something more appropriate to my school colors, such as this blue color. You can now see down in the preview, that all of the links have switched to a blue color. At this point, I like the way the site's starting to come together. I'm going to go ahead and click the Save button, and then I'll click on the site title on the left hand side to to back to the main site home page. So here you can see some of the site-wide changes already taking effect. We've made the sidebar a little different, we've changed some of the fonts, and we've even changed the link colors.

There are currently no FAQs about Google Apps for Educators.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Google Apps for Educators.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.