Customizing e107 Themes

From ThemesWiki

Jump to: navigation, search
e107
Official Page
Project Documentation
Download
Source Book
200px-1904811310.jpg
ISBN 978-1-904811-31-2
Publisher Packt Publishing
Author(s) Tad Boomer

We won't be tackling theme making in this tutorial. However, if you have the knowledge and want to create your own theme you can find information in the WIKI at http://wiki.e107.org/?title=Creating_a_theme_from_scratch. But I wanted to show you that these themes take effort so you will appreciate those who take the time to develop themes, especially those who develop themes and share them at no charge. Remember to thank them, encourage them, and offer to send a little money if you like the theme and can use it. It is not a requirement but it encourages more development.

Contents

[edit] Understanding the Theme Layout

The first thing you can to do is log in as administrator and select Admin Area' | Menus'. The screenshot on the opposite page shows the correlation between the areas displayed on the administrator's menu items control page and those on the non-administrator page.

[edit] Psychology of Color

One of the biggest mistakes people make is to choose their theme based on their personal preferences for layout and colors. You can have the perfect layout and great material on your site and yet, people will just not like the site. So you need to ask yourself, "why do people not like my site?" or "why aren't they buying from my site?" The answer is probably that your theme uses a color that is sending out a very different message to your viewers' brains. This is a subject of protracted discussion and there are college courses on this subject. Professionally it is referred to as psychology of color. Your best bet for online information on colors is at http://www.pantone.com.

[edit] Selecting a Theme

