Weebly Bootstrap Template

Manual

Version 1

Web Services | Information & Technology Services

Chicago Public Schools

2

Contents

About the Template ................................................................................... 3

Template Installation .................................................................................. 4

Adding Content........................................................................................... 5

Adding Pages & Page Layouts ..................................................................... 6

Adding Logos/Images and Details ............................................................. 10

Changing the Color Scheme ...................................................................... 11

Advanced Options .................................................................................... 14

3

About the Template

This is a Weebly template for Chicago Public Schools. This template is built off of Twitter

Bootstrap 2.3.2, which is a web framework. The template is mobile-friendly, available in an

unlimited number of colors, and allows schools to create a professional website with no

programming needed.

By reading this manual, you will learn:

1. How to install the template

2. How to add content to your website

3. How to add new pages to your website and the different page

layouts you can choose from

4. Adding details like a logo and address

5. Changing the color scheme of your website

6. Advanced options available in the template

4

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Template Installation

Template installation is easy. Click this link to watch our video tutorial:

http://schoolsite.cps.edu/template.html

Or read and follow these steps:

1. Sign in to your Weebly account.

2. If you have an existing site that you want to install the template onto, click the “Edit” button

on that site and then go to step 6. Otherwise, go to step 3.

3. Make a new site.

4. In “Choose a Theme”, select the first theme (your choice doesn’t matter).

5. Choose your website domain, using the option “Use a subdomain of Weebly.com”. This can be

changed later.

6. In a new tab, go to http://schoolsite.cps.edu/template.html.

7. Click the “Download Theme” button, and save the theme to your hard drive.

8. Go back to Weebly. You should have your site open for editing.

9. In the menu bar at the top, click “Design”.

10. In the left sidebar, click “Change Theme”.

11. At the bottom of the sidebar, click “Import Theme”.

12. A box titled “Import a theme” should pop up.

13. Find the theme file on your hard drive and select it.

14. Drag your selection to the “Import a theme” box. The dotted lines should turn green, and it

should say “Move” next to the file. Let go of the mouse and drop the file into the box. It

should start to upload.

15. Once the theme has been uploaded, it should show up on your “Custom Themes” page. Put

your mouse over the theme and click the “Choose” button.

16. Weebly should redirect back to the “Build” tab, and your site layout should have changed.

17. Congratulations! You have now installed the theme. Please refer to the placeholders on the

screen for additional documentation. Proceed to the next section of the manual!

5

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Adding Content

When you successfully install the template on a new Weebly site, it should look something like

this (if you have a new website):

Now that you have installed the theme, let’s get started. If you are new to Weebly, please read

or watch their beginner tutorials by clicking this link: http://help.weebly.com/beginners-

guide.html. Start by dragging an element into the “Drag Elements Here” field. Play around with

the different properties of the template. Once you are ready, proceed to add some of your

content to the homepage by dragging elements into the “Drag Elements Here” field.

Follow these tutorials for a guide on adding content:

Adding Text: http://kb.weebly.com/first-elements.html

Adding Pictures: http://kb.weebly.com/picture-elements.html

6

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Adding Pages & Page Layouts

Adding pages is as easy as adding content. Click the following link for a tutorial on how to add a page,

as well as a sub-page: http://schoolsite.cps.edu/template.html

Alternatively, you can follow these steps for adding a new page: http://kb.weebly.com/new-

page.html. If you want to add a sub-page, you can also follow these steps for creating a sub-page:

http://kb.weebly.com/subpages.html.

Layouts

This template has multiple page layouts. All layouts contain the school logo (described in the next

section) and most will contain a space for a header image (such as a school photo) unless otherwise

noted.

These are as follows:

Landing Page (“Landing Page” in Weebly) – This is the initial page template you see in use once

you create your site and import the theme. It contains a “hero unit” which is the gray field

between your school image field and your content. You can add news, slideshows, or other

media to this field. Here’s what it looks like:

