Changing the Header of the "Karma" Theme WordPress

Giri comments:

#wrapper {
background: transparent !important;
}

#header .header-holder {
background: transparent !important;
}

Giri comments:

#wrapper {
background: transparent !important;
}

#header .header-holder {
background: transparent !important;
}

#main {
background: #F4F4F2 url(images/_global/bg-div-main.jpg) 0 0 repeat-x;
}

Thats it.

Giri comments:

Please note: add my final code in the bottom of this file..

themes/Karma/style.css

philipzeplin comments:

Ever so very close! It comes down to me not being clear enough, and I'm sorry for that!
Basically, so far so good, BUT:

1) It appears that http://novelconcept.org/wp-content/uploads/2013/06/custom_header_2.png is also no longer showing up. This was also in the header, and I would like it to stay there (it's a transparent PNG file). Or should I instead be trying to edit the bg-div-main.jpg file?

2) There was a "rays" overlay effect on the header, which also seems to have gone poof. That, too, if possible, I would like to stay. I'm not entirely sure which file it is, I haven't been able to find it, but in the CSS it was referred to as "rays", I assume it might be a PNG file or CSS effect.

3) The blur effect, which I talked about in my original post, is not implemented in this idea. Again, if possible (or perhaps tell me a workaround?) I would like the background behind the header to be blurred.

Giri comments:

<blockquote>1) It appears that http://novelconcept.org/wp-content/uploads/2013/06/custom_header_2.png is also no longer showing up. This was also in the header, and I would like it to stay there (it's a transparent PNG file). Or should I instead be trying to edit the bg-div-main.jpg file?
</blockquote>

In that case add this code in the bottom of your custom css. css always use the last defined rule.

#header .header-holder {
background: url(http://novelconcept.org/wp-content/uploads/2013/06/custom_header_2.png) 0 0 repeat-x !important;
}

<blockquote>2) There was a "rays" overlay effect on the header, which also seems to have gone poof. That, too, if possible, I would like to stay. I'm not entirely sure which file it is, I haven't been able to find it, but in the CSS it was referred to as "rays", I assume it might be a PNG file or CSS effect.
</blockquote>

The rays overlay effect is there. Its just not visible because of your transparent background

<blockquote>3) The blur effect, which I talked about in my original post, is not implemented in this idea. Again, if possible (or perhaps tell me a workaround?) I would like the background behind the header to be blurred.</blockquote>

I think you cannot blur backgrounds. You can blur only the texts

Giri comments:

If you were talking about the background like the one used in this fiddle

http://jsfiddle.net/calder12/Yr2zD/

then I think you cannot achieve the effect using webkit blur. Because that fiddle using an empty div container to hold the background. They defined the width and height too. So that container looks empty. PS: They used absolute positioning method to overlap the div containers.

Your site uses background image in the body. So if you use webkit blur to blur that background, then your whole site content will be blurred.

Giri comments:

<strong>html</strong>

Edit header.php file..

Near 70th line you will see this code

<div class="rays">



Add an empty div below that line to hold our blurred-bg

<div class="blurred-bg"></div>



Add this css

