Change icon color and page link question

  • Resolved The-Chair

    (@the-chair)


    2 years, 7 months ago

    Dear reader,

    Is it possible to change the icon color (see link) next to date, time, location ect.?
    Now the one from tags is in black, but I want it for all icons, so it is better to see on our background.

    Or is it possible to load here own icons with right color?

    Another thing I discovered is that when you navigate to a second (or higher) page below the items in the list the links stays the same (https://www.eendracht-colmschate.nl/agenda/). Normally this is with a page nummer (like: https://www.eendracht-colmschate.nl/agenda/?pno=2). Via DevTools I see the right link.

    Problem is that you almost see that the page is changing and not possible to link.

    This happens in Chrome and Firefox. Plugin version is 6.1.1.

    I hope you could help me with this two points.

    If you need more information, don’t hesitate to ask.

    Best regard,
    Dave

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

Viewing 5 replies - 1 through 5 (of 5 total)

  • I have exactly the same question on how to change the icon color. Any suggestions are highly appreciated!

    yes dark gray on black footer ??
    if these icons were at least inline svg, then you could work with fill – unfortunately they are available as data svg.

    I’ve noticed it is possible to override the icons by recreating them in your theme’s style.css file.

    They’re created using CSS variables like:

    .em {
    --icon-name: '';
    }

    A example would be icon-calendar-empty:

    .em {
    --icon-calendar-empty: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 512 512' fill='red'%3E%3Cg stroke='null'%3E%3Cpath d='M472 47.37289h-8V30.42374c0-14.01907-10.766-25.42373-24-25.42373s-24 11.40466-24 25.42373v16.94915H96V30.42374C96 16.40467 85.234 5.00001 72 5.00001S48 16.40467 48 30.42374v16.94915h-8c-22.056 0-40 19.00847-40 42.37288v372.88136c0 23.36441 17.944 42.37288 40 42.37288h432c22.056 0 40-19.00847 40-42.37288V89.74577c0-23.36441-17.944-42.37288-40-42.37288zm-40-16.94915c0-4.67267 3.589-8.47458 8-8.47458s8 3.80191 8 8.47458v25.4036c0 .00742-.001.01377-.001.02013s.001.01377.001.02013v25.4036c0 4.67267-3.589 8.47458-8 8.47458s-8-3.80191-8-8.47458V30.42374zM72 21.94916c4.411 0 8 3.80191 8 8.47458V81.2712c0 4.67267-3.589 8.47458-8 8.47458s-8-3.80191-8-8.47458V30.42374c0-4.67267 3.589-8.47458 8-8.47458zm400 466.10169H40c-13.234 0-24-11.40466-24-25.42373v-322.0339h384c4.418 0 8-3.79449 8-8.47458s-3.582-8.47458-8-8.47458H16V89.74575c0-14.01907 10.766-25.42373 24-25.42373h8v16.94915c0 14.01907 10.766 25.42373 24 25.42373s24-11.40466 24-25.42373V64.32202h320v16.94915c0 14.01907 10.766 25.42373 24 25.42373s24-11.40466 24-25.42373V64.32202h8c13.234 0 24 11.40466 24 25.42373v33.89831h-16c-4.418 0-8 3.79449-8 8.47458s3.582 8.47458 8 8.47458h16v322.0339c0 14.01907-10.766 25.42373-24 25.42373z'/%3E%3Cpath d='M448 123.64407h-16c-4.418 0-8 3.79449-8 8.47458s3.582 8.47458 8 8.47458h16c4.418 0 8-3.79449 8-8.47458s-3.582-8.47458-8-8.47458z'/%3E%3C/g%3E%3C/svg%3E");
    }

    Above I copied/pasted the SVG information from the plugin CSS into my own style.css and changed fill to “red”.

    This is not perfect if you wanted to recolor everything but it’s a start.

    Yes you are right – but it is heavy to accomplish.

    Easier for him might be a filter :

    #page #content .em-icon { filter: brightness(1%);}
    • This reply was modified 2 years, 1 month ago by Guenni007.
    • This reply was modified 2 years, 1 month ago by Guenni007.
    • This reply was modified 2 years, 1 month ago by Guenni007.
    Thread Starter The-Chair

    (@the-chair)

    @guenni007 your last tips works for me. Looks much nicer.

    Thanks for the tip.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change icon color and page link question’ is closed to new replies.