Jump to content
picarica

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

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites
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.

  • Like 2

Share this post


Link to post
Share on other sites
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

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Greg Lumley
      Hi! In busy learning to know PW better I'm looking at existing code.
      I have Bitpoets Editorial Responsive Blog as example. While looking through the code I've just found this line in the blog-head.php 
      <link rel="stylesheet" href="<?= $config->urls->templates ?>assets/css/main.css?ts=<?= time() ?>" /> I hope it's not a stupid question but I've never seen this before...
      main.css?ts=<?= time() ?> I notice the main template is empty but of course renders on the front end.
      Using a timestamp really has me totally confused. Can someone explain it to me please. 
      Thank you! 
      Greg
    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By rafaoski
      This profile can be used as a simple business card or blog.
      The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.
      To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).
      With include functions like:
      MarkupRegions
      FunctionsAPI
      CAN DOWNLOAD FROM THIS LINK:
      https://github.com/rafaoski/site-grayscale-pw
      https://github.com/rafaoski/site-min-grayscale-pw
      Screenshot:

       
    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Requires the latest version processwire 3.0.101 !!!
      Milligram Site Profile For Processwire 3x with include functions like:
      MarkupRegions
      FunctionsAPI
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
       
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )
      https://github.com/rafaoski/site-milligram
      https://github.com/rafaoski/site-milligram-blog
      Screenshot:

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      Node.js
      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      References:
      Milligram
      Gridlex
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
      Particles.js
       
       
       
       
×
×
  • Create New...