Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #9163

    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{



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




    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.


    Thanks, I’ve actually replaced the text characters -,+,x with graphics. This first image shows the transparent buttons:

    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:

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



    height: 55px;


    background-color:transparent !important;


    .ajax-control a{

    /*fixed width*/

    /*width: 56px;*/

    border-style: none;

    background-color:transparent !important;



    /* anuglar directory spelled wrong*/




    background-color:transparent !important;



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




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


    background-color:transparent !important;


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



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

    Best regards,


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Transparent background behind loading.gif over X (close button)’ is closed to new replies.