Webpages and Blogging through Wordpress with Chameleon Theme This tutorial is intended for users who already have some experience with Wordpress. It covers the creation of new web pages with the Chameleon theme. However, it can come in handy for users who want to transition from another Wordpress theme to Chameleon. Chameleon Theme Overview Figure 1 - Chameleon theme 1
Setting up and creating content 1. Log In You can Log in on the page https://muse.union.edu/your-username/wp-login.php (fig. 2) Figure 2 - Login form Your user name is your Union email account (without @union.edu ). The password is your Union email password. After you log in you will be brought to the Dashboard page. From here you can create and modify the content of your web pages. 2. Set up the Chameleon theme In the menu on the left, go to Appearance and Themes. In the list of themes, find Chameleon Theme and activate it. Figure 3 - Dashboard 2
3. Preview the site Let s see how the Homepage looks. Click on your name displayed in the dark grey bar in the upper-left corner of the screen (fig. 4). Figure 4 - Click to view the Homepage Tip: open the Homepage in a new tab so that you can modify the content in one tab and see the effect in the second one. Remember to refresh the page whenever you make some changes to it. Otherwise, you will not see them. The page should look like fig. 1, except it has no content yet. 4. Create a new page Go back to the Dashboard page. In the left menu, click Pages and Add New. (See figure 5) Figure 5 How to add new page and change the template You will be taken to the page shown in figure 6. Type the name of your page and its content. You can also select the template or featured image. 3
Figure 6 - Adding New Page 5. Add featured image Click Set Featured Image to add an image that will be shown on the page and also as a thumbnail on the Homepage. In the new window you will be able to upload a new image from your computer, use an URL (basically an address of the image somewhere on the internet) or select an image you have already uploaded. Note that the window allows you to edit the image, use a thumbnail of the image and more. After you save all changes and publish the new page, the homepage should look like figure 7 (except for the featured image you will have your own). Note: if the homepage still looks the same (New Page 1 links are not displayed) go to Appearance -> Chameleon Theme Options, scroll down and click Save.. Now the homepage should look like the picture shown in figure 7. Figure 7 - The look of the homepage after creating the first page 4
6. Add a new post Go back to Dashboard. In the menu on the left, click Posts and Add New. (See fig. 8) The page for adding new posts looks very similar to the one for adding new pages. Type the name of the post, its content and set the featured image. Then publish the post. Figure 8 - Adding new post Note: when adding Featured Images make sure they are large enough to be displayed in the Featured Slider! Using images that are too small will cause the Featured slider not to display them, just blank space. The minimum size should be approximately 980x340px. Configuring the appearance through epanel Epanel (fig. 9) allows you to control your website. Additional features allow you to toggle on and off features, adjust the layout, and manage colors and more. 7. Set up the Quote Lines and the Content Areas Create two new pages and two new posts as described above. When creating new pages try using the Full Width Template (see figure 5 to change the template) or other templates to see the difference. Then go to Appearance -> Chameleon Theme Options. The page now displayed is called epanel (See fig. 9). 5
Figure 9 The epanel Click Homepage tab at the top of the screen. You will see boxes named Quote Line 1 Text and Quote Line 2 Text, Content Area 1 Page, Content Area 2 Page and Content Area 3 Page - See figure 10 for detail. The quote lines are displayed on the homepage (see fig. 1). Change them to whatever you want. (We changed the first line to Union College and the second to Redefining the Liberal Arts ). You can also disable them. The content of the Content areas (see fig. 1) can be set from the dropdown menus. Set it so that every Content Area contains a preview of one of the three pages we just created. Figure 10 Settings at the Homepage tab of epanel 6
8. Change the logo To change the logo, go to epanel. The first option allows you to change the logo. Click Upload Image. Then you can either upload a new image or use one of the existing images. Then save the changes. After you set the logo, compare your homepage with figure 11 it should look similar. If there is text displayed in front of the image, go to Settings -> General and remove the Tagline. Figure 11 - the homepage after adding some content and changing the logo 9. Set up Featured Slider By default, the Featured Slider (see fig. 1) is set to load content from the last three Posts. If you want to change the featured slider to the content of your pages, go to epanel and click the Featured Slider tab on the top of the screen. Then click the button in the Use Pages box. 10. Place Thumbnails on Pages By default, when visiting pages that have a featured image, the featured image is not displayed. (Fig. 12) 7
Figure 12 New page with the Thumb option disabled (no thumbnail is displayed) To place a thumbnail of a featured image on the page, go to epanel -> Layout Options and click the Single Page Layout. Enable the Place Thumb on Pages option. on. Now, your pages should look like the image in figure 13. Figure 13 Thumbnails are now displayed Setting up a blog Create a new page and set its template to Blog Page (See fig. 14). Now, every post you create will be listed on this page. You may exclude the Uncategorized label from the menu bar. To do so, go to epanel -> Navigation -> Categories and exclude the Uncategorized category from the navigation bar (the green icons will change to red crosses after disabling them). 8
Figure 14 - Setting the Blog Page template Getting more help To get more help, please visit http://www.elegantthemes.com/gallery/chameleon/readme.html (also accessible via epanel), http://codex.wordpress.org/ or http://wordpress.org/support/. 9