Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1396913

    I would like to make the difference between question and answer in the accordion more obvious.
    It may include background or text color or weight or possibly borders.
    Could you suggest the best way to go about this please?
    I’ve attached a relevant link in the private content.

    #1396923

    Hey John,

    Thank you for the inquiry.

    You can use this css code to adjust the style of the toggler.

    .main_color .toggler {
        background-color: red;
        color: blue;
    }
    

    To adjust the background color of the toggle content, add this css code.

    .main_color .toggle_content {
        background: orange;
    }
    

    Best regards,
    Ismael

    #1396932

    Great. Thank you.

    #1396942

    How about hover color for the question Ismael?

    #1397016

    Hi,

    Please try this CSS as well:

    .main_color .toggler.activeTitle:hover {
      background-color: red;
    }

    Best regards,
    Rikard

    #1397240

    …. and the + icon to the right of the question text please?
    Also, is there a better way to target the borders than I have done by using your selectors like:

    .main_color .toggle_content {
        background: #f7e5d4;
    border-bottom: solid 0.5px;
    }
    
    • This reply was modified 1 year, 2 months ago by mediaapps.
    • This reply was modified 1 year, 2 months ago by mediaapps.
    #1397298

    Hi,

    Please try this CSS as well:

    .toggle_icon span {
      border-color: red;
    }

    If your CSS is working as it should, then I don’t see any problem with using it.

    Best regards,
    Rikard

    #1397377

    One final request for the FAQs if poss ….
    I would like to style the question field so that it is different from the other other questions when the answer is visible. I realise that the + changes to a – but I would like to be able to show a more visible difference.

    #1397404

    Hi,

    That should be possible. Please add this css code to style the active toggler differently.

    .main_color p.toggler.activeTitle {
        background-color: orange;
        color: green;
        font-weight: bold;
        border-bottom: solid 0.5px;
    }
    
    .main_color p.toggler.activeTitle .toggle_icon span {
        border-color: white;
    }
    

    Best regards,
    Ismael

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.