Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Blank Screen in IE and Header / Background Question (NOOB) (http://forum.bytesforall.com/showthread.php?t=8013)

Graytness Jul 8, 2010 01:09 PM

Blank Screen in IE and Header / Background Question (NOOB)
 
I'm currently in the process of designing a new blog. Know a little bit about HTML and next to nothing about CSS. While designing, I'm trying to read up about CSS, but find sometimes it's easier to ask real people for help.

Currently, I have one problem and one question. I'm running Atahualpa Ver. 3.4.9 and WordPress Ver. 3.0. Still in the very early stages of design here and have already encountered a major problem. I have been working on the blog and always view it with Safari and Firefox and it looks as intended, but my partner on the blog just told me that it's blank on IE, which was confirmed by my girlfriend. Does anyone know why this is happening and how I can fix it? I'd love to leave as is, seeing as how I loathe IE, but I don't really want to exclude the many who use it as their primary browser.

The question I have is in regards to the header and background. I designed the header in Photoshop and have gotten it to fit right and to adjust to different screen resolutions, but was wondering how to make my page look like this blog: http://www.viget.com/inspire, in that the header kind of meshes with the background, which eventually fades into a repeating background. I hope that makes sense. I know he isn't using the same template, but it seems like this effect would be possible using Atahualpo. Is it accomplished with two different graphic files or one? The Photoshop part is easy for me. The coding part isn't and that's where I'm hoping someone can help.

My blog can be found at www.dudesofamerica.com. Thanks in advance for any help.

juggledad Jul 8, 2010 05:50 PM

that site is using a backgroud image
lets say you make an image that is 1400px wide and 400px heigh and put a 600 x 200 image top center and then have teh color a gradient that goes from red to yellow.

You specify your background as teh picture top center and also assign a background color of yellow.

Now the top of the page will be red flowing to yellow with your 600 x 200 image and the rest of the page background will be yellow

Graytness Jul 8, 2010 06:26 PM

Thanks for your help again. That's what I figured was going on there, but wasn't sure. I'll play around with it and see what I can muster up.

Any guess as to why the page won't show in IE?

Graytness Jul 10, 2010 10:00 AM

Bump.

Question regarding header answered, but still wondering why my site won't show in IE. Please help!

juggledad Jul 10, 2010 10:38 AM

site shows up for me in IE

Graytness Jul 12, 2010 12:05 AM

Interestingly enough, it now works for me in IE as well. Thanks for checking. Mac user here and had to wait a day or two before I had access to a PC.

I'm making progress on the background gradient image, but have encountered one problem. Is there a way to make the header a GIF of PNG with transparency? I made it in Photoshop, but when I upload the header, it always has a white background in the area that is supposed to be transparent.

Basically, I have the background as an image that fades to gray and have set the background color to the same gray color so that fade is flawless. I'd like to use a transparent header so that I can use my custom header with the background image coming through in the header box. It seems that it's easier this way because the blog title (with the typewriter font) will always stay centered over the main column. I'm sure I just have to change a piece of code in order for the header GIF to show the transparent areas as transparent as opposed to white.

Hope this makes sense. If I have to insert code somewhere, please be kind enough to tell me where to locate said code.

juggledad Jul 12, 2010 04:42 AM

GIF and PNG are both file formats so you can have a image you save as a GIF or you can save it as a PNG, but you can't save one omega as both.

Try it as a PNG

Graytness Jul 12, 2010 08:54 AM

Thanks, but I guess my post was confusing. I have no problem getting the image to be the correct format (either GIF of PNG), but when I insert the image into the header, the areas that are transparent are filled with white, as opposed to being transparent and letting the background image through. I know that if you change the background color in the layout container style, that it makes the header image transparent, but it also affects the entire center column, and I was hoping to just make the header part transparent.

Here is what I am hoping to do:
1) Use an image for the page background that has a gradient and fades to a solid color. Also set the background to the same solid color so that the image "fades" to the solid color. This has already been done.
2) Insert a header image that is transparent, with the exception of text. Basically, I have a picture of a logo and the name of the blog and I would like those to show on the background of the page. This image is a PNG (of GIF, doesn't matter) with the everything other than the font and logo image being set to transparent. Right now, when I insert the image, the transparent parts of the image are white. I want the transparent parts to be transparent and reveal the page background.

If you look at my page now, the header image is a plain old .jpg, but only because I am still using my original header because I don't like the way that it looks with the white background when using the PNG image with the transparencies.

Is there a way to make the header image transparent, while keeping the container with a solid background?

Graytness Jul 12, 2010 03:11 PM

I think I've got it. I decided to switch to a fixed width site, which made the solution much more easy for me to accomplish.

I thought I had it, but it turns out that I don't have it. No matter what image I put in the header, it always makes the background white when I want it to be transparent. Is there any way to change the background color of the header box to transparent?

inkdork Sep 27, 2011 03:35 AM

I had this same issue, but your last post held the answer to fixing it. I can't remember which section it is in, but you need to change the background attribute for the (I think it was) the center column to no set background. You're looking for "background: #ffffff;" somewhere.

After I removed that, I was able to have my transparent header image display properly without the white container background showing through it.

The fix will remove the white background from all areas of the page though unless you go into the other areas individually and add the background color attribute back into the areas where you want it.

You can see on my blog that it worked. http://prettycanhurt.com/ Hope that helps, even if its only for future reference.


All times are GMT -6. The time now is 12:47 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.