Sometimes, the default theme does not quite convey the style you want for your site. While functionality is always the primary consideration, it does not mean that you have to abandon your sense of style just because you are using a CMS. There are three types of themes available for e107. These are the core themes, additional themes (located at http://www.e107themes.org), and custom themes.

[edit] Core Themes

There are several core themes within your installation of e107. Before we explore custom themes, let us look at how you select one of the existing themes:

  1. Open the administrator menu by clicking the link Admin Area.
  2. Select Theme Manager (bottom row, second from left).
  3. Scroll down to kubrick Version 1.0.
  4. Select the Preview Theme button.

As you can see in the screenshot on the previous page, this theme would give our site a much different look. You will see a heading Theme Preview and then a box with information. Use the links provided instead of the back button on your browser. From here, you can preview the different themes. Do not worry, you are not actually changing anything permanently. If you want to change themes, return to the Theme Manager, find the theme, and then select the Set as Site Theme button. You will also notice a button Set as Admin Theme. If you do not set the admin theme, it will retain the attributes of the default administrative theme or the last administrative theme selected.

( Note - Always preview a theme before you commit to changing the theme on sites that already have a large amount of content. Changing the theme may cause information that was visible with the old theme not to be visible with the new theme.

It is always a good idea to open up two windows with one window showing the front end and the other showing the back end. That way if you commit to a new theme and it does not work for some reason, you can switch to the back-end window and change it back.)

Go ahead and apply some other themes and see how they look on the screen. You will notice that you can expand some themes to fit the entire screen. When you are done, select the kubrick theme but this time make the selection with the Set as Site Theme button.

[edit] Additional Themes

If none of the core themes appeals to you, I suggest that you go to the official e107 themes development and repository site at http://www.e107themes.org.Take a moment to register on the site and then you can preview and download themes and avatar packs, and also find information on developing your own themes.

The procedure for installing one of these themes is explained in the following section.

[edit] Custom Themes

Sometimes a business owner needs to establish a unique identity before the first customer gets to see the website. For those individuals using a theme that is downloadable no matter how nice it looks is just not sufficient. In such cases you will want to make a custom theme.

health insurance quotes auto insurance quotes insurance price quotes

I would caution anyone who is considering making own theme or having a theme custom made, to ensure the following:

  • The theme is coded in XHTML a minimum of 1.0, 1.1, or better the latest standard, which is version 2.0. You can learn more about XHTML at http://www.w3schools.com/xhtml/.
  • While browser creators have made better strides to adhere to W3C standards you will still run into the occasional rendering quirk. Therefore I recommend that CSS 3.0 should be employed for the latest layout technology but certainly nothing older than version 2.0. The older the version, the greater the chance for cross-browser rendering differences. You can find out more about CSS at http://www.w3schools.com/w3c/w3c_css.asp.
  • The theme is cross browser compatible i.e. with Internet Explorer, Netscape, Firefox, and Opera.
  • Always check the e107 themes site http://www.e107themes.org for e107-specific information, updates, and cross-browser issues. (This could save you or your developer a lot of time.)

Once you have your new theme you need to add it to your e107_themes folder so that you will be able to select it through the administrative interface. This can be accomplished in two ways:

  1. Open the administrator menu by clicking the link Admin Area.
  2. Select Themes Manager.
  3. Scroll down from the default theme. Right below you will see Theme Manager :: Upload Theme.
  4. Browse to the ZIP file on your computer, and then select Upload Theme.

The theme is now available for selection. Sometimes the ZIP files do not work the way they should. If this should happen to you then do the following:

  1. Check to make sure that the fileupload_.php is named fileupload.php and that the required file extension is contained inside.
  2. If the file is zipped, unzip it creating a folder with the name of the theme.
  3. Open your FTP client.
  4. Find the source folder where you just unzipped your files.
  5. On the web server locate the /public_html/cuddlecare/e107_themes/.
  6. Now copy the entire folder up to the web server.
  7. The theme is now available for selection through the Themes Manager menu.

[edit] Deleting Themes

Sometimes you know that you are never going to use a particular theme or themes for your site and having it, or those, present is just a waste of resources. To delete unwanted themes do the following:

  1. Open you FTP client to your server.
  2. Locate the theme(s) you wish to delete at /public_html/e107_themes/ and delete them.
  3. Close your FTP client.

The next time you look at themes in the administrative interface you will only see the themes that you left on your server.

[edit] Customizing Layout

Using the control panel, we can modify the look of our site by activating or deactivating and changing the menu items. Let us change some things around on our site to demonstrate how this works.

Navigate to Area 2 (the first screenshot under the section Understanding the Theme Layout labels Area 2) by selecting Admin Area | Menus. Click the drop‑down menu below the heading powered_by. You will see a menu that looks as shown in the screenshot below. Select Deactivate and the item will disappear from Area 2 and appear in the Inactive Menus section in the middle of your screen.

You can check your work without having to log out of the administrative interface by opening up a new instance of your browser and viewing your page as a visitor. This will save you a lot of time. Do not forget to refresh the second browser after you have made changes with the admin browser or you will not see the changes.

Now go view your page as a visitor and you will notice that the Powered By e107, PHP and MySQL text and graphics has disappeared.

[edit] The WYSIWYG Editor

Before we begin modifying how things are displayed on our site I would like to introduce you to the WYSIWYG (What You See Is What You Get) editor. As you remember, we activated this feature when we were setting our site preferences. It will automatically appear in those areas where it can be used. The screenshot below shows the toolbar layout and functions:

[edit] The File Upload Manager

In addition the WYSIWYG editor, another valuable time-saving tool is the File Upload Manager. Instead of opening your FTP client each time you want to upload a file (images, video clips, sound clips, documents, etc.) you can click on the File Manger icon located in the administrative interface.

Before you can use the file upload manager you need to enable it and also to tell it what kinds of files you want to allow to be uploaded to the server. Let's do this together:

  1. On your hard drive unzip the e107 files.
  2. Locate the \e107_admin\ directory.
  3. Scroll down the file list until you come to filetypes_.php.
  4. Open the file using Notepad or similar text or PHP editor.
  5. You should see the following: zip, gz, jpg, png, gif'.'
  6. If you want to add any other file types enter a "," and then the file extension (for example: jpeg, swf, wmf, etc.).
  7. Save the file.
  8. Rename the file to filetypes.php. (Make sure to remove the "_" before the .php.)
  9. Open your FTP client and upload this file to the public_html/e107_admin/ directory.

If you added the file type and changed the name of the file to filetype.php and still get an error message, it is most likely to be a server configuration problem. If you are on a shared server probably there will not be much you can do about it as most hosts will not change their configurations for just one person. That doesn't mean you can't ask.

If you can't upload using the file upload manager then you can still open up your FTP client and upload your graphic to the appropriate location.

[edit] Creating Menu Items Using the Custom Page/Menu Tool

We are now going to add a small photo of the pet of the month. Use a photo of your pet or any pet. I just happened to have a photo that I took of a frisky little pup, down in Key West. You may use an image of any pet your wish and perform the following steps.

  1. Locate the image called pom.png from the images files. If you want to substitute your own pet photo, resize your photo to a width of 90 pixels wide and no more than 90 pixels in height. Save the file as pom.png.
  2. Upload your graphic file to the server using one of the following two methods: Select Create Menu by navigating to Custom Menus / Pages and then use the Upload Images feature located at the bottom of the page. Open your FTP client and upload the pom.png file to the directory /public_html/e107_images/custom/.
  3. Return to the main administrative interface and select the Custom Menus / Pages (second row on the left).
  4. On the right side of the screen, select the Create menu option.
  5. Key in Pet of the Month for the Menu Name and Title / Caption.
  6. Now position the cursor in the text box and use the Insert Image icon located on the second line of the WYSIWYG editor just to the left of the HTML icon. When the Insert / Edit Image pop-up menu appears, use the Library drop-down menu and select Custom Images. Next select the pom.png file, set Text flow to Left, and select Save.
  7. Now select the Create menu at the bottom of the screen (see screenshot below).

You can activate this in Area 2 in the following manner:

  1. Select Main from the top menu.
  2. Select Menus.
  3. Locate the online_extended in Area 2. From the drop‑down list select Deactivate.
  4. Locate and select Pet of the Month, which will now be in the list in the middle of your screen.
  5. Select the Activate in Area 2 button.

Your screen should look as shown in the screenshot below:

After you have completed the above steps, select Home from the top menu and your front page should now look as shown in the screenshot below:

[edit] Deleting a Custom Menu Item

A custom menu item can be deleted easily. We know that we are not going to be using Pet of the Month on our Cuddle Care website and want to delete it.

  1. . Select the Custom Menus/Pages icon.
  2. Locate the Pet of the Month item which is ID Number 1 and delete it.

This deletes the menu item but does not delete the image file. The image file can be deleted in the following manner:

  1. Open your FTP client.
  2. Locate the /public_html/e107_images/ directory.
  3. Delete the pom.png file.

[edit] Changing Views by Membership Level

Say you want only registered members to see the blog calendar but you want any visitor to the site to see the clock. We can do this using the following procedure:

  1. Select Menus icon from the administrative interface.
  2. Select blogcalendar from the Inactive Menus and select Activate in Area 2.
  3. Use the blogcalander drop-down menu and select the Move to top option.
  4. Use the same drop-down menu and select Visibility.
  5. In the Only visible to drop-down box choose the option Members (see the screenshot on the next page).
  6. Next select clock from the Inactive Menus and select Activate in Area 2.
  7. Use the clock drop-down menu and select the Move to top option.
  8. Use the same drop-down menu and select Visibility.
  9. In the Only visible to drop-down box choose the Guests option .

    ( Note - You will notice that you have the option to display specific menu items on all pages, or certain pages. Enter one page per line; enter enough of the URL to distinguish it properly. If you need the ending of the URL to match exactly, use an ! at the end of the page name For example: page.php?1! )

  10. Now log out as administrator and you will see the front page with the clock just above the Pet of the Month as shown in the screenshot below.

To see the blog calendar, use the username and password that you created for a registered user. Once you log in, you will see the front page with the blog calendar just above the Pet of the Month but you will not see the clock, as shown in the screenshot below:

We can create custom menus as well as a multitude of other items easily. Consider the PC Magazine as one of your product to be sold online. Say you joined an affiliate program and made a commission from every sale of a PC Magazine from your site. You could edit the menu item to include a URL so that when someone clicked on the PC Magazine image a new window would open up and go to the specified web page.

[edit] Customizing Our Site

Finally we are going to change the appearance of the site to make it look more like a veterinary site. Before we start we have some housekeeping to do. From the administrative interface do the following:

  1. Select the News icon.
  2. For ID 1 Welcome to e107 select the edit icon.
  3. Scroll down to Visibility and select the No One (Inactive) checkbox that appears on clicking the description Choose which visitors will see news item.
  4. Go to http://www.connetek.com, register, and download the e107_images.zip file. It will contain all the graphics we will be using for our web project.
  5. Unzip the images.zip file to your hard drive.
  6. Upload the graphic vet01.jpg to the /public_html/e107_images/ directory using either the File Upload Manger or your FTP client.
  7. From the administrator menu of e107, click on the Welcome Message icon.
  8. Select ID 2 Welcome (the welcome message we created previously).
  9. Position the cursor right before the first letter of the paragraph and select the Insert/Edit Images icon from the toolbar.
    Select vet01.jpg (or .png or .gif)
    Set Text Flow to Right
    Margin-Left:' 10
    Margin-Right:' 10
    Margin-Top:' 10
    Margin Bottom:' 10
  10. Located just under the graphic is the Save/Cancel buttons. Select Save.
  11. Now select Home from the top menu and your page should look as shown below:

Wait a minute. Something doesn't look right here. The information is all there but my eight year old could design a better looking front page. Ok, I just wanted to show you how things don't always work out the same. Had we replaced the graphic with one as large as the original, it would have worked but we didn't need that big graphic; however, this one will never do, so let's fix this page.

  1. Return to the administrative interface.
  2. Select Front Page.
  3. Open the Welcome to Cuddle Care message.
  4. Click the Edit icon.
  5. Delete the Welcome in the message caption.
  6. Move down to the message text and position the cursor before the word "At ".
  7. Type Welcome to Cuddle Care and hit the return key twice.
  8. Select the text Welcome to Cuddle Care before the Welcome and while keeping the button depressed, drag the cursor to the right of the Care.
  9. Release your finger from the left mouse button.
  10. Now position the cursor over the highlighted text and select 4 (14pt) for the text size.
  11. Position the cursor at the end of the first sentence and press the return key twice.
  12. Then position the cursor at the end of the second sentence and press the return key twice.
  13. Leave Visibility set to Everyone.
  14. Click the Update button.

Your page should now look as shown in the screenshot below:

You will note that you are still logged in as the administrator in the previous screenshot. If you log out, the Welcome Admin menu will be replaced with the login menu.

[edit] Internationalization Using a Custom Language File

The beauty of the Internet is that it gives you an opportunity to reach customers who speak other languages. While core language files do not translate the text of your site, the language packs do contain the necessary character sets for most languages and, if properly installed, will allow your visitors to select an installed language that will allow them to navigate the site in a familiar language.

It is very easy to make e107 multilingual for your users. Cuddle Care has a fair number of clients who speak Spanish so we are going to enable the user to select Spanish to navigate the site. To do this we must first download the language file that we need as follows:

  1. Go to http://e107.cvs.sourceforge.net/e107/e107_langpacks/zipped_langpacks_utf-8/.
  2. Locate the most recent file that starts with e107_0.7.x Spanish_UTF (here x denotes the most recent version).
  3. Locate Links to HEAD and click on download.
  4. Save the file to your computer.
  5. Unzip the file.
  6. Log on to your FTP client.
  7. Upload each of the folders (e107_docs, e107_handlers, e107_languages, e107_plugins, and e107_themes) in the unzipped files to your e107 root installation /public_html/cuddlecare/.

( Note - Make sure to set your FTP client so that it only overwrites files that are newer than the ones on the web server when uploading e107 files.)

Now we are going to create a small PHP file. Freeze! Don't run away if you have never written PHP code. I promise that this is a painless procedure as long as you copy the code just as it appears below. Let us walk through it step by step.

Open up Notepad or a similar text editor. (Do not use a word processing program or WordPad as these programs may add extra characters that will contaminate the code.)

Enter the following text: 

 <?php
 define("LAN_MYUSERCLASS","Mi Userclasso");
 ?>

Save this with the file name Spanish_custom.php.

Congratulations! If you have never done so before then you have just created your first bit of PHP coding.

Open a new Notepad and enter the following text: 

 
<?php
 define("LAN_MYUSERCLASS","My Userclass");
 ?>

Save this with the file name English_custom.php

Now that we have our files, it is time to upload them to the server in the following manner:

  1. Locate the directory /public_html/cuddlecare/e107_languages/Spanish/.
  2. Upload the file Spanish_custom.php.
  3. Locate the directory /public_html/cuddlecare/e107_languages/.
  4. Upload the file English_custom.php.
  5. Log off from the FTP client.

Now we have to instruct e107 what multilingual database usage we want to set up:

  1. Navigate to administrative interface.
  2. Click on Language.
  3. Check the checkbox labeled Enable Multi-Language Tables as shown below:
  4. From the menu on the right side of your screen select Tables.
  5. For Spanish click on the button that says Create under the Options column.
  6. Select all the checkboxes except the following ones (see the screenshot on the next page):
    • Menus
    • Drop existing tables?
    • Confirm delete
  7. Click on the Create tables/Update button.
  8. Return to the administrative interface.
  9. Select Menus.
  10. Select userlanguage from Inactive Menus and press the Activate in Area 1 button.
  11. Now use the drop-down menu for userlanguage and select Move Up.
  12. Now select Home from the main menu and you should see the Select Language menu on the right side of the screen just under the header. It should display a drop-down menu with both English and Spanish options as shown in the screenshot below:

Now we have to make our language selection menu available for visitors and members in the following manner:

  1. Open the administrative interface.
  2. Select User Classes (see the screenshot below).
  3. In the Class Name text box key in LAN_MYUSERCLASS.
  4. Select the Create New Class button.
  5. Return to the administrative interface.

Log out as administrator and view your front page. You will now see that the language selection is in the upper left corner just above the log on. Just as an experiment, select Spanish and select Set Language. Your screen should look as shown in the screenshot on the next page.

To change the language back to English, just select English and click on the Eligir Idoma button. Congratulations! You now know how to make the navigation of your site multilingual.

[edit] Additional Refrences

  • If you want to learn about installing e107, click here
  • If you want to download free theme samples, visit themebot.com

[edit] Source

The source of this content is Chapter 4: Customizing the Look and Feel of Your Site of Building Websites with e107 by Tad Boomer (Packt Publishing, 2007). Logo Designby ThemesWiki.org Kevin Josh 2010

Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes and criar sites

And Like The Global Information Network and Global Information Network

Retrieved from "http://www.themeswiki.com/Customizing_e107_Themes"
Personal tools