#header .rays {
position: relative;
}
.blurred-bg {
position: absolute;
background-image: url(http://novelconcept.org/wp-content/uploads/2013/06/Beautiful-Inspirational-Nature-1200x16001.jpg) !important;
background-position: left top !important;
background-repeat: no-repeat !important;
-webkit-filter: blur(5px);
width: 100%;
height: 100%;
}
.logo img,.logo img a {
-webkit-filter: blur(0px) !important;
}

philipzeplin comments:

Thank you for your replies!

Yes, it was the fiddle effect I was after. That's too bad!
Would it be possible to add in a "second" background image, that would be fixed to always fit with the main background, that would be a pre-blurred image, that would only show up behind the header? I realize that's beyond what I asked for in this, so I'll gladly open up another "ticket" for it, I'm just curious if it would be possible.

Also, the last fix you posted doesn't seem to work. In case I was being crazy, and just not seeing a transparent png, I tried adding in various other jpegs and png's, but none of them seemed to show up.

Giri comments:

Are you sure you added the code I've given? Because i'm not seeing that code in your website.

http://novelconcept.org/?custom-css=1&csblog=1&cscache=6&csrev=6

And yes... Instead of depending on blurred effect, you could use a fixed blurred background image. Its the only cross browser compatible way too.

Yes you could open another ticket or if you would like to hire me you can send me a message from my profile.

philipzeplin comments:

Hey, sorry about that! I was writing my reply, while you were posting the extra message, so I missed that! Sorry about that!

The blur effect works wonderfully! JUST what I was looking for! Thank you! Absolutely awesome!

But the png file still isn't showing up. I've replaced the code to a link with a png file with a solid background, so that I could easily check if it's there or not (http://novelconcept.org/wp-content/uploads/2013/06/custom_header_4.png), but it's still not showing up.

That's the only issue I have with the current code - the png file isn't showing. A wild guess would be that it was turned off because of some other transparency change?

Giri comments:

In my second reply, I've given code like this..

#wrapper {
background: transparent !important;
}

#header .header-holder {
background: transparent !important;
}

#main {
background: #F4F4F2 url(images/_global/bg-div-main.jpg) 0 0 repeat-x;
}

Just modify it a little bit like this

#wrapper {
background: transparent !important;
}

#header .header-holder {
background: url(http://novelconcept.org/wp-content/uploads/2013/06/custom_header_4.png) 0 0 repeat-x !important;
}

#main {
background: #F4F4F2 url(images/_global/bg-div-main.jpg) 0 0 repeat-x;
}

philipzeplin comments:

Still not showing up I'm afraid. I checked in both Chrome and Explorer, incase there were some cookie issues, but still nothing.
My current end code, in the style.css, looks like this:

#wrapper {

background: transparent !important;

}



#header .header-holder {

background: url(http://novelconcept.org/wp-content/uploads/2013/06/custom_header_4.png) 0 0 repeat-x !important;

}



#main {

background: #F4F4F2 url(images/_global/bg-div-main.jpg) 0 0 repeat-x;

}

#header .header-holder {

background: url(http://novelconcept.org/wp-content/uploads/2013/06/custom_header_4.png) 0 0 repeat-x !important;

}

#header .rays {

position: relative;

}

.blurred-bg {

position: absolute;

background-image: url(http://novelconcept.org/wp-content/uploads/2013/06/Beautiful-Inspirational-Nature-1200x16001.jpg) !important;

background-position: left top !important;

background-repeat: no-repeat !important;

-webkit-filter: blur(5px);

width: 100%;

height: 100%;

}

.logo img,.logo img a {

-webkit-filter: blur(0px) !important;

}

Something I'm doing wrong?
I also double checked that the file to the png file is indeed correct, which it is.

Giri comments:

Hello there, Sorry I slept yesterday.

Yes your custom_header_4.png is visible now. It is visible as blurred white border in your header box

You can test it like this.

In chrome

1) press ctrl + shift + I
2) Expand the following div boxes

<div id="tt-boxed-layout">
<div id="wrapper">
<div id="header">


Now click on

<div id="header-holder">

Now check the right side stylesheet box.


Uncheck the following rules

style.css:2841

#header .header-holder {
background: url(http://novelconcept.org/wp-content/uploads/2013/06/custom_header_4.png) 0 0 repeat-x !important;
}

if you uncheck the above rules then the following rule will be used. But itsthe same as our previous rule. So uncheck this too

style.css:2827
#header .header-holder {
background: url(http://novelconcept.org/wp-content/uploads/2013/06/custom_header_4.png) 0 0 repeat-x !important;
}


unchecking above rule will enable the following rule. uncheck that too

karma-sky-blue.css:6
#header .header-holder {
background: #0078AF url(../images/skins/karma-sky-blue/bg-header-holder.jpg) 0 0 repeat-x !important;
}