Tuesday, November 24, 2015

On Making A Google Site of Your Own

    The overhaul of the wiki is complete, for the most part! On this project, I learned a lot about what goes into making a Google Site. Below I've described what some of the major pitfalls and conundrums of customization were for me, and explain a bit on the how-to's of Google Sites.

(As an alternative to reading this post, I've made a short video tutorial that covers much of the same material that I talk about:)

    This is what the header looks like now. When I started, the site was all white for the background, which I think can be somewhat harsh on the eyes, particularly when reading small black font. To remedy it, I grayed out a lot of things, but not enough that it would start to melt in with the darker reds that I was promoting in the color scheme. I messed around with fonts and colors a lot. The horizontal navigation (as Google calls it) that you see used to just be a small row of links that were usually just skipped over by the eyes in favor of the sidebar. Well, I hate sidebars. So I spruced up the top a bit, and trashed the sidebar. To change the way the horizontal navigation is viewed, go to the gear icon > Edit Site Layout, and then select the horizontal navigation area (make sure that it's enabled first). The options for viewing it are Tabs, Boxes, and Links. I went with tabs because it felt like a more intuitive way to view the site.
    I have also discovered the Holy Grail of website navigation: hover-activated dropdown menus. This is particularly useful for The Team, because we can use the dropdown to access our pages easily. Before, I had to scroll down to either my own name or to the bottom, where the subpages are all listed, in order to reach my page and assignments. Instead, I can now just click the link at the top. To make a dropdown in horizontal navigation, go to the same place as for making Tabs, Boxes, or Links, and add a page to the display, use the little arrow icons to move it to right under the parent tab, and hit the right arrow icon to indent it. This will put it under the dropdown.

    A bit of a last minute change here, after receiving input from other wiki users: We have a few tabs that are just obsolete- like the To-Do and Files tabs. Nobody seems to even think about going near them, and we have other ways of checking on that anyways. If it's unnecessary and takes up space, lose it. Drop it like it's hot. Those tabs have now been erased from existence. We will mourn their loss. (On the inside, anyways.)

The Team subpage
    In particular, I focused on the subpage titled The Team, because that's what a lot of us usually are on the wiki for. The Team Page is how we access our assignments (via Mrs. Dee's page) and post them (via our own pages). One thing that I added is a lifesaver for those on mobile and can't access the dropdown: the Navigation for Team Members.  Rather than insert everyone's name and link their page one by one, I used a gadget that is built in to Google Sites, called a Subpage Listing. Because we all have our pages as subpages of The Team, it works out perfectly. To insert one of your own, go to edit the page and hit Insert > Subpage Listing, under Common. I limited the settings on this one to only list subpages 1 level below, but if you want more, you can set that and allow a whole cascading tree of subpage links.
    One thing you want to make sure of when you take on a project like this, is to test it on multiple screen sizes and devices. Before, the only thing that separated each person on the page was a bunch of line breaks in between. On larger screens, this wasn't enough, and some of the pictures and member bios started to overlap. To fix it, I put in horizontal lines between each member, which prevents anything like this from happening. To insert the lines, edit the page and go to Insert > Horizontal Line, under Common.

The Settings Menu
    So to do all of this stuff that I've been talking about, you need to reach the menu I've shown above. Everything I've done can be accessed through two of the options: "Edit site layout" and "Manage site". The "Edit site layout" takes you to an interface which I think is fairly intuitive and self-explanatory, so I won't bother to explain it. However, "Manage site" is a little more interesting.
Manage site
    This is where all the fun stuff happens. Under "Manage site", go to Themes, Colors, and Fonts. There must be dozens of initial themes to choose from, and then once you have that, you can customize things with dozens more of the submenus. It's very self-explanatory for the most part, and it shows you a preview of your changes down below. A few things of note:
  1. I haven't looked at the sidebar gadgets, because I hate sidebars. There might be some cool stuff in there, so who knows, check it out.
  2. Under Entire page > Text, there are options to change link color. You cannot, however, change the link background color, it comes with the theme.
  3. Under Horizontal navigation, "Selected text" does not refer to text that has been selected with the cursor, rather, it refers to the tab that the user is currently on. In the preview above, it means the Home tab.
    There's basically always kinks, things that could be done better. I have a few complaints here:
  1. The horizontal lines don't mesh well with the customizations I've done. Alas, I cannot change this, because it comes with the theme and is unchangeable.
  2. The background of links drives me up the wall. What do those stripes even do? Can't change this either, because of number 1.
  3. WHAT IS THAT LINE AT THE TOP OF THE HEADER. Also comes with the theme. I have no idea how to get rid of it. Sorry.
  4. I've gotten a few notices that random things have stopped functioning with this overhaul. Links have disappeared, uploading images won't work... If this happens, I have no idea what to tell you. These things are (read: should be) completely unrelated, so I have no idea where the problem lies and how to fix it.

That's all I've got. Thanks for reading! -Anson


  1. Wow, what a blog! I mean, you just have so much guts to go ahead and tell it like it is. Youre what blogging needs, an open minded superhero who isnt afraid to tell it like it is. This is definitely something people need to be up on. Good luck in the future, man
    Help desk support

  2. I would be grateful if you continue with the quality of what we are doing now with your blog ... I really enjoyed it
    it support

  3. I definitely appreciate your blog. Excellent work!
    it support

  4. Thanks for your refreshingly straight talk on web 2.0. yes it is all about social network.
    tcp ip dump

  5. Nice article and informative as well. for few of people like me this article is really helpful.
    Biggest energy savings

  6. Hello guys , thanks for your helpful post here . I'm also searched such post about making a good site . Weldone man . Clipping Path

  7. Great article and thanks for your work.You made an article that is interesting.
    clipping path service
    Background Removal