How To Customise Your Knowledge Base Design Template

The aim of this guide is to walk you through the customization of your Knowledge Base on Google Sites. This is not an essential task; just something you may like to do once your main store is up and running.

You may want to have a customized design involving the overall layout, theme, colors and fonts of your site, among other elements, to enhance its presentation and usability.

This page will give you a comprehensive step-by-step procedure in changing the site’s visual elements in order to suit your needs.

Step 1: Change Layout, Theme, Colors Or Fonts

With Google Sites, you can easily change the overall appearance of your site by editing your site’s layout, themes, colors, and fonts.

Site Layout

To start editing your site’s layout, click the More button near the top-right corner of your browser window.
Select Edit site layout.
Along the top of your site, you’ll now see a toolbar that lists elements of your site. Clicking on one of the toolbar’s buttons will toggle that element on and off.
It’s easy to make changes to individual elements of your site. To see what you can edit, hover your mouse over the parts of your site; those that you can edit will be highlighted in blue. To make a change to an element, simply click it. You’ll be able to change the following elements:
- Header: Change your header’s height and alignment, and add a logo.
- Horizontal navigation bar: Change your navigation bar’s style and select which pages of your site will appear there.
- Sidebar: Choose what to call your sidebar, how it will be organized, and what it will link to.
- Footer: Add and format footer text.
- Site width: Change the width of your site.
Once you’ve clicked an element and made adjustments in the dialog box that appears, click the box’s OK button to save your changes.
When you’re done making all the changes you’d like, exit the layout editor by clicking the blue Close button in the top-right corner of your browser window.

Site Themes

Select Manage site from the More drop-down menu.
Select Themes, Colors, and Fonts from the left sidebar.
Select the theme you would like to use for your site. (You can see what your site would look like using that theme while clicking the “Preview” button near the top or the Preview link below each theme.
Click “Save changes.”

Site Colors And Fonts

Select Manage site from the More drop-down menu.
Select Themes, Colors, and Fonts from the left sidebar.
In the scrolling box, choose what aspect of your site you would like to modify. For most options, you can choose to use the default for your site’s theme, to turn the option off, or to choose a custom value.
For images, you can choose a custom image. For text, you will usually be able to choose from a set of colors or enter in your own six-character color code. Changes you make will be reflected in the Preview area within moments. Some of the areas you can customize include:
- Entire page: These options will set the default for your site, though you can override much of this formatting by selecting specific fonts, colors or images in other sections or by formatting on a specific page.
- Site header: If you have not turned off your header, these options control content in the area that appears at the top of each page.
- Content area: These options control the main page area, where the majority of your content will be. You can override this formatting by making changes on individual pages.
- Content area gadgets: These items will format gadgets that you place in the main area of your pages, such as text boxes or slideshows.
- Sidebar gadgets: If you have not turned off your sidebar, these items will format the gadgets that you place in your sidebar.
- Horizontal navigation: If you have chosen to include a horizontal navigation bar, these options will format your horizontal menus.
Click “Save changes.”

Step 2: Add/Edit The Horizontal Navigation Bar

Transferable Skills Checklist — **Download your free cheatsheet of Transferable Skills**

To add a horizontal navigation bar to your site, you need to enable the bar and then choose which pages you want to appear there.

If you’d like, you can transform your navigation bar into a drop-down menu by adding pages to the menu and nesting some pages under others.

Enable Navigation Bar

To start editing your site’s layout, click the More button near the top-right corner of your browser window.
Select Edit site layout.
Click the “Horizontal Navigation” button in the toolbar to enable or disable it.
Any changes you make are saved instantly.

Add, Change Or Remove Navigation Items

You can add any page on your site to your horizontal navigation bar as a menu topic or menu item.

Once you are in the “Edit site layout” mode, click on the region that says “Click to edit horizontal navigation.” This will bring up a dialog to add, change, and remove the items in the navigation bar.

Adding menu items
To add a page from your site as a menu item in your horizontal navigation bar, click Add page, then locate your page in the pop-up window and click “OK.” To add a page from another site or an email address as a menu item, click Add URL. In the pop-up window, enter the URL of the page and name of the menu item you would like to appear, then click “OK.”
Deleting menu items
To delete a page as a menu item in your horizontal navigation bar, select the page in the Select pages to show box, then click on the remove icon.
Adding drop-down menu items
To create a drop-down menu, a page must have other pages listed underneath it in the Select pages to show box. To make a page a drop-menu item, select the page in the Select pages to show box, then click the right arrow. (It will then appear indented in the Select pages to show box.) To change a page from a drop-down menu item to a top menu item, select it and click the left arrow.
Organizing your menu items
To change the order in which your menu items appear, select the page in the Select pages to show box, then click the up arrow or down arrow. The top items in the Select pages to show box will be your left-most horizontal menu items. This organizational structure applies to drop-down menus too.

Change The Style Of Your Navigation Bar

Once you are in the “Edit site layout” mode, click on the region that has the horizontal navigation. You can change the style of your horizontal navigation bar by selecting one of the radio buttons under Style. Here’s what the different styles look like:

Step 3: Change Your Site’s Logo

To change your site’s logo:

Click on the More drop-down button in the top right corner of the page.
Select Edit site layout.
Hover over the Header section until you see “Edit site header” and then click the header.
Select Custom Logo and then click Choose file. Browse for the logo file on your hard drive (or select No logo to exclude an image).
Once you have the image selected, click OK to confirm your choice.
Click the Close button to exit out of editing the site layout.

We recommend your logo is 145 px wide x 52 px tall. Otherwise, it might not appear or might be warped.

Step 4: Edit The Sidebar

If you are the owner of a site, you can change whether the sidebar appears, where it appears, and what gadgets are included in it.

Getting To The Sidebar Editor

Click the More button near the top-right corner of your browser window.
Select Edit site layout.

Sidebar Options

Once you are in the “Edit site layout” mode:

Click on Sidebar in the toolbar to enable or disable the sidebar.
If you want to keep your sidebar, you can choose where it will appear by selecting the pencil-shaped edit button on the black “Sidebar” header. You can also change the sidebar width by entering a new width, in pixels, in the edit dialog.

Adding And Deleting Gadgets In Your Sidebar

Once you are in “Edit site layout” mode, you can click on the + icon in the header to add items.

Individual gadgets can be removed by hovering over a gadget and clicking x. You can reorder gadgets by dragging them.

Step 5: Configure Your Sidebar And Navigation Gadget

Most site templates include a sidebar to help visitors navigate your site. The sidebar can also house sidebar gadgets, such as a text box or ads delivered through Google AdSense.

Note:You must be an owner of the site to edit the site layout.

Enabling And Disabling Your Sidebar

To start editing your site’s layout, click the More button near the top-right corner of your browser window.
Select Edit site layout.
Click on Sidebar in the toolbar to enable or disable it.
Any changes you make are saved instantly.

Adding, Reordering, And Deleting Items In Your Sidebar

You can add all kinds of stuff to your sidebar, including your site’s navigation, a list of site authors, customizable text boxes, countdown timers, and more. To explore the options and add an item, follow these steps:

If you aren’t already, make sure you’re in “Edit site layout” mode. Click the More button in the top-right of your browser window, then select Edit site layout.
Locate your sidebar, then click the + button next to the sidebar header. A dialog will appear with a list of all the things you can add to your sidebar.
Click the Add button to add an item to your sidebar.

To reorder the items in your sidebar, hover over an item, and then click and drag it by its header to a new location in the sidebar. To delete an item in your sidebar, click the X in its header.