Tuesday, May 15, 2007  

UPDATE: The newer Yorktown and Acton skins include a simple tool to upload and display a header image or logo. These instructions are specifically for the older Newton and Brighton skins.

By default, EditMe displays the title of your site (which you can modify in Site Settings) in a box at the top of every page. See the big "EditMe Demo Site" text at the top of the demo site for an example. Many of customers want to replace this text with an image logo or banner of their own. In this Tip, we'll show you how.

This tip assumes you're using a "Brighton" or "Newton" skin on your site. The "Classic" skins don't provide an area to easily drop in a logo. If you haven't changed the skin on your site, then you're most likely using a Brighton skin, as its the default. If you want to make sure, go to your Site Settings → Look & Feel → Skins page and find the skin that matches your site design. The name of the skin should start with "Brighton" or "Newton".

Step 1: Upload an Image Attachment

We'll assume you already have an image you want to put at the top of your site and that it's called "mylogo.jpg". You'll want to make the file name short and simple as you'll be typing it in later on. You'll also want to use an image editor to resize the image to fit into the site and perhaps change the background color to match your site's skin. Let's upload that image to the Home page on your site.

1. Navigate to your site's Home page (the default page you see when visiting your site).
2. Log in as an administrator user.
3. Click the "Attachments" link under the "Page" section of the tools menu.
4. Click one of the five Browse buttons and find your mylogo.jpg file and click OK.
5. Check the "Hide" box for the file you're about to upload. This will keep the file from being listed at the bottom of your home page.
6. Click Submit.

Step 2: Modify your Layout

In this step, we'll modify your site's Layout to show the "mylogo.jpg" image attached to your site's home page instead of the Site Title.

1.  Click the "Home" link in the upper right corner of the Attachments page to return to your site's Home page.
2. Click the "Settings" link in the Tools menu. Hover your mouse over the "Look & Feel" menu at the top and select "Layouts".
3. Select "Edit" from the dropdown box next to the Layout labeled "Current Default". The page will reload with your site's current Layout in an editing box.
4. Here's where the instructions depend on the Skin you're using:

For Brighton Skins:

1. Scroll down to around line 37. We're going to repalce this line:

<p editme="cdata site.title">Brighton Layout</p>

 with this:

<p><img src="/files/HomeOld/mylogo.jpg" alt="Your Site Title Here" border="0"/></p> 

For Newton Skins:

1.  Find these two lines. If you haven't edited your layout, they should be at line 33 and 34:
   
             <h1 editme="cdata title">site title goes here</h1>
             <h2 editme="cdata subTitle">site sub-title goes here</h2>  
2. Replace both of those lines with:
   
              <p><img src="/files/HomeOld/mylogo.jpg" alt="Your Site Title Here" border="0"/></p>  

Note that the replacement text we've provided assumes that you attached a file named "mylogo.jpg" to your site's "Home" page. If you use a different file name or attached the file to a different page, you'll need to modify the path to the image accordingly.

When you're done, save the Layout and view your site's home page to see your logo displayed. If it looks good to you, you're done! If not, read on...

Step 3: Modifying the Header Box Formatting

You now have your image showing in place of the header text at the top of every page. You may want to make one or two changes to your site's CSS stylesheet as well. For example, you may want to remove the border around the box that contains the image (in a Brighton style sheet). You may also want to set your site to use a fixed width if your image is a banner and you want it to "fit" all the time. It's hard to provide exact instructions here as they depend on what you're trying to do and which Skin you're using. The Newton skins, in particular, can be tricky to work with because of the complex CSS layout they use.

To edit your site's CSS:

1. Assuming you're still in your site's Settings screen, hover your mouse over the "Look & Feel" menu at the top and select "Style Sheets".
2. Select "Edit" from the dropdown next to the Style Sheet labeled "Current Default". The page will reload with your site's current CSS stylesheet in an editing box.

Again, here's where things become specific to the skin you're using...

Header CSS for Brighton Skins 

To change the background color and remove the border around the header box:

1. Scroll down in the edit box and find the line that reads "table.tableheader {". This block of text formats the header box at the top of every page of your site.
2. To change the background color to white, change the value of the "background-color:" line to "white".
3. To remove the border, delete the line that starts with "border:".
4. Click Preview Page to test your changes.

The other change you may want to make is to fix the width of your site's layout if you are using a banner image.  To do this:

1. Finding the line that reads ".mainTable {". This is near the top of the CSS stylesheet.
2. This style is usually just one setting of width. You can change the percentage value to a fixed pixel width like this: "width: 800px;".
3. Test different widths by clicking Preview Page until you've got the width you like.

Header CSS for Newton Skins

As previously mentioned, the Newton skins use CSS for layout, so modifying the style sheet can be tricky.Be willing to experiment. 

The header in Newton skins is contained in a DIV called logo - if you search the Style Sheet for #logo you'll find definitions for it in a few places. If you want to change the background color of the heading box, look for a background-color definition for #links_container, which contains #logo. 

When you're done with your changes, click "Save & Apply" to make your change permanent.

Share Your Results

We'd love to see your results. Send us a link at http://support.editme.com to your site displaying the new banner! We'll add links to any results we get here.