Customising Spinner

  • Resolved hebhansen

    (@hebhansen)


    3 weeks, 2 days ago

    Hi Mikko

    I messing around with the spinner, cause it’s not the coolest I have seen…. So I came across some snippets that should deactivate styles of your spinner. More specifically:

    Position Results

    add_filter( 'relevanssi_live_search_base_styles', '__return_false' );

    and then this that is totally unclear to me:

    add_action(
      'wp_enqueueu_scripts', 
      function() {
        wp_dequeue_style( 'relevanssi-live-search' );
      },
      99
    );

    I tried adding the latter only to functions.php but I see no change….

    I am trying to go here…. the Html Structure where loader is the class:

    <span class="loader"></span>

    And the css goes like so:

    .loader {
            transform: rotateZ(45deg);
            perspective: 1000px;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            color: #fff;
          }
            .loader:before,
            .loader:after {
              content: '';
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: inherit;
              height: inherit;
              border-radius: 50%;
              transform: rotateX(70deg);
              animation: 1s spin linear infinite;
            }
            .loader:after {
              color: #FF3D00;
              transform: rotateY(70deg);
              animation-delay: .4s;
            }

          @keyframes rotate {
            0% {
              transform: translate(-50%, -50%) rotateZ(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotateZ(360deg);
            }
          }

          @keyframes rotateccw {
            0% {
              transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotate(-360deg);
            }
          }

          @keyframes spin {
            0%,
            100% {
              box-shadow: .2em 0px 0 0px currentcolor;
            }
            12% {
              box-shadow: .2em .2em 0 0 currentcolor;
            }
            25% {
              box-shadow: 0 .2em 0 0px currentcolor;
            }
            37% {
              box-shadow: -.2em .2em 0 0 currentcolor;
            }
            50% {
              box-shadow: -.2em 0 0 0 currentcolor;
            }
            62% {
              box-shadow: -.2em -.2em 0 0 currentcolor;
            }
            75% {
              box-shadow: 0px -.2em 0 0 currentcolor;
            }
            87% {
              box-shadow: .2em -.2em 0 0 currentcolor;
            }
          }

    I tried replacing “.loader” with “.rlv-has-spinner” and then I see a freaky combination of the two where your spinner is still dominating the show. So how can I achieve this?

    On my site in main menu > search, I trigger SearchWP Modal. And there the java thing trigger when searching. You are welcome to give it a try. “Art” or “Artist” will yield a number of hits. I hope this is possible.

    Thx

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter hebhansen

    (@hebhansen)

    Row 9 center you can see the spinner I am tring to add

    Plugin Author Mikko Saari

    (@msaari)

    There’s a typo in the action hook name: it should be wp_enqueue_scripts instead of wp_enqueueu_scripts. Once you fix that, you’ll see a lot of the Live Ajax Search base styles disappear, including the spinner.

    You probably want to return most of them, so check the file /assets/styles/style.css in Relevanssi Live Ajax Search to see what you’re removing and add the ones you need to your theme style.css.

    Thread Starter hebhansen

    (@hebhansen)

    Typo is a copy paste from here, so you have the typo in your docs. I have removed the snippet again cause that was not what I was looking for.

    Thx…

    1. You have this in css:
    @keyframes loader-rotate {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }

    Where I have: @keyframes rotate. Do I change “rotate” to “loader-rotate”? I mean is this a div you call, that you have set in html, or is it a variable defined in CSS?

    Further keyframes I have are:

    @keyframes rotateccw

    @keyframes spin

    Again do I rename or will they work out of the box?

    2. You have a defined background of blue for the spinner. I do not have a background in my css but adding it to overwrite Relevanssi results in solid blocks displaying. Using transparent everything goes away and there is no spinner. Adding another colour and the issue persists. How can I fix this?

          background: red; /* Overwrite Relevanssi - was blue */
    Plugin Author Mikko Saari

    (@msaari)

    Yes, I’ve fixed the documentation.

    In .rlv_has_spinner, there’s animation: loader-rotate 1s linear infinite;. This makes the spinner use the animation loader-rotate, which is defined with the keyframes. If your animation is called rotate, you need to change it to animation: rotate 1s linear infinite; so that these match.

    Your code doesn’t seem to use the rotate and rotateccw animations, but it uses the spin here: animation: 1s spin linear infinite;.

    The default spinner colour comes from border parameters. The background is only for the small ball that makes the spinner head rounded. The background color is only on the .rlv-has-spinner::after element.

    Thread Starter hebhansen

    (@hebhansen)

    I am stuck again. Blue circle flimpses and freeze. This is what I have so far and the border thing I don’t understand. How should I set border values for it to allow the other spinner to show:

    .rlv-has-spinner {
    		position: relative; /* Relevanssi use a relative - Inherited */
    		margin: 1em auto; /* Relevanssi - Inherited */
            transform: rotateZ(45deg);
            perspective: 1000px;
    		border: 0px; /* Overwrite Relevanssi */
    		border-color: var(--wp--preset--color--accent-3);
    		border-right-color: red;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            color: #fff;
          }
            .rlv-has-spinner:before,
            .rlv-has-spinner:after {
              content: "";
              display: block;
              position: absolute;
              top: 0; /* Relevanssi - -1px */
              left: 0; /* Relevanssi - 33px */
              width: inherit; /* Relevanssi - 8px*/
              height: inherit; /* Relevanssi - 8px*/
              border-radius: 50%;
              transform: rotateX(70deg);
              animation: 1s spin linear infinite;
            }
            .rlv-has-spinner:after {
              color: #FF3D00;
    		 /* background-color: red; /* Overwrite Relevanssi - was blue */
    			
              transform: rotateY(70deg);
              animation-delay: .4s;
            }
    /*
          @keyframes rotate {
            0% {
              transform: translate(-50%, -50%) rotateZ(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotateZ(360deg);
            }
          }

          @keyframes rotateccw {
            0% {
              transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotate(-360deg);
            }
          }
    */
          @keyframes spin {
            0%,
            100% {
              box-shadow: .2em 0px 0 0px currentcolor;
            }
            12% {
              box-shadow: .2em .2em 0 0 currentcolor;
            }
            25% {
              box-shadow: 0 .2em 0 0px currentcolor;
            }
            37% {
              box-shadow: -.2em .2em 0 0 currentcolor;
            }
            50% {
              box-shadow: -.2em 0 0 0 currentcolor;
            }
            62% {
              box-shadow: -.2em -.2em 0 0 currentcolor;
            }
            75% {
              box-shadow: 0px -.2em 0 0 currentcolor;
            }
            87% {
              box-shadow: .2em -.2em 0 0 currentcolor;
            }
          }
    Plugin Author Mikko Saari

    (@msaari)

    Is there a reason why you don’t remove the default spinner CSS code completely? Trying to override it like this is going to be hard. It would be much easier to remove the default spinner and then add a new one.

    Thread Starter hebhansen

    (@hebhansen)

    remove default spinner css? From within plugin? That’s overwritten when you update. Or what do you mean?

    Plugin Author Mikko Saari

    (@msaari)

    With this:

    add_action(
      'wp_enqueue_scripts', 
      function() {
        wp_dequeue_style( 'relevanssi-live-search' );
      },
      99
    );

    This filter function removes the default CSS, including the spinner. You can then restore the necessary parts of the rest of the CSS in your theme style sheet:

    /* visual styles */
    .relevanssi-live-search-results {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      background: #fff;
      -webkit-box-shadow: 0 0 2px 0 rgba(30, 30, 30, 0.4);
      box-shadow: 0 0 2px 0 rgba(30, 30, 30, 0.4);
      border-radius: 3px;
      width: 315px;
      min-height: 175px;
      max-height: 300px;
    }

    .relevanssi-live-search-result p,
    .relevanssi-live-search-result-status p {
      font-size: 0.9em;
      padding: 1em;
      margin: 0;
      border-bottom: 1px solid rgba(30, 30, 30, 0.1);
    }

    .relevanssi-live-search-result-status p {
      font-size: 0.8em;
      padding: 0 1em;
    }

    .relevanssi-live-search-result--focused {
      background: #ddd;
    }

    .relevanssi-live-search-result--focused a {
      color: #000;
    }

    .relevanssi-live-search-result:last-of-type p {
      border-bottom: 0;
    }

    .relevanssi-live-search-result a {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Bullet proof Screen Reader Only text */
    .relevanssi-live-search-instructions {
      border: 0 !important;
      clip: rect(1px, 1px, 1px, 1px) !important;
      -webkit-clip-path: inset(50%) !important;
      clip-path: inset(50%) !important;
      height: 1px !important;
      overflow: hidden !important;
      padding: 0 !important;
      position: absolute !important;
      width: 1px !important;
      white-space: nowrap !important;
    }
    Thread Starter hebhansen

    (@hebhansen)

    Ok, so status is:

    1. I thought you meant overwrite template. So I moved the two templates into theme and made minor changes to the php. This seems to work and I am aware it has nothing to do with spinner…
    2. I added the snippet above and cut off plugin css
    3. I have added css to my custom stuff. After a bit of fiddling, things seems to work as intended.
    4. I cleaned up the spinner css as best I can. I suspect the html is the only issue now, since nothing shows for the spinner
    5. Original html from spinner: <span class=”loader”></span>
    6. Loader is replaced with rlv-has-spinner in my css

    So how can I get the span into Relevanssi Ajax? is rlv-has-spinner the correct class to call? Do I somehow insert loader instead? How and where?

    I see this html structure in your code but no span

    Plugin Author Mikko Saari

    (@msaari)

    The span isn’t important. You can use the existing HTML structure. You just need to replace the loader class name in your spinner code with rlv-has-spinner: that’s the element where the spinner goes.

    So, you should have:

    .rlv-has-spinner {
            transform: rotateZ(45deg);
            perspective: 1000px;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            color: #fff;
          }
            .loader:before,
            .loader:after {
              content: '';
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: inherit;
              height: inherit;
              border-radius: 50%;
              transform: rotateX(70deg);
              animation: 1s spin linear infinite;
            }
            .loader:after {
              color: #FF3D00;
              transform: rotateY(70deg);
              animation-delay: .4s;
            }

          @keyframes rotate {
            0% {
              transform: translate(-50%, -50%) rotateZ(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotateZ(360deg);
            }
          }

          @keyframes rotateccw {
            0% {
              transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotate(-360deg);
            }
          }

          @keyframes spin {
            0%,
            100% {
              box-shadow: .2em 0px 0 0px currentcolor;
            }
            12% {
              box-shadow: .2em .2em 0 0 currentcolor;
            }
            25% {
              box-shadow: 0 .2em 0 0px currentcolor;
            }
            37% {
              box-shadow: -.2em .2em 0 0 currentcolor;
            }
            50% {
              box-shadow: -.2em 0 0 0 currentcolor;
            }
            62% {
              box-shadow: -.2em -.2em 0 0 currentcolor;
            }
            75% {
              box-shadow: 0px -.2em 0 0 currentcolor;
            }
            87% {
              box-shadow: .2em -.2em 0 0 currentcolor;
            }
          }

    That is all I needed to make this work on my test site: this CSS code and disabling the default spinner.

    Thread Starter hebhansen

    (@hebhansen)

    Not working. Spinner container shows until matches show. The spinner is not there.

    In your code above you have .loader at :before, :after and further down :after again, so I am getting confused here.

    I have copy pasted code above. Spinner does not show

    I have tested own adaptation. Spinner does not show

    So exact same pattern.

    My code below:

    /******** Search Relevanssi - Spinner Animation while waiting ********/
    .rlv-has-spinner {
    		/*position: relative; /* Relevanssi use a relative - Inherited */
    		/*margin: 1em auto; /* Relevanssi - Inherited */
            transform: rotateZ(45deg);
            perspective: 1000px;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            color: #fff;
          }
            .rlv-has-spinner:before,
            .rlv-has-spinner:after {
              content: '';
              display: block;
              position: absolute;
              top: -1px; /* Relevanssi -1px */
              left: 33px; /* Relevanssi 33px */
              width: inherit; /* Relevanssi 8px*/
              height: inherit; /* Relevanssi 8px*/
              border-radius: 50%;
              transform: rotateX(70deg);
              animation: spin 1s linear infinite;
            }
            .rlv-has-spinner:after {
              color: #FF3D00;
              transform: rotateY(70deg);
              animation-delay: .4s;
            }

          @keyframes rotate {
            0% {
              transform: translate(-50%, -50%) rotateZ(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotateZ(360deg);
            }
          }

          @keyframes rotateccw {
            0% {
              transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
              transform: translate(-50%, -50%) rotate(-360deg);
            }
          }

          @keyframes spin {
            0%,
            100% {
              box-shadow: .2em 0px 0 0px currentcolor;
            }
            12% {
              box-shadow: .2em .2em 0 0 currentcolor;
            }
            25% {
              box-shadow: 0 .2em 0 0px currentcolor;
            }
            37% {
              box-shadow: -.2em .2em 0 0 currentcolor;
            }
            50% {
              box-shadow: -.2em 0 0 0 currentcolor;
            }
            62% {
              box-shadow: -.2em -.2em 0 0 currentcolor;
            }
            75% {
              box-shadow: 0px -.2em 0 0 currentcolor;
            }
            87% {
              box-shadow: .2em -.2em 0 0 currentcolor;
            }
          }
    Plugin Author Mikko Saari

    (@msaari)

    Ah, yes. Of course. This is the correct version.

    .rlv-has-spinner {
    	transform: rotateZ(45deg);
    	perspective: 1000px;
    	border-radius: 50%;
    	width: 48px;
    	height: 48px;
    	color: #fff;
      }
    	.rlv-has-spinner:before,
    	.rlv-has-spinner:after {
    	  content: '';
    	  display: block;
    	  position: absolute;
    	  top: 0;
    	  left: 0;
    	  width: inherit;
    	  height: inherit;
    	  border-radius: 50%;
    	  transform: rotateX(70deg);
    	  animation: 1s spin linear infinite;
    	}
    	.rlv-has-spinner:after {
    	  color: #FF3D00;
    	  transform: rotateY(70deg);
    	  animation-delay: .4s;
    	}

      @keyframes rotate {
    	0% {
    	  transform: translate(-50%, -50%) rotateZ(0deg);
    	}
    	100% {
    	  transform: translate(-50%, -50%) rotateZ(360deg);
    	}
      }

      @keyframes rotateccw {
    	0% {
    	  transform: translate(-50%, -50%) rotate(0deg);
    	}
    	100% {
    	  transform: translate(-50%, -50%) rotate(-360deg);
    	}
      }

      @keyframes spin {
    	0%,
    	100% {
    	  box-shadow: .2em 0px 0 0px currentcolor;
    	}
    	12% {
    	  box-shadow: .2em .2em 0 0 currentcolor;
    	}
    	25% {
    	  box-shadow: 0 .2em 0 0px currentcolor;
    	}
    	37% {
    	  box-shadow: -.2em .2em 0 0 currentcolor;
    	}
    	50% {
    	  box-shadow: -.2em 0 0 0 currentcolor;
    	}
    	62% {
    	  box-shadow: -.2em -.2em 0 0 currentcolor;
    	}
    	75% {
    	  box-shadow: 0px -.2em 0 0 currentcolor;
    	}
    	87% {
    	  box-shadow: .2em -.2em 0 0 currentcolor;
    	}
      }

    This works for me. If this doesn’t work on your site, then I’m afraid I can’t help you further with this. Since this isn’t really a Relevanssi Live Ajax Search issue at this point, some forum where general CSS issues can be discussed is probably a better place to continue.

    Thread Starter hebhansen

    (@hebhansen)

    Thx Mikko

    I appreciate it. I copy pasted your code. Does not work. I turned off SearchWP Modal. Still does not work. I copy pasted the source code again from the spinner site. Does not work. I took another spinner and added rlv classes and it does work out of the box. I guess that spinner has a conflict with something on my site, while other spinners seems to work incl. the one in your plugin….

    One obeservation that may be a bug somewhere. When I search the word “Art” and hit enter on my site my admin menu screws up like so. Apparently this is the only search word that does this…. Might be reolved after a bit of purges of cache. I will not dive into this, but now you know.

    So thx. I mark as solved. All the best, love Relevanssi and have a great weekend.

    • This reply was modified 2 weeks, 6 days ago by hebhansen.
Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.