Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Blank Screen in IE and Header / Background Question (NOOB)


  #1  
Old Jul 8, 2010, 01:09 PM
Graytness
 
19 posts · Jul 2010
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.
  #2  
Old Jul 8, 2010, 05:50 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jul 8, 2010, 06:26 PM
Graytness
 
19 posts · Jul 2010
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?
  #4  
Old Jul 10, 2010, 10:00 AM
Graytness
 
19 posts · Jul 2010
Bump.

Question regarding header answered, but still wondering why my site won't show in IE. Please help!
  #5  
Old Jul 10, 2010, 10:38 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
site shows up for me in IE
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jul 12, 2010, 12:05 AM
Graytness
 
19 posts · Jul 2010
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.

Last edited by Graytness; Jul 12, 2010 at 01:04 AM.
  #7  
Old Jul 12, 2010, 04:42 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jul 12, 2010, 08:54 AM
Graytness
 
19 posts · Jul 2010
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?
  #9  
Old Jul 12, 2010, 03:11 PM
Graytness
 
19 posts · Jul 2010
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?

Last edited by Graytness; Jul 12, 2010 at 03:29 PM.
  #10  
Old Sep 27, 2011, 03:35 AM
inkdork's Avatar
inkdork
 
41 posts · Sep 2010
Lancaster, CA
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Background image auto resizing to screen marineceo Header configuration & styling 11 Apr 18, 2011 03:35 PM
Really confused about where code goes - yes I'm a noob! maverick9999 Header configuration & styling 2 May 28, 2010 01:19 PM
wp-admin screen blank after login jasonchamb Atahualpa 3 Wordpress theme 13 Dec 9, 2009 04:20 PM
Everytime I add new post or comment, screen goes blank??!? wrastler Atahualpa 3 Wordpress theme 11 Nov 2, 2009 06:26 AM


All times are GMT -6. The time now is 10:16 PM.


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