Wordpress with Chameleon Theme.pdf

Webpages and Blogging through Wordpress

withThis tutorial is intended for users who already have some experience with Wordpress

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

1


with Chameleon Theme This tutorial is intended for users who already have some experience with Wordpress. It covers the


want to transition from another Wordpress theme to Chameleon.

Chameleon Theme Overview

Figure 1 - Chameleon theme


. It covers the


2

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

3

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.

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

(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 (

Chameleon Theme Options, scroll down and click

shown in figure 7.

Figure 7 - The look of the homepage after creating the first page

4

Figure 6 - Adding New Page

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



hanges and publish the new page, the homepage should look like figure 7 (except for

you will have your own).

Note: if the homepage still looks the same (New Page 1 links are not displayed) go to Appearance

scroll down and click Save. Now the homepage should look like the picture

The look of the homepage after creating the first page

to add an image that will be shown on the page and also as a thumbnail on the

image from your computer, use an URL



hanges and publish the new page, the homepage should look like figure 7 (except for

Appearance ->

. Now the homepage should look like the picture

5

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).

Click Homepage tab at the top of the screen. You will see boxes named

2 Text, Content Area 1 Page, Content Area 2 Page

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

6

Figure 9 – The epanel

tab at the top of the screen. You will see boxes named Quote Line 1 Text

Content Area 2 Page and Content Area 3 Page - See figure 10 for detail.



ble them. The content of the Content areas (see fig. 1) can be set from the dropdown menus. Set it


Figure 10 – Settings at the Homepage tab of epanel

Quote Line 1 Text and Quote Line

See figure 10 for detail.



ble them. The content of the Content areas (see fig. 1) can be set from the dropdown menus. Set it


8. Change the logo

To change the logo, go to epanel. The first option allows you to change the logo. Click

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

displayed in front of the image, go to

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, g

the top of the screen. Then click the button in the

10. Place Thumbnails on Pages

By default, when visiting pages that have a featured image, the featured image is not displayed. (Fig. 12)

7

The first option allows you to change the logo. Click Upload Image.


are 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.

the homepage after adding some content and changing the logo

(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

the top of the screen. Then click the button in the Use Pages box.


Upload Image.


it should look similar. If there is text

(see fig. 1) is set to load content from the last three Posts. If you want to

Featured Slider tab on


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

Single Page Layout. Enable the Place Thumb on Pages

image in figure 13.

Figure

Setting up a blog

Create a new page and set its template to

listed on this page. You may exclude the “Uncategorized” label from the menu bar. To do so, go to

epanel -> Navigation -> Categories

(the green icons will change to red crosses after dis

8

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

Place Thumb on Pages option. Now, your pages should look like

Figure 13 – Thumbnails are now displayed

Create a new page and set its template to Blog Page (See fig. 14). Now, every post you create


> Categories and exclude the “Uncategorized” category from the navigation bar

(the green icons will change to red crosses after disabling them).

New page with the Thumb option disabled (no thumbnail is displayed)

and click the

on. Now, your pages should look like the

(See fig. 14). Now, every post you create will be


and exclude the “Uncategorized” category from the navigation bar

9

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/.

Documents

Wordpress with Chameleon Theme.pdf