Okay
  Public Ticket #3686522
Portfolio Element Remove Buttons, Link, Text Styling
Closed

Comments

  •  5
    Tobias started the conversation
    July 15, 2024 at 5:16pm

    I am using the portfolio element with project style "meta below thumb w/ links of hover", three questions:

    1. What are the CSS classes to target a) the portfolio title and b) the portfolio excerpt

    2. I want to remove the two buttons in the hover state and turn the whole thumb into a link, so that it still works.

  •   Tobias replied privately
  •  1,882
    Judith replied
    July 15, 2024 at 6:37pm

    Hello Tobias,

    Thanks for writing to us.

    1. What are the CSS classes to target a) the portfolio title 

    .portfolio-items .work-meta h4, .main-content .portfolio-items .work-meta h4, .page-template-template-portfolio .portfolio-items .work-meta h4 {
        margin-bottom: 0;
        COLOR: RED !important;
    }

    b) the portfolio excerpt

    .portfolio-items .col p, .container-wrap[data-nav-pos="after_project_2"] .bottom_controls li span:not(.text) {
        font-family: IBM Plex Sans;
        color: blue ! IMPORTANT;
    }

    2. I want to remove the two buttons in the hover state and turn the whole thumb into a link, so that it still works.

    Please select this option from your portfolio element :

    5547933966.png

    I truly hope this proves helpful for you. Should you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out. 

    Best regards,


  •  5
    Tobias replied
    July 16, 2024 at 6:47am

    Thanks!


    For 2:
    I would love to keep the meta info below my thumb though. The functionality is basically there in the mobile version, where the image becomes clickable and there are no buttons in hover. Any way to do this?

  •  1,882
    Judith replied
    July 16, 2024 at 6:50am

    Hi Tobias,

    Thanks for writing back.

    You can select this option :

    2840082413.png

    I truly hope this proves helpful for you. Should you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out. 

    Best regards,


  •  5
    Tobias replied
    July 16, 2024 at 7:44am

    Fair; any way to remove the shadow on hover and add a color-overlay to the image instead?
    Thanks

  •  5
    Tobias replied
    July 16, 2024 at 7:52am

    I tried adding the following css:

    .portfolio-items[data-ps="9"] .col:hover img {
        box-shadow:none!important;
        transform:none!important;
        opacity: 0.3!important;
    }

    But the opacity doesn't seem to work; it creates a strange glitch when moving the mouse on the hover. Please advise; see original link in my private comment.


  •  5
    Tobias replied
    July 16, 2024 at 8:02am

    Never mind; I removed the border-radius from the thumb image as well, now it seems to work.

    I achieved what I needed – thank you.

    If anyone else needs to css that worked for me:

    .portfolio-items[data-ps="9"] .col:hover img {
    box-shadow:none!important;
    transform:none!important;
    opacity: 0.3!important;
}
.portfolio-items[data-ps="9"] img {
        border-radius:0!important;
}
  •  1,882
    Judith replied
    July 16, 2024 at 3:22pm

    Hello Tobias,

    Thanks for writing back.

    We are glad you were able to resolve the issue.

    Should you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out. 

    Best Regards.