Bookmark Reminders

Bookmark Reminders 1.0.7

No permission to buy (£20.00)
Overview FAQ Updates (18) Reviews (1) History Discussion
Can I style the bookmark icon indicating when a reminder is set?

Yes - by default, the bookmark icon will show a glowing circle to indicate there is a reminder set on an active bookmark. To achieve this, the following CSS styling is used in template core_vbr.less:

2021-06-04-00-18-36-2021-06-04-00_19_36-gif.252787


CSS: 
ul.message-attribution-opposite li a.bookmarkLink,
a.button.button--icon--bookmark .button-text
{
    display: inline-block !important;
    margin: -5px !important;
    padding: 5px !important;
}

a.button.button--icon--bookmark.has-reminder .button-text,
ul.message-attribution-opposite li a.bookmarkLink.has-reminder
{
    .m-faBase();
    font-weight: @faWeight-solid;
    position: relative;
 
    &:after
    {
        .m-faContent(@fa-var-circle);
        color: @xf-paletteColor3;
        font-size: 0.7em;
        position: absolute;
        display: block;
        right: 0px;
        top: 0px;
        border-radius: 50%;
        .m-animation(pulse 3s infinite);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
        transform: scale(1);
    }
}

.m-keyframes(pulse, {
  0% {
    -webkit-box-shadow: 0 0 0 0 fade(@xf-paletteColor3, 40%);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px fade(@xf-paletteColor3, 0%);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 fade(@xf-paletteColor3, 0%);
  }
});

Alternatively, you can display a different icon entirely to indicate a reminder is set on a bookmark by replacing the above template with the CSS below.

screenshot-2021-06-04-at-00-10-56-png.252786


CSS: 
a.button.button--icon--bookmark.has-reminder .button-text,
ul.message-attribution-opposite li a.bookmarkLink.has-reminder
{
    &:before
    {
        color: #FF4500;
        .m-faContent(@fa-var-bell);
    }
}
Back
Top Bottom