step-by-step Instructions Hart House C&C Website Guide > Step-by-step instructions > Guidelines Materials available Online: www.harthouse.ca/design
What s included in this guide? Included in this guide: 1. How to access your Hart House Club & Committee Wordpress website 2. How to edit your homepage 3. How to add or edit a blog post 4. How to create and manage photo galleries 5. HTML tags and resources Questions? You can contact us if you have any questions or concerns at communications@harthouse.ca with the subject line C&C Micro-site - Club or Committee Name and we will respond to you as soon as possible. Alternately, we have open office hours between 2:00-4:00 pm every Wednesday, drop by to have your question answered in person. *Please note that we are offering training workshops in September and January, make sure someone from your Club or Committee attends.
1. Getting started To log in to the Hart House site, go to www.harthouse.ca/wp-admin. You can access this from any computer and most mobile devices. You can log in to the above address with the username and password provided to you. While you are welcome to change the password to something more secure, you must provide the communications department with your new password. Please do not change the login name.
2. Dashboard The Wordpress dashboard is the default page you will see when you log in. This is where you can access your pages, galleries and blog posts. The area highlighted in the red box is where all of these options are located. The first thing you need to do is open a secondary tab in your browser where you can view your site. It s important when you re working on your site to have one window with the dashboard/wordpress options open and another with the page you re editing, it s easier and quicker to see your revisions. 1. On a PC, hold down the ALT key and click on Hart House in the top left hand corner. On a Mac, hold down the command key and click on Hart House. This will open the Hart House website in another tab in your browser. 2. Go the the window/tab that has the Hart House site in it, go to Get Involved > Clubs & Committees and scroll down to select your Club or Committee.
3. Editing pages Adding and replacing text, adding images and designing the page. Remember this is the first thing your users will see when they land on your page, keep it simple and engaging. At the top of the window, you ll see there s an option to Edit Page. Click it.
3. Editing pages The basics of what you need to know about this screen. 1. Show/hide kitchen sink: click this, it will show you the other formatting options you have available to you. 2. Update button, press this when you re ready to publish you re edits. 3. View page in Visual or HTML mode. Visual is what you re looking at now, you can also view and edit the html code (which we ll need to do for a few tasks). 4. This is your navigation. If absolutely neccessary, you can edit your navigation, just don t delete it.
3. Editing pages Adding an image: 1. Place your cursor in the text where you want your image to appear. 2. Click Upload/Insert (highlighted with the red box). This will open a file browser where you can choose a photo file from your computer. Resize your images before uploading to the website.
3. Editing pages Image upload options: 1. You must provide alternate text for your image. Example: Hart House exterior building 2012 2. You must turn off Link URL by selecting none. 3. Alignment should always be Left. 4. Be sure to resize your images before you upload them. Try to never use resize images in Wordpress, it uses a lot of space on the server. If your image is the correct size, click Full Size and then Insert into Post.
3. Editing pages Editing and adding text: 1. Paste as Plain Text tool (when you re copying and pasting). 2. Styles: You have three options: Heading 4 (this is your title size, colour and weight), Heading 6 (this is paragraph sized text that s bold and blue) and paragraph (plain paragraph text). You can either type in the new text by hand in the editor, or you can copy and paste it from a prepared document. If you are copying and pasting, highlight the text you want to replace and click the Paste as Plain Text tool. Once the smal window opens, paste your text in it and select insert. This will strip any formatting that was applied to your text in Word or an email, if you don t remove this formatting it will break the styling coded in to the templates. Once you are happy with your revisions, select Update. View your page once the save is complete.
4. Adding a blog post Adding a new blog post: From the Dashboard, hover over Posts, a menu will appear that has All Posts, Add Post, Tags and Categories. 1. To create a new post: Select Add Post to add a new blog post. 2. To edit a post: Select All Posts to view and edit already existing blog posts.
4. Adding a blog post Adding a new blog post: 1. Add the title for your post. 2. Copy and paste your content with the Paste as Plain Text option, select Insert. 3. Select your Category from the right hand sidebar, it should be your Club or Committee name. 4. You can add images using the same steps we used on the homepage. 5. Once you are happy with your post layout and content, select Publish.
4. Creating photo galleries Adding and editing photo galleries: From the Dashboard, hover over Gallery, a menu will appear that has Overview, Add Gallery/Images, Manage Gallery, Tags and About. 1. To create a new gallery and add images: Select Add Gallery/Images. 2. To edit a gallery: Select Manage Gallery.
4. Creating photo galleries Adding and editing photo galleries: 1. Select Add Gallery/Images. 2. Select Add new gallery from the tabs near the topof the page. 3. Name your gallery starting with your Club or Committee name followed by an underscore and the event/gallery name. (eg. debates_eventname) 4. Select Add gallery.
4. Creating photo galleries Adding and editing photo galleries: 1. You will get a confirmation in the yellow bar at the top of the page saying that the gallery has been created. In order to display the gallery on your page, you need to copy html tag provided and paste in to the html on your page. Example: [nggallery id=41] 2. To add photo or images to your gallery, select Select Files and choose them from the appropriate place on your computer. You must resize your images before you upload the to your website, they cannot be larger than 800px x 600px. 3. Once you have chosen your images, select your galllery from the drop down list (debates_eventname) and select Upload Images.
4. Creating photo galleries Managing and editing photo galleries: You can edit your photo gallery by selecting Manage Gallery from Dashboard. Here you can delete and reorder your photos, edit Tags, add image names and add descriptions. You must select Save Changes after you are finished.
4. Creating photo galleries Inserting your photo galleries: Type in or paste the HTML code (from when we first created the gallery) where you would like the gallery to appear on your page. You can do this in either Visual or HTML mode. Select Update and view your page and new gallery once it s complete.
5. Extra bits & pieces. Additional pieces of code and resources: Horizontal lines: Paste in to the HTML: <hr /> Paragraph break: Paste in to the HTML: Adding an email address link: Paste in to the HTML: <a href= mailto:emailaddress@gmail.com >emailaddress@gmail.com</a> Be sure you update the email address in the code. Embedding Facebook Like badges: Go to > http://www.facebook.com/badges Select the kind of badge you re looking for to access the html code. Copy and paste it in to the html window in the location you want it to appear. Twitter Follow button: Add your account name in the code where it currently says twitter.ca/harthouse. Paste in to the HTML: <a href= https://twitter.com/harthouse class= twitter-follow-button data-show-count= false datasize= large >Follow @harthouse</a> <script>!function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0];if(!d.getelementbyid(id)){js=d. createelement(s);js.id=id;js.src= //platform.twitter.com/widgets.js ;fjs.parentnode.insertbefore(js,fjs);}} (document, script, twitter-wjs );</script>