Okay
  Public Ticket #3692358
Portfolio Grid, Burger menu fonts, Stories
Open

Comments

  • Yusuke started the conversation

    Hi there, I have three questions about the display of the portfolio grid, the text in the menu, and the stories thumbnail.

    1. Portfolio Grid
    I want the name of the work at the bottom of the thumbnail to be displayed at all times, and I want the thumbnail image to be displayed horizontally instead of vertically.
    http://preview.themeforest.net/item/manifesto-creative-portfolio-theme/full_screen_preview/48149521?_ga=2.42238626.624173157.1721646583-640906521.1721646583

    2. Burger menu
    I am managing the font with a custom font plugin, but please tell me where to specify the font to be displayed in the burger menu. I can't control it well with custom CSS. (I also want to eliminate the character scrolling function when the cursor is hovered.)

    3. Stories thumbnail image
    I want to display the hero image to be used as a thumbnail. If possible, you want the Stories home page to look similar to the portfolio grid. (I also want a filter function similar to the portfolio grid)

    http://preview.themeforest.net/item/manifesto-creative-portfolio-theme/full_screen_preview/48149521?_ga=2.42238626.624173157.1721646583-640906521.1721646583

    Currently, I can‘t send the URL because it is a test environment, but there is no problem with the instructions in the demo template.

    Best regards.

    Attached files:  Manifesto_burger_menu_font.png

  •  1,926
    Support replied

    Hello Yusuke,

    Since we don't have your site URL we will discuss using our live demo, but plz let's use the direct links instead of Envato preview frame since it will always redirect to the home page.

    1. Portfolio grid

    http://clapat-themes.com/wordpress/manifesto/portfolio-grid/

    showing captions at all time: plz add in customizer -> additional CSS

    .showcase-portfolio .slide-caption {
        opacity: 1 !important;
    }

    .showcase-portfolio .slide-caption .slide-title span {
        opacity: 1 !important;
        transform: none !important;
    }

    .showcase-portfolio .slide-caption .slide-cat span {
        opacity: 1 !important;
        transform: none !important;
    }

    try also changing the layout of your portfolio grid to 'Classic Thumbs Grid' in grid page options

    https://prnt.sc/bSRe0oyG4h5F

    2. the hover effect on portfolio items can be removed with custom work when you have a link online send us wp admin access with full rights using Appearance -> Theme file editor

    3. Unfortunately we have only this page layout for blogfrown.png which shows the featured image on hover

    http://clapat-themes.com/wordpress/manifesto/stories/

    but I'm thinking that you can use a Gutenberg block or an Elementor widget to display the blog posts the way you want.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Yusuke replied

    Hello,
    Thanks for the reply.

    1-1. Portfolio grid (showing captions)
    Showing captions has been resolved.
    but, one thing I noticed while modifying it was that the texts on this template cannot be dragged and copied.
    Can this be fixed?

    1-2. Portfolio grid (thumbnail image displayed horizontally)
    Please also answer this question.
    If there is a solution, it would be very helpful.

    2. Burger menu
    After submitting the question, the font specification in the menu was resolved.
    However, I have not yet been able to eliminate the scrolling function when hovering over a character.
    If it seems difficult to solve the problem without wp admin information, I will contact you after the site is published.

    3. Stories thumbnail image
    Thanks, I'll think of some other way.


    I would like to ask you to answer a few more of the above questions.

    Thank you.

  •  1,926
    Support replied

    Hello,

    1. to select and copy the text you can add the following in customizer -> additional css

    html, body, #main{      

         user-select: auto !important; /* supported by Chrome and Opera */      

         -webkit-user-select: auto !important; /* Safari */      

          -khtml-user-select: auto !important; /* Konqueror HTML */      

          -moz-user-select: auto !important; /* Firefox */       

          -ms-user-select: auto !important; /* Internet Explorer/Edge */ 

    }

    2. http://clapat-themes.com/wordpress/manifesto/portfolio-grid/

    Do you mean landscape instead of portrait?

    3. we need actually access to theme file editor to modify some files for that

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Yusuke replied

    Hello,

    1. Thanks, drag-and-copy support has been reflected.

    2. I want to do it like this attached JPG.
    Thumbnail photos are displayed at a horizontal angle of view.

    Thank you.

    Attached files:  240802_sample.jpg

  •  1,926
    Support replied

    Dear Yusuke,

    I'm not an expert with css therefore I can provide quick solution that may work for you

    .showcase-portfolio.layout-three .slide-inner {
        height: 50% !important;
    }

    Otherwise it's custom work and I may need to escalate it to our web designer

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Yusuke replied

    Hi,
    Thanks for the reply.

    When I tried it right away, it certainly changed to a horizontal ratio, but the next step is to expand the space above and below the thumbnail, and it is quite difficult to control it.

    Take one step forward and two steps back.
    It's really annoying.

    Thank you.

  •  1,926
    Support replied

    Hello, So I understand the solution I provided is not really what you want since it has space underneath is this what you are saying? Have you fixed it yourself in the meanwhile - because otherwise I need to escalate your ticket to our web designer.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Yusuke replied

    Hello, If possible, I would appreciate it if you could tell me how to adjust the margins between the arrows in the attached image.
    (for PC browser and mobile display)

    Thank you.

    Attached files:  240819_portfolio_list.jpg

  • Yusuke replied

    Hello, In addition to the upper and lower space setting method of the thumbnail that I told you about yesterday, I would also like to set the left and right spaces, so please tell me as well.

    Thank you.

    Attached files:  240820_portfolio_list_02.jpg

  •  1,926
    Support replied

    It looks like you want to modify the layout of the portfolio grid using the "layout three" option. To adjust the margins, you can add the following code in Additional CSS:


    .showcase-portfolio.layout-three .clapat-item {
      width: calc(25% - 80px);
      margin: 60px 40px;
    }

    In this example:

    • 60px represents the vertical margin (top and bottom).
    • 40px represents the horizontal margin (left and right).

    If, for instance, you want to reduce the horizontal margin to 20px, you'll also need to adjust the width accordingly to ensure proper alignment. Here's how:

    width: calc(25% - 40px);

    For responsive design, you should apply CSS media queries (breakpoints) to adjust these values for different screen sizes. Here’s a simple example:


    @media (max-width: 768px) {
      .showcase-portfolio.layout-three .clapat-item {
        width: calc(50% - 20px);
        margin: 30px 10px;
      }
    }

    This example adjusts the grid for smaller screens by increasing the width to 50% and reducing the margins. You can customize this further based on your needs.


    To Modify the Height:

    To modify the height and achieve a specific aspect ratio for the images (for example, landscape images), you can add the following styles:

    .showcase-portfolio .slide-inner::before {
      float: left;
      padding-top: 60%;
      content: "";
    }

    This sets the height based on a percentage of the width, where 60% defines the aspect ratio. You can adjust this value for different ratios. For example, use 75% for a 4:3 aspect ratio or 56.25% for 16:9.

    Additionally, you can define the aspect ratio directly using the aspect-ratio property:

    .showcase-portfolio .slide-inner {
      aspect-ratio: 10/6;
    }

    In this example, the aspect ratio is set to 10:6 (landscape format), which you can modify based on your design needs.



    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy