CSS Text Animation Effects Classes not active

Created on 27 July 2023, over 1 year ago
Updated 27 June 2024, 5 months ago

When applying available CSS Text Animation Effects Classes

I have tried creating a new page and clearing cache after applying any of the effects but there is no change, neither when "choosing the desired CSS text animation effects for the site name" nor when "choosing the desired CSS text animation effects for the page title".
This happens in two different sites I've tried.
Also, in one of the sites the "border animation for the top regions, bottom regions and footer regions" works correctly but on the other site it does not work at all...
Which would be the steps to follow in order to make these effects working? thanks for your great job.

💬 Support request
Status

Fixed

Version

2.0

Component

User interface

Created by

🇨🇱Chile Andrés Chandía

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Andrés Chandía
  • Assigned to flashwebcenter
  • 🇺🇸United States flashwebcenter Austin TX

    Hello,
    The css animation classes are built for a specific html structure. Ex, the CSS animation for the page title is:

    #page-title.animate-title-24 .page-title,
    #page-title.animate-title-24 .page-title span

    If you add the page title block in a different region, the css animation will not work.

    Also is the same with the border animation:

    #top-container .top-box>div.animate-border, 
    #bottom-container .bottom-box>div.animate-border, 
    #footer-container .footer-box>div.animate-border

    You maybe have the following:

    1. The page block/site name in a different region.
    2. There is a custom page template with custom html.
    3. There is some css override the default css.

    If you have a URL you can paste it here and I will take a look.

    Best wishes,
    Alaa

  • 🇨🇱Chile Andrés Chandía

    Thanks..
    On: https://www.chandia.net/
    The page title effect does not work

    On https://www.chandia.net/corlexim/
    Neither the Site name effect nor the page title effect work...
    In this site the region's border are not working neither.

    thanks again

  • 🇺🇸United States flashwebcenter Austin TX

    Hello,
    For the site https://www.chandia.net, go to https://www.chandia.net/admin/structure/block and login as an admin and move page title block from Content region to Page title region. As in the screenshot.

    For this site https://www.chandia.net/corlexim/, the css class (site-name-link) in the template your-site-root inside ../d8w3css/templates/block/block--system-branding-block.html.twig was removed. You have the css classes (w3-xxxlarge w3-padding). Just add the css class (site-name-link) to them.

    You can use the demo site for references.
    Best wishes,
    Alaa

  • 🇨🇱Chile Andrés Chandía

    Tanks a lot Alaa,
    all have worked, page title effect is working now in chandia.net

    In corlexim, I have found that I have another file:
    themes/d8w3css/block--drupal8_w3css_theme_branding.html.twig

    And I have realized that the following file was preventing all the effects to be active: themes/d8w3css/page.html.twig", so I replace it by the new version of the same file and that make it work.

    Thanks again for your awesome help!!

  • Status changed to Fixed over 1 year ago
  • 🇺🇸United States flashwebcenter Austin TX

    You are welcome!

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • Status changed to Fixed 5 months ago
  • 🇺🇸United States flashwebcenter Austin TX
Production build 0.71.5 2024