7

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Single Column (“1col” in Weebly) – This layout contains a single column, and is essentially the

Landing Page without the hero unit. It is good for full-page content, such as an “About Us”

page or a blog.

Left Two Column (“2col-left” in Weebly) – This layout contains two columns, a small left

column (left sidebar) and a large main column covering the rest of the width to the right. It

contains two fields in the sidebar, a top field for content that will only show up on that page,

and a bottom field for content that will appear on every page with a left sidebar.

8

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Right Two Column (“2col-right” in Weebly) – Like the Left Two Column layout, this layout also

contains two columns, a small right column (right sidebar) and a main column covering the rest

of the width to the left. It also contains two fields like the Left Two Column layout, except the

bottom field of the sidebar is for content that will appear on every page with a right sidebar.

Three Column (“3col” in Weebly) – This layout contains both the left and right sidebars, as well

as the main middle column. It is good for news and resource-type pages.

9

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Single Column, No Header Image (“1col-noimg” in Weebly)

Left Two Column, No Header Image (“2col-left-noimg” in Weebly)

Right Two Column, No Header Image (“2col-right-noimg” in Weebly)

Three Column, No Header Image (“3col-noimg” in Weebly)

To change the page layout, click on “Pages” at the top of the editor, and then select the page you

want to change the layout of. Pick from one of the available layouts, as shown in the green outline

below. The (“layoutname”) as shown in the descriptions of the layouts is the same as the name

located directly under the layout thumbnail.

10

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Adding Logos/Images and Details

Adding your school logo is easy. Just click on the Add Image box in the top left of the screen:

This image will appear on every page, on the top and bottom.

To add a header image to your theme, look for this image, located between the menu bar and your

content:

You can also add details such as your school address, phone/fax number, and email to the theme. Just

click on the “Add text” and “Click here to edit” fields located at the bottom left, as shown in the image

above right.

11

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Changing the Color Scheme

This template has multiple options for changing colors. Included are a set of 6 color schemes that

have been created by Web Services. These are shown below:

bootstrap-custom1.min.css

bootstrap-custom2.min.css

bootstrap-custom3.min.css

bootstrap-custom4.min.css

12

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

bootstrap-custom5.min.css

bootstrap-custom6.min.css

Do you want to change the template color scheme to look like your school colors? You can do so by

visiting one of these links:

Lavish – include an image file and generate a color scheme to be used in Bootstrap

PaintStrap – use a color palette to create a color scheme for Bootstrap

Bootswatch – choose from existing professional color schemes for Bootstrap

Custom Color Scheme Installation

To view how to install your theme, watch this video tutorial by clicking this link:

http://schoolsite.cps.edu/template.html

Alternatively, you can follow the steps below:

If you used Bootswatch or a Web Services color scheme:

1. Once you have selected a color scheme you like, note the name of the color scheme, if it is a

Bootswatch color scheme, or the filename, if it is a Web Services color scheme (noted under

the theme screenshot). 2. Click on “Design” in the editor and then click on “Edit HTML/CSS”. 3. You should already be editing “main-style.css” in the left sidebar. If that does not appear to be

selected, click “main-style.css”. 4. Look for this line in the code editor: @import url("bootstrap-default.min.css");

13

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

5. Change that line to @import url("bootstrap-yourthemenamehere.min.css"); where

“yourthemenamehere” is the name of the Bootswatch theme you selected, in all lowercase.

For example, your new line may look like @import url("bootstrap-cerulean.min.css");. 6. Preview your new color scheme in the preview box directly below the code editor. Is that what

you want? If it is, proceed to the next step. Otherwise, check to make sure you have typed your

file name correctly in the url(“ ”) line you just edited. 7. Click Save in the top-right and you should return to the editor.

If you used Lavish or PaintStrap:

1. Once you have created a color scheme you like, be sure to save the CSS as bootstrap.css.

2. Click on “Design” in the editor and then click on “Edit HTML/CSS”.

3. Click “Add new file(s)” in the left sidebar, and select your bootstrap.css file.

