Okay
  Public Ticket #3045539
portfolio items
Closed

Comments

  •  32
    Tes started the conversation
    May 17, 2022 at 10:23am

    Hi, 

    would it be possible to not show the background image (featured image) here (see attached screenshot), but just a transparent (white) background and black text? 

    Thanks in advance! 


  •  8,839
    Tahir replied
    May 17, 2022 at 12:34pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .portfolio-items .col img {
    visibility: hidden;
}
.portfolio-items .work-item:before {
    background-color: #000 !important;
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

    Thanks

    ThemeNectar Support Team 

  •  32
    Tes replied
    May 17, 2022 at 3:02pm

    Hi Tahir, 

    Thanks. I added the css and now the background is black. Could we make that transparent? And when hovering could we make it yellow (#ECCB52)?

  •  1,877
    Judith replied
    May 17, 2022 at 3:32pm

    Hello Tes,

    Please try this css:

    .portfolio-items .work-item:before {
        background-color: #0000 !important;
    }
.portfolio-items .col h3 {
        color: #000;
    }
.portfolio-items[data-ps="8"] .col .work-info .vert-center p {
        color: black !important;
    }
.portfolio-items[data-ps="7"] .col[data-default-color=true] .work-item:not(.style-3) .work-info-bg, .portfolio-items[data-ps="8"] .col[data-default-color=true] .work-item:not(.style-3) .work-info-bg {
        background-color: orange !important;
    }

    Thanks.



  •  8,839
    Tahir replied
    May 17, 2022 at 3:34pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .portfolio-items[data-ps="8"] .col:hover .work-info-bg {
    opacity: .8;
}
.portfolio-items[data-ps="7"] .col[data-default-color=true] .work-item:not(.style-3) .work-info-bg, .portfolio-items[data-ps="8"] .col[data-default-color=true] .work-item:not(.style-3) .work-info-bg {
    background-color: #ECCB52 !important;
}

    Thanks

    ThemeNectar Support Team 

  •  32
    Tes replied
    May 17, 2022 at 4:01pm

    Hi! 

    Thanks a lot. Almost there. The hover looks nice, but the starting position is now a black box. Could we make the background transparent? 

    Thanks again!

  •  1,877
    Judith replied
    May 17, 2022 at 4:30pm

    Hello Tes,

    Please send in your admin login credentials so that we can check this out.

    Thanks.


  •   Tes replied privately
  •  1,877
    Judith replied
    May 17, 2022 at 4:42pm

    Hi Tes,

    Please check it out now.

    Thanks.

  •  32
    Tes replied
    May 18, 2022 at 7:55pm

    Hi there, 

    Yes, thanks very much. One more question: 

    Could we make it so that they all start at the top and line out from there instead of the bottom?

    See attached screenshot. 

    Thanks!

  •  8,839
    Tahir replied
    May 19, 2022 at 2:56pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .portfolio-items[data-ps="8"] .col .work-info .vert-center {
    bottom: auto !important;
    top: 0px !important;
   }

    Thanks

    ThemeNectar Support Team 

  •  32
    Tes replied
    May 24, 2022 at 12:48pm

    Hi guys, 

    Thanks for everything so far. On mobile all the portfolio items have a yellow-ish background (with opacity). How to make it transparent, as on desktop?

  •  1,877
    Judith replied
    May 24, 2022 at 2:26pm

    Hi Tes,

    Please try this css:

    @media only screen and (min-width: 1px) and (max-width: 999px){
    .portfolio-items[data-ps="8"] .col .work-info-bg {
        opacity: 0;
    }
}

    Thanks.