Ask your WordPress questions! Pay money and get answers fast! (more info)

Changing the Header of the "Karma" Theme WordPress

  • SOLVED

Hi,

I’m trying to modify the header of the Karma theme on WordPress, but my CSS knowledge seems to be a bit too small for this. I’ve looked at various help files, but have found nothing similar.

What I’m trying to do:
In the header, I have used a semi-transparent PNG file. Behind this PNG file, I would like the page background to show up. Furthermore, I would like the background behind the header area to be blurred. The end result would be a "windows vista aero" type header. I wanted to achieve this using the following code (but have no issues if other solutions would fit better):

-webkit-filter: blur(5px);

I have tried doing these changes both within the theme, as well as changing the CSS styles associated with a theme colour style, but so far, without luck. The end result was either a grey background, or the original theme colour background.

You can see the site here:
www.novelconcept.org

The karma theme I'm referring to, is on themeforest, simply called "Karma".

Best regards,
Philip Zeplin

Answers (4)

2013-06-11

Giri answers:

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


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;
}

2013-06-11

Kyle answers:

Do you want the effect behind the entire header or just your image?


philipzeplin comments:

Well, the image is as big as the header (well, the image file is about 2 pixels wide, but placed continually to fill out the header), so theoretically they are one and the same.

Nonetheless, I wanted the effect behind the entire header, giving sort of a "glass" look to the header.


Kyle comments:

Ah, I see. And is it the sky background you want the effect over? or the dark grey background seen there?


philipzeplin comments:

The sky background. One of the big issues is that I can't seem to get rid of the dark grey background!


Kyle comments:

Viruthagiri is heading in the right direction then. I think he is pretty close. I'll step aside unless he gets stuck

2013-06-11

isp_charlie answers:

style.css
line 164 change to:
#wrapper {
width: 100%;
display: table;
}


line 192 change to:
#main {
background: #F4F4F2 url(images/_global/bg-div-main.jpg) 0 0 repeat-x;
display: table-footer-group;
position: relative;
width: 100%;
}


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


isp_charlie comments:

pls try my suggest, it work for you

style.css
line 164 change to:
#wrapper {
width: 100%;
display: table;
}



line 192 change to:
#main {
background: #F4F4F2 url(images/_global/bg-div-main.jpg) 0 0 repeat-x;
display: table-footer-group;
position: relative;
width: 100%;
}


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


philipzeplin comments:

Hi, thanks for the reply! From what I can tell from looking at the code, the blur effect has not been implemented, is that correct?


isp_charlie comments:

for blur effect, when blur effect has been implemented on header, it also affect to menu and logo, so my solutions for you is:
put a emptry <div class="css3-gaussian-blur"></div> to header inside <div class="rays"> and put css like bellow:

<div id="header">
<div class="header-holder">
<div class="rays">
<div class="css3-gaussian-blur"></div>
<div class="header-area">...


line 138 style.css
#header .rays {
position: relative;
background: url(images/_global/rays.png) 50% 0 no-repeat;
}

add this bellow
.css3-gaussian-blur {
width: 100%;
height: 100%;
position: absolute;
-webkit-filter: blur(6px) !important;
background: url(http://novelconcept.org/wp-content/uploads/2013/06/Beautiful-Inspirational-Nature-1200x16001.jpg) center 0;
}


isp_charlie comments:

hi how about my suggest?, pls try it, suggets two.

2013-06-11

Arnav Joy answers:

can you show a mockup , how you want it?