Marlies' Creative Universe

Here are some links that I found to be very helpful in getting started and as reference.

Also check out my TYPO3 tutorial. It gives basic instructions on how to make changes on a TYPO3 based website.

Tutorial Links For Beginners

• ActDen Tutorial Site
  Outlook Express Internet Explorer
• GeekGirls Guides
  Basic Computing Windows 9x and Me Word Processing Spreadsheeting Databases VBA& Office Net Guide

Online Typing Tutors

I have no connection to any of the typing tutors listed below. I have just noticed that when I am teaching people to use the computer it helps a lot when they already know how to type. So here are some free online sites to help.

• Mr. Kent’s Typing Tutor
  This is a simple online typing tutor
• Touch Typing Online Typing Tutor
  This is an online typing tutor that can also be downloaded as program to your own computer.
• Learn 2 Type
  To use this free typing tutor you have to long in to the site.
• http://www.keybr.com/

Tutorial Links For Programs

• ActDen Tutorial Site
  Office 2000 Powerpoint 98 Front Page 2000
• Nerdy Books
  Daily email and newsletter with tips for Word , Excel , Powerpoint and Windows
• Tutorial Find
  Tutorials galore

Tutorial Links For WebDesign

• HtmlGoodies
  Webdesign info: html, css, javascripts etc.
• WebReference
  HTML with style

Reference Links For Fonts

• DingbatPages
• FontGarden
• FontFace
• Fonts & Things
• Free Fonts Dingbat
• Manfred Klein

Reference Links For Graphics

• Microsoft ClipArt Gallery Live
• ClipArt Warehouse
• Desktop Publishing.com
• Flickr
  Free online photo storage site
• Picasa
  Free online photo storage site
• Gimp
  Free graphics program instead of Photoshop
• Inkscape
  Free vector program instead of Illustrator

Reference Links For Virus Scan

• Windows Defender
  This is the 3 item in my mix to keep the computer safe. This program together with Spyware Terminator and an antivirus program is a great combo.
• Spyware Terminator
  Use this in combination with a Virus program, it works great and is free.
• Avast Antivirus Program
  Nov 2008: this year AVG has become too bloated for my liking. I found this free program for home use to be a great replacement
• AVG Virus Program
  This is a free virus program that works really well. Unfortunately, it is only free in North America.
• Panda Software
  This site has a superb online virus scan called ‘Panda Active Scan’. I only works with Internet Explorer as it uses Active X to scan your computer. This is really great, when the virus has attacked your computer’s virus program and disabled it. It is very thorough as it scans every file on your system and desinfects it and it is free.

Reference Links For Shareware & Freeware

• Cnet Download.com
• Zdnet Downloads
• Freeware – NONAGS

Reference Links For Open Source Programs

• WordPress.com
  Easy site to use to create free blog or website
• Blogger
  Easy site to use to create a free blog or websit
• SourceForge.net
  SourceForge.net is the world’s largest Open Source software development site.
• OpenOffice.org
  OpenOffice is the free Office Suite based on Open Source Code.
• TYPO3
  Typo3 is a free Open Source content management system to create websites.
• WordPress.org
  Popular blogging platform that can also be used as a CMS

Computer Tutor
Marlies Cohen, 86 Lorne Avenue

Dartmouth, NS B2Y 3E7 Canada

902.463.4630

tutor(at)mcuniverse.com

Using computers has never been more important at work or at play. With a few simple steps you can be well on your way to make the computer work for you. If you just got a computer or have had yours for awhile we can help you better understand and use the computer the way you want. Why struggle on your own when you can have personal one-on-one computer training and assistance in the comfort of your home in a friendly, patient, and supportive manner?

Call us today at 902-463-4630 to make an appointment and

Learn How To …

• Navigate the Internet and send email
• Set up your computer and do basic computer maintenance
• Use your programs effectively
• Create your own website

Internet

• Set a start page for your browser
• Fine tune your browser’s settings
• Use the search engines
• Bookmark web pages you like
• Download and install files and programs
• Listen to music on the Internet
  * Read newspapers online
  * Print an article or save it to your harddrive
  * Do your banking and bill payments online

Email

• Send email
• Add names to your email address book
• Set up new email accounts
• Create folders and rules so that specific emails automatically go there
• Send attachments with your email
• Change the sound that notifies you of new email
• Create email stationery