4. After it has been uploaded, click on “main-style.css” in the left sidebar, located under “CSS”.

5. Look for this line in the code editor: @import url("bootstrap-default.min.css");

6. Change that line to @import url("bootstrap.css");

7. Preview your new color scheme in the preview box directly below the code editor. Is that what

you want? If it is, proceed to the next step. Otherwise, check to make sure you have typed your

file name correctly in the url(“ ”) line you just edited. 8. Click Save in the top-right and you should return to the editor.

14

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

Advanced Options

Site Statistics & Search Engine Optimization

Weebly offers a wide variety of statistics, which can be accessed via clicking on “Site Stats” in the

menu, as shown below: Click this link to learn more: http://kb.weebly.com/stats-dashboard.html

Additionally, there are a variety of resources on the Weebly Support Center that cover SEO and other

similar topics. They can be accessed by clicking this link: http://help.weebly.com/stats--seo.html

Embedding Code

If you would like to embed some custom HTML into the template, you can do so by following the

tutorial listed on Weebly: http://kb.weebly.com/custom-html.html

If you would like to add Google Analytics or other HTML to every page, in the header or footer, you

can do so via the Settings tab at the top of the screen. Follow this guide to learn more:

http://kb.weebly.com/google-analytics.html. You are able to embed any kind of HTML into the

header (before the <body> tags) or the footer (right before the </body> closing tag). For more

information on embedding code, including how to verify your Weebly site with Google, please visit

the following link: http://help.weebly.com/stats--seo.html

File Descriptions

The template contains many different files. The function of each is listed here:

*.html

o landing.html – Landing Page Layouts o 1col.html – Single Column

15

Install Template

Add Content

Add Pages & Layouts

Add Logo & Details

Change Color

Scheme

Advanced User

o 1col-noimg.html – Single Column, No Header Image o 2col-left.html – Two Columns (Left Sidebar) o 2col-left-noimg.html – Two Columns (Left Sidebar), No Header Image o 2col-right.html – Two Columns (Right Sidebar) o 2col-right-noimg.html – Two Columns (Right Sidebar), No Header Image o 3col.html – Three Columns (Left & Right Sidebar) o 3col-noimg.html – Three Columns (Left & Right Sidebar), No Header Image

*.css (Stylesheets) o bootstrap-*.min.css – various Bootstrap stylesheets. Important to note:

bootstrap-default.min.css – Default Bootstrap CSS, colors & etc. bootstrap-responsive.min.css – Responsive Bootstrap CSS (do not replace) bootstrap-custom#.min.css – Bootstrap color schemes created by Web Services,

replaces bootstrap-default.min.css. o custom_style.css – All custom styles for this template, used to override Weebly

defaults if needed. Place your own custom CSS at the very end of the file. o editor_style.css – Placeholders and other custom CSS only for the Weebly editor. o main_style.css – Imports for bootstrap-*.min.css, custom_style.css, bootstrap-

responsive.min.css, and editor_style.css (in that order)

*.js (JavaScript) o bootstrap.min.js – the Bootstrap 2.3.2 JavaScript o jquery.min.js – the jQuery 1.10.1 JavaScript o modernizr.min.js – custom build of Modernizr.js 2.6.2 with HTML5 Boilerplate o respond.min.js – Respond.js 1.1.0 with HTML5 Boilerplate o hover-dropdown.min.js – jQuery plugin for hover-enabled dropdown menus on

Bootstrap (see http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ for more info)

o main_style.js – Custom JavaScript to get navbar, header, footer working for Weebly. Includes a keyboard-accessible

*.png o cps.png – the Chicago Public Schools logo

meta.txt – file so Weebly recognizes the template as complete

Thank you for reading the Weebly Bootstrap Template manual! Visit

http://schoolsite.cps.edu/ for more on Weebly at Chicago Public Schools, and

find all support resources on the Weebly Support Center located at

http://help.weebly.com/. Enjoy your new website!