Transparent background behind loading.gif over X (close button) « Support Forum | Kriesi.at

Support Forum » Angular

Transparent background behind loading.gif over X (close button)

6 posts from 4 voices

Started 1 year ago by mako
Latest reply from Chris Beard
This topic is resolved

Tags:

mako
Member

When you view a portfolio item on the homepage demo you get: - + x controls. When you click: - +, it places the loading.gif ball over the X(close) icon.

It currently fills in this element behind the loading.gif with a background color and I'd like to have it transparent instead. I think I've narrowed it down to .ajax-close but not sure what element to make transparent.

I've already added:
.ajax-control a{
background-color:transparent
}

but the close button seems to still fill with color when the loading.gif appears.

Thanks

Posted 1 year ago #
Dude
Dude
Hey,
I can't reproduce this behaviour. Can you post a link or a screenshot please?

The code:
```
.ajax-control a{
background-color:transparent !important;
}
```
should work in any case.
Posted 1 year ago #
mako
Member

Thanks, I've actually replaced the text characters -,+,x with graphics. This first image shows the transparent buttons:
http://www.mkostudios.com/temp/close1.jpg

This second one shows the loading.gif w/ the div filled in with a background color, creating a solid rectangle behind it that I don't want:
http://www.mkostudios.com/temp/close2.jpg

I've added the following to the custom.css but it still seems to show a background fill:

.ajax-control{
margin-top:15pt;
height: 55px;
z-index:100;
background-color:transparent !important;
}
.ajax-control a{
/*fixed width*/
/*width: 56px;*/
border-style: none;
background-color:transparent !important;
}

.ajax-close{
/* anuglar directory spelled wrong*/
background-image:url('http://www.mkostudios.com/wp-content/themes/anuglar/images/layout/closebtn.png');
background-repeat:no-repeat;
background-position:right;
background-color:transparent !important;
}

Posted 1 year ago #
brobins
Member

I would also like to find a solution to this problem as it doesn't look very good by default.

Thanks,

Posted 1 year ago #
mako
Member

@brobins
Figured it out. You'll need to enter this into your custom.css or Quick Css textbox:

.ajax_loading2{
background-color:transparent !important;
}

That will remove the color fill behind the loading ball. Good luck.

Posted 1 year ago #
Chris Beard

Hi!

Thanks for helping out mako, it's great to see users share their solutions.

Best regards,
Chris

Posted 1 year ago #