Okay
  Public Ticket #3116325
quiz and next button in WPLMS 4.4
Closed

Comments

  •  12
    MeesterGijs started the conversation

    Hello,

    In this ticket you gave me code to adjust this button, with this string: a.start_quiz.button.full.is-primary

     How can I align the button in the center?

    How can I get the button underneath to change? I want it #88deb4 with #fff font color and on hover {background: #fff !important;color: #88deb4 !important;border: 2px solid #88deb4 !important;}

    Thanks

  • [deleted] replied

    add this code in your wplms-customizer.php file in wplms customizer plugin : 


    a.start_quiz.button.full.is-primary:hover{background: #fff !important;color: #88deb4 !important;border: 2px solid #88deb4 !important;width:calc(100% + 2rem) !important;margin:0 -1rem;}
    a.start_quiz.button.full.is-primary{background: #88deb4 !important;color: #ffffff !important;border: 2px solid #88deb4 !important;width:calc(100% + 2rem) !important;margin:0 -1rem;}


  •  12
    MeesterGijs replied

    Thanks Alex. Unfortunatelly it shows an error: https://imgur.com/a/LLYMYdl

    And when I put it in custom css it doesn't change this button or center the other.

  • [deleted] replied

    Im sorry the wrong code is given : 


    Please try adding this custom css in your wp-admin-> appearance-> customize -> custom css : 


    a.start_quiz.button.full.is-primary:hover{background: #fff !important;color: #88deb4 !important;border: 2px solid #88deb4 !important;width:calc(100% + 2rem) !important;margin:0 -1rem;}
    a.start_quiz.button.full.is-primary{background: #88deb4 !important;color: #ffffff !important;border: 2px solid #88deb4 !important;width:calc(100% + 2rem) !important;margin:0 -1rem;}

  •  12
    MeesterGijs replied

    The code I have works for the yellow button. But how do I center that button? So that it's not on the left, but in the middel?

    And what is the code (this isn't it: .course_status .course_content .course_content_content_wrapper .next_curriculum_item) code I need to do the same for the button underneath? See this image.

    This code works.

    /* IN QUIZ course button */
    a.start_quiz.button.full.is-primary{
    color: #3f3f3f !important;
    font-size: 18px !important; 
    font-weight: 500 !important;
    background: #ffd700 !important;
    border: 2px solid #ffd700 !important; 
    padding: 2em .1em!important; 
    width:40% !important;}

    a.start_quiz.button.full.is-primary:hover{
    color: #3f3f3f !important;
    font-size: 18px !important; 
    font-weight: 500 !important;
    background: #ffd700 !important;
    border: 2px solid #ffd700 !important; 
    padding: 2em .1em!important; 
    width:40% !important;}


  • [deleted] replied

    https://prnt.sc/MlKnWzxKn7Hv


    button width can also be over write by css code given her e: https://vibethemes.ticksy.com/ticket/3116325/#comment-16708650

  •  12
    MeesterGijs replied

    1. Changing that to roboto didn't work. And I also thought that roboto was my standard font, why doesn't it show then?


    2. Oh, but of course I deleted that code. I only have this active:

    /* IN QUIZ course button */
    a.start_quiz.button.full.is-primary{
    color: #3f3f3f !important;
    font-size: 18px !important; 
    font-weight: 500 !important;
    background: #ffd700 !important;
    border: 2px solid #ffd700 !important; 
    padding: 2em .1em!important; 
    width:40% !important;}

    a.start_quiz.button.full.is-primary:hover{
    color: #3f3f3f !important;
    font-size: 18px !important; 
    font-weight: 500 !important;
    background: #ffd700 !important;
    border: 2px solid #ffd700 !important; 
    padding: 2em .1em!important; 
    width:40% !important;}

    Could you log and have a look?


  • [deleted] replied

    1 .working for me : https://prnt.sc/JDVN16Zl3D1B


    2 . added this css  : https://prnt.sc/iwfDYAUerZ7S


  •   [deleted] replied privately
  •  12
    MeesterGijs replied

    Font is working, you're right. Thanks!

    I'm talking about the bottom button, this one.