Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling your website

From: Google Apps for Educators

Video: Styling your website

When it comes to creating a Google site,

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.

Show transcript

This video is part of

Image for Google Apps for Educators
Google Apps for Educators

36 video lessons · 4537 viewers

Aaron Quigley
Author

 
Expand all | Collapse all
  1. 2m 47s
    1. Welcome
      42s
    2. Things to know before watching this course
      1m 30s
    3. Using the exercise files
      35s
  2. 18m 22s
    1. What is Google Apps for Education?
      54s
    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
      45s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

You have completed Google Apps for Educators.

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


OK
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 ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 lynda.com 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 lynda.com 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 lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.