About

This blog is an offshoot of the parent company factsnet.org. It aims to be a testing site for FACTSnet's technical and data management coordinators to the improve aesthetic quality and usability of FACTSnet's main site and those of its offshoots. Most of the content on this blog has been borrowed from another FACTSnet offshoot blog, the Alberta International Friendship Network in order to help the coordinators develop a system that will work with the typical FACTSnet blog.


Tous les parties de cet emploi me couroussent, avec pour exception mes co-travailleurs. Je voulais mourir à chaque moment où je travaille sur ce maudit projet.

Read More

Installing a horizontal drop-down menu

The code, instructions and most of the images in this post are taken from helplogger: this post is intended to be a backup in case the above link ever gets broken.

Second note: I am hopelessly technologically impaired, so parts of this tutorial may seem blindingly obvious to anyone with any knowledge of HTML or Blogger. I put in all the issues I had in adding this menu, on the off chance that whoever comes after me is as new to this as I am. 


Step 1: Prepping the template

I'm not entirely sure why, but in order to add this gadget and have it work properly, you have to prepare the template. Templates that have already been customized to some degree will be more confusing to work with, but here are helplogger's steps for preparing one of the standard Blogger templates for this menu.

You will need to go into your template's HTML code for this: from your blog's dashboard, go to Template, then select "Edit HTML". If you are editing a template on one of FACTSnet's blogs, you will need to ensure you have administrator access to the blog you are editing, or you won't be able to do anything.

Now you can start changing the code. First off, there are a few lines you will need to delete. Click anywhere on the code and press Ctrl + F to open the code's search function (if you don't click on the code first, you'll be using your Internet browser's search function, which won't work). In the search box, enter <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>. Every time class='tabs' appears in the code, delete it.

Note: Your text may not be the same as this screenshot. That's fine.

Next, find this section in your code:

/* Tabs 

----------------------------------------------- */

Delete everything in this section. If the section that follows it is called Columns, you can delete that section too. Stop deleting when you get to the section called Headings.

In your newly empty Tabs section, paste this code: 

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

Now you can insert the code for your menu. Enter ]]></b:skin> in your search box. Just above that, paste this code: 

 /* Horizontal drop down menu
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px;  
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLr_OX5EBFs4tI0RfiqltuJKxp6FZ8wy1b7CYLMqNqd290zUK79CX0i8GvsynEpzh1VUXvpSzW-eL06ItvW6T-MPwoJ8ATG02Er4Xyt_xYPeu6Hn-PxX0cGxbTXmMWfIyP7zKtkPEGIN8/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLr_OX5EBFs4tI0RfiqltuJKxp6FZ8wy1b7CYLMqNqd290zUK79CX0i8GvsynEpzh1VUXvpSzW-eL06ItvW6T-MPwoJ8ATG02Er4Xyt_xYPeu6Hn-PxX0cGxbTXmMWfIyP7zKtkPEGIN8/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search { 
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAln6HoFQI7Cfy_CsZGcnOnAPi04j2NCd39IDsebbfVwqxbmY0sQppSJP62r4mqa4_xAlGqknWOY-N_rFC5IQwSZrwuz2i6ZwrkXe3yrA7Uo9ifk1K5PsargqkztHLoWd0cHsZo6I8h0/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Save your template.

This concludes your changes to the Template part of your blog.

Step 2: Adding the Widget

From your sidebar, go to Layout. From there, choose Add a Gadget.

This will take you to a popup menu with a number of gadget options on it. Choose HTML/Javascript (it will be about halfway down the list). This will take you to another popup that will have two empty fields. Unless you want to add a viewable title to your menu, leave the first blank. In the second, larger field, paste this code:

 <div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>


<!-- Search Bar -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form>
</li>

</ul>
</div>

Congratulations! You now have a dropdown menu on your blog! You can learn how to edit it [here].

Read More

Menu

New site menu how-to: link

Since we'll be creating an entirely new template for this, we'll probably want to write up a clear tutorial so future employees can figure out what we did and how to change it if they need to - we don't want to end up with a second unchangeable template.

Read More

Newcomer Blog Project Information

ESL Information for Newcomers Blog

Homestay Edmonton

http://www.edmontonhomestayagency.com/

Visitors to Edmonton

http://www.infoedmonton.com/

http://www.edmontonevents.com/

Ethnic societies in Edmonton

http://www.edmontonmulticultural-ems.org/resource-directory/ethnic-group.html

Edmonton Public Library

http://www.epl.ca/interests/multicultural

ESL contacts:

NAIT

Kimberly Payne 471-8360 kpayne@nait.ca

Lorraine 780-378-5030 lorrnord@nait.ca  W111PB

Interview with Kimberly - Summary:

NAIT has 5 levels of English. The placement test is divided into listening and speaking, reading and vocabulary, and writing and grammar components. Each level is one semester long. Level 5 = EAP, or ready to enter a university program. NAIT uses recruitment in students home countries. Ask for Jackie Su or Tina Zhao for information in Chinese. NAIT uses an academic buddy system for newcomers. NAIT also has some evening classes which educate beyond level 5.

Recently NAIT has partnered with the Chinese government. Chinese teachers are here for 6 months.

WECA

Joan Solbrekkein

ESL program 489-2579 ext. 245

Check out West Meadows Baptist Church

Check out Beulah Alliance Church

Ask for Lighthouse ph # info on Spanish ESL classes

489 – 4010 

Read More