Use animated background as header in Chameleon 4.1.x?

[AntiMetaman]

Hello,

I'm using the latest version of Chameleon for 4.1.16. My header looks like this:

I want to use an animated background like in the Animate theme like this:

 

This question was asked a long time ago here: 

 but the code is outdated now and I was wondering if someone could give an updated one.

Edited November 18, 2016 by AntiMetaman

[titcrunch]

with just css is easy look this tutorial for a image :

https://davidwalsh.name/background-animation-css
 

 

 

Edited November 19, 2016 by titcrunch

[hypr]

How did you even get chameleon working? I can't even upload a theme to my forum..

[AntiMetaman]

 

1 hour ago, hypr said:

How did you even get chameleon working? I can't even upload a theme to my forum..

What version of IPB are you using? If you go the latest nulled version, it should work fine.

Edited November 18, 2016 by AntiMetaman

[hypr]

1 hour ago, AntiMetaman said:

 

What version of IPB are you using? If you go the latest nulled version, it should work fine.

Is this the one you're using together with this theme?

 

EDIT: Thankfully I can upload themes with the forum version, but that theme seems outdated, it's not the one you screenshotted. Can you link in?

Edited November 18, 2016 by hypr

[Luca Munich]

I don't recommend you to use this customization. Your forums can stay very slow with this.

[AntiMetaman]

6 hours ago, titcrunch said:

with just css is easy look this tutorial for a image :

https://davidwalsh.name/background-animation-css

Thanks. That actually helps a lot. I just put that into custom.css and then added the header code into globalTemplate and it worked. Unfortunately it is in the background  so the black header that comes with Chamleleon 4.1 still shows on top of it. I now need to figure out how to make the header background transparent so I can show the animated background behind it. Any idea on how to do that? It seems I can't simply type 'transparent' in the background color for the theme. It will only take a hex code for color.

Edited November 19, 2016 by AntiMetaman

[titcrunch]

send me the link of your board i will send you the correct code for this

[AntiMetaman]

4 hours ago, titcrunch said:

send me the link of your board i will send you the correct code for this

I was going to pm it to you but it seems you have that blocked. I was able to make it transparent by just adding this to the custom.css: #header{ background: none !important; }

However, I've run into new problems shown here: 

I want to eliminate the horizontal bar at the very bottom and reduce the space between the text logo and navigation menu.

Edited November 19, 2016 by AntiMetaman

[titcrunch]

i have send you a pm but my pm are not blocked

[titcrunch]

for the bar is a shadow on header so add this in your custom css :
 

#header {
    box-shadow: 0px !important;
}

for the space : your menu is right align and logo is left align, so add this too in yoru custom css :

 

.ipsNavBar_primary {
    text-align: left !important;
    padding-left: 20px;
}

change the 20px by what you want

[AntiMetaman]

21 hours ago, titcrunch said:

for the bar is a shadow on header so add this in your custom css :
 

#header {
    box-shadow: 0px !important;
}

for the space : your menu is right align and logo is left align, so add this too in yoru custom css :

 

.ipsNavBar_primary {
    text-align: left !important;
    padding-left: 20px;
}

change the 20px by what you want

Moving the menu to the left worked. The box shadow still remains unfortunately. Been trying to get rid of that for a while. I'm not even sure if that's the box shadow though.

 

Edit: I  figured it out. There was a 10x padding in the animated background code. I changed it to 0px and now it's gone. Thanks for all the help. This thread can be closed now.

Edited November 20, 2016 by AntiMetaman

[titcrunch]

your welcome

[James]

The question(s) in this support topic have been answered and the topic author has resolved their issue. This topic is now closed. If you have other questions, please open a new topic.