Newsgroups

• Use newsgroups
• Use an instant messenger service

Computer Basics & Maintenance

• Navigate around Windows
• Change your desktop
• Change your screen resolution
• Change your screen saver
• Find files on your harddrive
• Backup files

Software Use

• Word Processing Programs
  • Write reports & letters
  • Create Letterheads
  • Create Mailing labels
• Spreadsheet Programs
  • The many uses of spreadsheets
• PowerPoint Presentations
• Desktop Publishing Programs
  • Create Letterheads
  • Create Business Cards
  • Create Flyers
  • Create Postcards
• Graphic Programs
  • Create and manipulate graphics
  • Scan photos and change them
• Bookkeeping Programs
  • Keep track of your finances

Website Design

• Create your own free website
  • Most Internet Service Providers (ISP’s) “The people you pay each month to get on line” give you 5MB of free space for your own website. Why not use that space.
• Share your photos with family and friends on the Internet

Teaching Information

• Sessions usually last one to two hours. For most people, two hours of information is more than enough to absorb in one sitting.

Computer Tutor Contact Information

Computer Tutor
Marlies Cohen, 86 Lorne Avenue
Dartmouth, NS  B2Y 3E7 Canada
902.463.4630
tutor(at)mcuniverse.com

The following links are reciprocal links I have with the sites.

• Dedicated Servers
  – HostingSource, Inc. is a leading web hosting provider, offering reliable, scalable solutions for customers of all sizes and services.
• Provideam OEE Software
  – Provideam OEE Software was originally developed more than 10 years ago. Since then it has been now improved and refined. It is suitable both for small companies with only one or two machines as well as for larger companies with 100’s of machines
• Web Design Northern Ireland
  – Based in Belfast, Northern Ireland, The Web Bureau offers creative, innovative and cost effective design solutions. As well as creating beautiful web sites, usability is paramount. We strive to ensure our web sites are simple to use
• Cross Site Scripting
  – Reference site to prevent and exploit cross site scripting vulnerabilities and attacks
• ARM WebDesign
  – Simple Website Designs
• Laptop Computer Cases
  – There is a wide variety of Laptop Computer Cases available with Skoobadesign from which you can choose your favorite Laptop case at the most affordable prices ever
• Business Card Printing – Printing company, brochure printers, graphic design company, folder printers and business card printing for all your printing needs
• Learn To Type Fast   – Learn To Type in Just 90 Minutes with KAZ Typing Tutor. Learn to touch type at home, in school and in business. Download typing tutor, learn to type online or via CD
• Safari Software: – Office Tips, software and more!

It took me some time to get to understand the way the Amazing Grace theme is handling archives.

• By default the categories navigation is a categories based archive

But how do I create a page with an archive of all the posts for all categories? I haven’t figured that out yet. As soon as I create an archive.php page the categories links don’t behave the correct way any more. So for the time being the Archives Page is retired.

After searching for a long time for a new theme for my reworked website, I decided on using the ‘Amazing Grace‘ theme from Vladimir Prelovac.

After some experimenting with the theme, I realized that it would be helpful to have a drop down menu for the categories. Most ways of doing that turned out to be more involved that I was willing or able to do. Then I happened to come across this cool WordPress plugin called:  dTabs (Dynamic Tabs). It looked like it would be easy to implement and my test proved it.

How To Implement dTabs Plugin with Amazing Grace

There are 2 places where changes have to be made

1. Header.php  file
2. dTags stylesheet

As I am only using the plugin for the categories, my instructions are for the categories navigation only.

Note: I removed the RSS image on the categories line for my website. I have marked it as not being used in the file. I am showing it as it will help you find the place in the php file.

Edits to Header.php

This is the original code with important information in red:

 <!-- don't show -->
	<div id="rss-big">
		<a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Subscribe to this site with RSS'); ?>"></a>
	</div>
<!-- don't show stop -->

	<div id="portrait-bg"></div>

	<div id="catmenu">
		<ul>
		<?php wp_list_categories('orderby=count&order=DESC&show_count=0&hierarchical=1&title_li=&depth=2'); ?>
		</ul>
	</div>

This is the changed code with the changes in red:

<!-- don't show -->
	<div id="rss-big">
		<a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Subscribe to this site with RSS'); ?>"></a>
	</div>
<!-- don't show stop -->

	<div id="portrait-bg"></div>

	<div id="cat-menu">

        <?php if (function_exists('dtab_list_tabs')) {dtab_list_tabs();}?>

        </div>

Explanation:

• First I removed the  id=”catmenu” in the  <div id=”catmenu”>, once you see the stylesheet that will make sense
• Then I replaced the id with <div id=”cat-menu”>
• Then I removed the old php code and
• Replaced it with the code mentioned at the plugins home page:

  <?php if (function_exists('dtab_list_tabs')) {dtab_list_tabs();}?>

My CSS Code for the Plugin

You edit the plugin by going to the dashboard -> tools -> tabs

When I say it is my adapted code, it is a combination of the code generated by the plugin and the code from the original stylesheet for Amazing Grace for the categories navigation.

/* Adapted CSS generated by dTabs */

/* This is my adapted code from #catmenu */
#cat-menu {
  position:absolute;
  width:690px;
  top:141px;
  left: -30px;
  margin:0;
  padding-bottom:15px;
}

/* style the tabs in IE (the trailing comma prevents other browsers from reading this) */
#tabbar li, #tabbar ul li, {

	/* make them horizontal in IE*/
	display: inline;

	/* space them a little in IE*/
	margin: 0 5px;
}

/* style the tabs */
.tab, .tabselected {

	/* make them horizontal in Firefox 2*/
	display: -moz-inline-box;

	/* make them horizontal in all other browsers*/
	display: inline-block;

	/* space them a little */
	padding: 5px;

/* set a background for non-selected tabs (which we will override for selected tabs later) */
	background-color: #C1A981;

/* set a border, make it rounded at the top */
	border: 1px solid #451C05;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-khtml-border-radius-top-left: 5px;
	-khtml-border-radius-top-right: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}

/* make changes to the selected tab */
.tabselected {

/* set a white background */
	background-color: #B66D47;

/* make the border along the bottom blend into the white background */
	border-bottom-color: 1px solid #8D614A;
}

/* Added so that the selected Tab has white text color */
.tabselected a { color: #FFFFFF; }

/* style the drop down menus */
.dmenu {
	/* left align the text */
	text-align: left;

	/* REQUIRED */
	position: absolute;

/* js fade method should display them 23px below the top of the tabs
   This is important and specific to Amazing Grace */
	margin: -113px 0 0 -45px;

/* put some space around the contents */
	padding: 5px 15px;

/* set a background for the drop down menu */
	background-color: #CB977B;

/* set a border, round all the corners except the top left */
	border: 1px solid #451C05;
	-moz-border-radius: 5px;
	-moz-border-radius-topleft: 0;
	-khtml-border-radius: 5px;
	-khtml-border-radius-top-left: 0;
	-webkit-border-radius: 5px;
	-webkit-border-top-left-radius: 0;
}
#tabbar .dmenu ul {

/* put space at the top and bottom of top-level menus */
	padding: 5px 0 0 10px;

/* stop ie going crazy */
	margin: 0;

}
#tabbar .dmenu ul li {

/* set a background
   I made this transparent or the background color from the main tabs
   will show up only behind the text */
	background: transparent; 

/* stop ie from displaying list items inline */
	display: list-item;
}

/* REQUIRED: hide menus off screen by default */
.dmenu {
	left: -999em;
}

/* STYLING JUST FOR CSS MENUS */
#tabbar .fademenu .dmenu {

/* position menus correctly */
	margin: 5px 0 0 -6px;
}
/* REQUIRED: show menus on hovering */
#tabbar .fademenu:hover .dmenu {
	left: auto;
}

Explantion:

• #cat-menu is needed to position the tabs correctly in the header
• everything else has explanations right in the code
• if you don’t like the way somethings work, play around with the code until you like it

As I am in the middle of switching from one CMS  (TYPO3 to WordPress) this current WordPress site does not have too many posts. So I have to create a page link to the old site. First I created the page and wrote some text with the link, but it did not look too good.

That’s when I came across this plugin that does exactly what I want. It is called ‘Page Links to‘ plugin. Now at the bottom of the page there is the ‘Page Links to’ option. Works like a charm and is very simple.