Changing the color of the preloader

  • Resolved Arne Teubel

    (@arnerobot)


    9 years ago

    Hello,

    how can I change the color of the preloader circle? I’d like to replace the background grey of the circle with a color from my website’s pallet (or even replace both color the one of the spinning white part and the background…).

    I already identified this as the code for the background:

    .featherlight-loading .featherlight-content {
	border: 8px solid #909090;
}

    But if I change the color the spinning white part disappears.

    Thanks a lot and regards,
    Arne

    https://www.ads-software.com/plugins/wp-featherlight/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Axel13

    (@axel13)

    Hey Arne,

    The spinning white is considered the left border. When you add CSS for the border or border color it overrides the left border as well, so you should add something like this instead:

    .featherlight-loading .featherlight-content {
    border-color: #909090;
    border-left-color: #fff;
}
    Thread Starter Arne Teubel

    (@arnerobot)

    Hello Axel13,

    this did actually work well, thank you! I had to set both values “!important” to override the standard CSS supplied by the plugin:

    .featherlight-loading .featherlight-content {
    border-color: #EED5B7 !important;
    border-left-color: #FFF !important;
}

    Cheers, Arne

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing the color of the preloader’ is closed to new replies.

Tags