unwanted arrows

  • Resolved Andrew Leonard

    (@andrewleonard)


    5 years, 9 months ago

    if you look at this page, https://ebps.org.uk/test-recurring-payment/
    you can see I have added custom “arrows” according (I hope) to your instructions
    This is the code I put into style.css of my child theme:

    /* =Collapsomatic custom arrows (26/02/2019) starts here----------------------------------------------------------- */
.collapseomatic {
    background-image: url(plus.png) !important;
}
.colomat-close {
    background-image: url(minus.png) !important;
}
/* =Collapsomatic custom arrows (26/02/2019) ends here----------------------------------------------------------- */

    However on this page: https://ebps.org.uk/publications/the-fern-gazette/
    You can also see the arrows although I have coded:
    <div class="gazette-expander">[expand title="Fern Gazette Volume 20" trigclass="noarrow" rel="V20" id="V20" startwrap="<strong>" endwrap="</strong>" tartag="normal"]

    These arrows have only now appeared since I added my custom arrows

    Can you help me get rid of them for this page but keep them for the other page?

    Is it possible to use font-awsome icons for the arrows?
    They have some nice graphics

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author twinpictures

    (@twinpictures)

    change the css:

    .collapseomatic.fancy_pants {
    background-image: url(plus.png) !important;
}
.colomat-close.fancy_pants {
    background-image: url(minus.png) !important;
}

    and on the expand items that are to use the custom arrows add the trigclass: fancy_pants:

    [expand title="trigger" trigclass="fancy_pants"]this item will have custom arrows[/expand]

    Using Font-Awesome Icons for arrows:
    https://spacedonkey.de/2025/collapse-opro-matic-css-tricks-ii-font-awesome-arrows/

    • This reply was modified 5 years, 9 months ago by twinpictures. Reason: added font awesome link
    Thread Starter Andrew Leonard

    (@andrewleonard)

    Thank you
    That did it
    However I cannot get font-awsome to work
    see https://ebps.org.uk/test-recurring-payment/

    I have this code in my header:

    <!-- Start of Font Awsome Icons 20180921 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- End of Font Awsome Icons 20180921 -->

    I have this code in style.css:

    /* =Collapsomatic custom arrows (26/02/2019) starts here----------------------------------------------------------- */
.collapseomatic.fancy_pants {
    background-image: url(plus.png) !important; } .colomat-close.fancy_pants {
    background-image: url(minus.png) !important; }

.collapseomatic.awesomearrows {
    background-image: none;
}
.collapseomatic.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0ab";
}
.colomat-close.awesomearrows {
    background-image: none;
}
.colomat-close.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0aa";
}

/* =Collapsomatic custom arrows (26/02/2019) ends here----------------------------------------------------------- */

    and this code in the page:
    [expand title="UK Annual Recurring Subscription Rates" trigclass="awesomearrows" rel="UK" id="UK" startwrap="<strong>" endwrap="</strong>" tartag="normal"]

    I have also put in this code ion the page to prove I have font-awsome installed although I use a different stylesheet

    <i class="fa fa-arrow-circle-down"></i>
<i class="fa fa-arrow-circle-up"></i>

    What am I doing wrong?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘unwanted arrows’ is closed to new replies.

Tags