CODEWITHSUNDEEP
vue.jsnuxt.jsintro.js
Imalsha Rathnaweera
Imalsha Rathnaweera

Reputation: 49

how to change the vue-intro.js css in nuxt.js

I'm trying to change the CSS feature vue-intro tutorial for my web app. I'm having trouble with how to change the tooltip button color, themes in vue-intro.js.
enter image description here

I want to change Next button color. so, how to change CSS in nuxt.js project.

I added the below code as a plugin. but I can't change the CSS

import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'


Vue.use(VueIntro)

Upvotes: 1

Views: 897

Answers (2)

Gian Arvin
Gian Arvin

Reputation: 11

I have done something similar before. I think the only way to do it is to overwrite the className or not import the intro.css (make your own). You need to "inspect element" to find out the introJS className from the library. Basically their className start with prefix introjs-something. I can even do things like display none for previous button or change its color. See picture below.

Click this to see My Inspect Element to find introjs classes

Upvotes: 1

tao
tao

Reputation: 90013

Here's an SCSS utility to generate the CSS for it:

$btn-color: #f50;
$text-color: white;

a.introjs-nextbutton {
  background-color: $btn-color;
  border-color: darken($btn-color, 4.2%);
  text-shadow: none;
  color: $text-color;
  &:hover {
    background-color: lighten($btn-color, 4.2%);
    border-color: $btn-color;
    color: $text-color;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem transparentize($btn-color, .42);
    background-color: $btn-color;
    border-color: darken($btn-color, 4.2%);
    color: $text-color;
  }
}

Upvotes: 1

Related Questions