New lower pricing for Subscriptions

50%off old price

Page Loader

About › Support › App › Page Loader

Tagged: , , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • 7th March 2022 at 7:37 pm #6299
    Avatar for kcclemokcclemo
    Participant

    I see that the latest update (v3.4.138) introduced a new loader. I had overridden the loader with my own custom page loader. Would you mind providing the HTML and class names that the new loader is using along with the new button styles so that I can override them to fit with my custom theme, please?

    7th March 2022 at 8:55 pm #6300
    Avatar for Andy MoyleAndy Moyle
    Keymaster

    The new spinner has the same html and filename as before

    and still not centred annoyingly.

    The button css is as follows.
    .linkButton use on anchor links and button is the class on a button or span tag

    .linkButton,.button{
    appearance: button;
    background-color: #1899D6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: din-round,sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 13px 16px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transform: translateZ(0);
    transition: filter .2s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;

    }

    .linkButton:after,.button:after {
    background-clip: padding-box;
    background-color: #1CB0F6;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    bottom: -4px;
    content: “”;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    }

    .linkButton:main,.button:main,
    .linkButton:main,.button:focus {
    user-select: auto;
    }

    .linkButton:hover:not(:disabled),.button:hover:not(:disabled) {
    filter: brightness(1.1);
    }

    .linkButton:disabled,.button:disabled {
    cursor: auto;
    }

    .red:after{background-color:#FE484A!important;color:#FFF}
    .red{background-color:#EB2B2B!important;color:#FFF}
    .green{background-color:#53AE49!important;color:#FFF}
    .green:after{background-color:#80CE02!important;color:#FFF}
    .amber:after{background-color:#FFC800!important;color:#FFF}
    .amber{background-color:#FFBC00!important;color:#FFF}
    .grey:after{background-color:#E5E5E5!important;color:#FFF}
    .grey{background-color:#AFAFAF!important;color:#FFF}
    a.linkButton{text-decoration:none;}

    9th March 2022 at 4:48 pm #6306
    Avatar for kcclemokcclemo
    Participant

    Awesome, thank you!

    I was able to get my loader somewhat centered using these styles if it helps:

    
body {
  ...
  max-width: 375px;
  margin: 20px auto;
  padding: 0 10px 0 10px;
  ...
}
.waiting {
  content: url("https://northstarbaptistchurch.org/logo-outline.svg");
  height: auto;
  left: 247px;
  width: 128px;
}
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.