Uploading a Logo can be a very important step in creating your header.  If you don't already have a logo you want to use, you can make an excellent logo using the free system at www.cooltext.com.

In the picture above and in our header, you will see the SiteRightNow.com logo I made using the cooltext.com page. After you create your logo, click the download image link you will see on the cooltext.com screen. This will save it onto your computer, so you can upload it on your control panel.

Once you upload your logo, you can experiment with the various options:

Resize Height: The logo will need to be resized to fit in the header area.  Selecting 100% of the height makes the logo the same height as the header.  TIP: If your header height grew larger because of extra text or a video you embedded, you may want to adjust the header height setting closer to the actual height, so the logo takes up the full amount of space.  Just be aware that the logo will resize based on the header height setting, which may not always match up to the actual height if there is something in the header that made the header expand.

Resize Width: When designing this system, I had a thought that for some people, the logo may be the only thing they need to display in the header. That's why I offered a number of width choices that would allow you to position and resize the logo.  Choosing Don't Adjust Width will keep the logo proportional (it won't look distorted or stretched).  But if you choose "Don't Adjust Width", you have less control over how much room your logo will use up on the header.  Your choices range from 5% to 100% of the width of your header.  Some of these options will turn off other sections of your header, since they would be covered up with the logo. You will see choices that say "Auto Turns off Middle Section" or "Auto Turns off Right Section", etc..

Header is divided into three even sections:  The header starts out divided into three equal parts: LEFT (Logo), MIDDLE, and RIGHT.  When starting out, each part of the header takes up 33.33% (one third) of the space. In reality, I rarely used a header where all elements took up exactly 1/3 of the space. The sections will grow dynamically depending on your choices, but it's important to understand how the header space is initially laid out. 

Alignment:  Here is an explanation of the different alignment choices:

• LEFT: The logo will start on the left side of the header. This is the choice I used for SiteRightNow's header.  
• CENTERED ON HEADER:  Many times you just want a logo centered up on the header and that's all you need done. This is a great option. This will automatically turn off the middle section of your header, since the logo will display in the middle.
• CENTERED WITHIN LEFT HEADER:  This is similar to choosing LEFT alignment, but it will automatically center the logo within the left area of the header, which may look better than having it closer to the left edge. As stated earlier, the left side of the header starts out using 33.33% (one third) of the header space.
• RIGHT: This displays the logo on the right side of the header and turns off the right section of the header.  You can also use the "Swap" checkbox under the right header section, which will swap the contents from the right side onto the left side of your header, since you decided to display the logo on the right.  I know that sounds like a peculiar option, but it was a handy feature as I was experimenting.

Vertical Alignment:

So, in the previous section I talked about "horizontal alignment", which is Left, Centered, and Right aligned. But how about if you want to control how high or low in the header space the logo goes? This is where the vertical alignment choice comes in:

• MIDDLE: is the default and will put the logo halfway between the top and bottom of the header. 
• TOP:  this aligns the logo with the top of the header making it appear closer to the top edge of the header area.
• BOTTOM: this aligns the logo with the bottom of the header making it appear closer to the bottom edge of the header area.

Space Around Logo (Padding):

So what do you do if you want to nudge the logo over a little bit?  I found I wanted to push the SiteRightNow logo farther away from the left edge so I chose "20 LEFT".  This adds 20 pixels of space on the left side of the logo. You can do the same thing to nudge the logo away from the other edges of the header with TOP, RIGHT, and BOTTOM settings.  Note that it's possible to cause the header to grow wider than the page width when there is too much padding and the logo is too large. If this happens, try resizing the logo to a smaller size or use the "all the way across" option for the TOP menu instead of the "Center Cropped Width" setting.

Delete:

Checking the delete box clears the current logo. Old logos are not saved, so if you delete by mistake, simply re-upload the logo again using the "choose file" button.

Go Back to the TOP and select another left side menu to continue with more of Mitch's Tips