[SOLVED] Help! Having issues with header image
 

www.mountainstreamgroup.com This is my website.

I'm trying to do several things after I upgraded to 3.6.1.
1. I removed the %logo, and moved %image before %page. After several attempts to get the software to work appropriately it finally put the image before the page menu bar.

2. I changed the image. While your instructions say you can put any image name in the image folder for my site the only way it will read the image is if the image name is header1024-200.jpg. if the image is any other name it doesn't show up.

In changing the image while the image is exactly 1024 pixels wide and I created the jpg image in Adobe Illustrator the theme is causing the image to be larger than it actually is causing the right side of the image to be cut off.

3. I also attempted to create a menu bar to go across the page. Once again changes that I am making aren't taking hold. First, I wanted to increase the font to 14pt. The theme didn't do this until I put in the code to the CSS Inserts for the menu bar.

In creating the menu bar theme is once again causing the image to push even further off the page now cutting the logo off.

I went back in and removed the menu bar code from the CSS Insert but the menu bar is still there.

I've tried looking at my site using Chrome, Firefox and Safari on two separate computers and the issues occur on all browsers on both computers. I've cleared the browsing history, closed the browsers several times. The same issues still are occuring.

What the hell is going on? Can anyone help me?

Your first problem is you have a caching plugin active. Disable it while you are doing development so you can see changes right away.

So disable it and then try the other things you want to do.

Thanks for the turning cache off. That was very helpful. Do you have any ideas about the image problem?

You should be able to put multiple images in the header folder as long as they have valid names (no blanks etc) the cache plugin may have effected that also.

the size issuw is mostlikely due to the width of the container you have defined and any padding you have.

I have not changed any of those constraints when I changed from %logo %pages %image to %image %pages.

Besides that change, I changed the image that I was using. The image is 1024 x 254. The page width is 1024. On the header image page I have the size of the header image set to 254. I don't get why the theme is increasing the size of the image.

When I first put the image in the folder, the theme cut the image off at the 'p' in the name in the logo. Then when I tried to increase the size of the menu bar height. That is when the theme enlarged the image even more to the point it is cutting off up to the 'o'.

I figured out the reason for the moving of the image to the right. It was due to the header image position being changed from topcenter to topleft. So it is shifting the image, but there is still the issue why the theme is reading a 1024 wide image as something that is significantly wider.

Go to ato->export/import settings and export the settings and attach them to a reply

I tested the old image (1024 x 200) that had been used. When I put it back in the folder there were no problems with it moving left to right or with its size. However, when I put the current image back in the folder I had issues.

at ato->Style & configure LAYOUT->Layout Container Style you have 'padding: 20px;' which adds 20 px of padding to each side of the container, so your container that can be a maximum of 1024 will only show 984 liss 1% because you also have 'Layout WIDTH and type (FLUID or FIXED)' set to 99%

Thanks for the information.

I didn't realize padding did that and that I had to have the fixed set at 100% when I told the the fixed size to be 1024.

Then I have another question. I don't want the page to start right at the top I'd like to see a bit of the background at the top. How do I do that if it isn't through padding?

you just need to use the correct syntax for the padding. When you say 'padding:20px;' that is applied to top, right, bottom and left sides of the elements. If you say 'padding 20px 10px; then you get 20px for top and bottom and 10 for left and right. You can also specify the padding for all four, or use 'padding-left: 55px;

When customizing a site, you have to know some CSS and a great resource is http://w3schools.com/css and it should be come a 'favorite' for annyone working on a website. It's one of my bookmarks

Thanks for the help.