Editing Theme Images

This is a short documentation guiding you through editing an image set for a theme installed on your board.

This guide will assume that you already have the images that you want to use. If you've procured an image set from a site and are having trouble opening the file, skip to the end of this documentation first.

Uploading Images

This is the first step toward editing the image set. The image needs to exist on the internet via a URL before it can be used. The easiest way to upload images is via a post, as you can upload up to 10 images per post. Or, you can use the File Manager via the AdminCP.

Replacing Images

Assuming you've now uploaded a file(s) that you want to replacing an existing image with, to go the Board Themes page, and click Edit Theme Images for the theme you want to edit. As shown in the image above, the image set is divided into several categories for easy editing. The examples for each set haven't been added yet, though ;)

For the sake of an example, we'll replace the forum marker. Click Edit Images for the Forum Markers category. On the next page, you'll see this: Clicking on View Preview on the right will cause the HTML interpretation of the code in the textarea to popup, as shown. If you edit the code, clicking Update Preview under the preview image will refresh the interpretation. This is a good feature to use in case there is an error with your code, or to make sure that you're editing the right image.

To replace the image, you need to copy the URL for the uploaded image. Uploaded via a Post: Right-click on the image's link in the post, and copy the URL/Location. Uploaded via File Manager: View the General Files (contains all ACP uploaded images), highlight the URL and copy it. Either by holding down the CTRL key and then pressing C, or going to Edit> Copy on your browser's menu. Highlight the URL and then hold down CTRL and press V to Paste, or go to Edit > Paste on your browser's menu. The existing URL should be replaced with the URL of your uploaded image: Clicking Update Preview will confirm that the URL works, and the image displays correctly.

After you're done editing, click Submit.

What is the 'alt'?

If you're unfamiliar with this part of the image code, it's the alternative text that the browser displays if the image fails to load. You should put something here.

A Note About the Default Avatar

The original code for the default avatar looks like this:

<img src='http://z1.ifrm.com/static/1/default_av.png' alt='No Avatar' class='member' />

class='member' is an important aspect of this image that you should leave in. If you're unsure about whether your CSS(Theme Appearance) contains a bug fix for centering default avatars, change member to avatar.

themes/theme_images.txt ยท Last modified: 2015/01/09 16:02 (external edit)