css animations [solved] Why Css-transitions dont work in PW ? but on local file do work

[picarica]

so i just downloaded this template  and i uploaded it to my server made some .php changes so it would work and stuff but all the css-transitions or css-animations don't work. they just stop

if you checked out the template all those buttons are smooth and really nice, bit when you check out my site all those animations are gone, why is that? is there some option i have to toggle? or is it normal? how do i fix it ?

[rick]

Hello @picarica and welcome to the forum.

View the page source of your site and you will see a couple if issues.

When you say you made php changes so it would work, what changes did you make? Are you sure you have the correct CSS files referenced in your header? Javascript files?

You should not have any issues applying a 3rd party theme to processwire. It is actually fairly simple once you have your structure set up. Have you followed any of the tutorials for your site structure?

If you are still having problems, then please post back here. We will need more information so we can better answer your questions.

[dragan]

9 minutes ago, picarica said:

but all the css-transitions or css-animations don't work.

ProcessWire doesn't care about any of your frontend-assets. It's your job as a developer to put it all together and get the expected output.

Looking at your site, I noticed that all JS references are wrong, i.e. the paths to your Javascript files are incorrect and therefore don't load.

My guess is that some of these "CSS animations" aren't pure CSS animations, but actually triggered by those (missing) JS files.

Adjust your CSS + JS paths, and put them somewhere in site/templates/ and it will work as expected. You can use pre-configured paths like $config->paths->templates in your .php templates, which will also work regardless if you are developing on localhost or a remote server.

[picarica]

13 minutes ago, dragan said:

ProcessWire doesn't care about any of your frontend-assets. It's your job as a developer to put it all together and get the expected output.

Looking at your site, I noticed that all JS references are wrong, i.e. the paths to your Javascript files are incorrect and therefore don't load.

My guess is that some of these "CSS animations" aren't pure CSS animations, but actually triggered by those (missing) JS files.

Adjust your CSS + JS paths, and put them somewhere in site/templates/ and it will work as expected. You can use pre-configured paths like $config->paths->templates in your .php templates, which will also work regardless if you are developing on localhost or a remote server.

Sorry for this amaterus mistake , you were right i totally forgot about those JS paths, i changed those css paths by adding "<?=$config->urls->templates;?>" before the path and css worked but i forgot to add it to those scripts too, sorry for making this thread i'll close it now

15 minutes ago, rick said:

Hello @picarica and welcome to the forum.

View the page source of your site and you will see a couple if issues.

When you say you made php changes so it would work, what changes did you make? Are you sure you have the correct CSS files referenced in your header? Javascript files?

You should not have any issues applying a 3rd party theme to processwire. It is actually fairly simple once you have your structure set up. Have you followed any of the tutorials for your site structure?

If you are still having problems, then please post back here. We will need more information so we can better answer your questions.

hello by php changes i just splitted header, footer, body and sub-page to it's own .php files and including footer.php and header.php  in home.php and sub-page.php,  i also tried adding image fields but so far without a succsess. thanks for fast replies

[picarica]

uhhh sorry again but how do i close/delete this thread if solved ?

[rick]

Hey, we all make simple mistakes at times. No worries though. There are many members here that will gladly help you get your site up and running.

 

[edit]

You can edit your original post and add [Closed] to the subject line.