Projects Grid "plus" box color

  • Hello,

    I’m wanting to change the color of the box around the “+” sign that appears when you hover over an image in the projects grid. It’s currently a green color. I’m assuming there’s some javascript involved with the CSS because straight CSS changes won’t work. Here’s what I’ve tried:

    .projects-grid .fancybox-thumb span {background:#7FF;}
    – this changes the color of the image box behind the green square, but not the green square itself.

    .projects-grid .fancybox-thumb span::before {background:#F00;}
    – this DOES change the color of the green square, but the plus sign disappears.

    Any pointers? Thanks!



    It is just CSS which controls this section. Here it is,

    .projects-grid .fancybox-thumb span:before {
    background: #5cb85c url(images/icons.png) no-repeat scroll 11px -108px;
    content: "";
    display: block;
    height: 40px;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    width: 40px;

    It’s located on line 708 of the style.css file.

    If you have any other questions please let me know.

    Thanks! However that gives me the same issue as above. I can change the color of the box but the “+” sign disappears. I’m guessing the path to the image breaks when I overwrite the CSS using custom code…?

    1. Do you know what the path would be to the image from the custom code css?

    2. Does custom code css get overwritten when theme updates are installed or is this css safe from updates? I’m using a child theme.

    Thanks for your help,


    Here is what you can do,

    .projects-grid .fancybox-thumb span:before {
    background-color:blue !important;

    The plus sign will not disappear if you do that.

    Enter that in the Custom CSS field of the Custom Code section in Integral Options Panel.

    It will NOT be over-written once you update the theme.

    That worked! Thank you!

You must be logged in to reply to this topic.