Hide portfolio content

[Richardz]

Hi everyone,

After several searches on the forum, I can’t find solutions to my problem.

Do you have a sample css code to display only the thumbnails in the portfolio?

Currently there are the meta and the excerpt, except I would like only the image to be visible. I used in css code entre-wrap {display : none;} but it makes the portfolio display buggy…

Thanks to you in advance

[ruenel]

Hello Richard,

Thanks for writing in!

What you have shown in the screen seems to be the blog index. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

[Richardz]

Hi @ruenel,
I do not wish to change the appearance of the blog articles and the blog index which is accessible at this address : https://www.mon-consultant-marketing.fr/actualites/

I only want to change the appearance of the blocks that are displayed in the portfolio index:

• display the images only and be able to add space between each item
• display with the “mansory” style but only for the portfolio (I want to keep the layout of my blog).

The page concerned (the portfolio) by this request is here : https://www.mon-consultant-marketing.fr/marketplace/

Thanks to you !

[rad]

Hi Richard,

I see, in that case, please check this related thread How to make Portfolio main page Masonry instead of rows about the masonry.

The issue on that one is, it’s not a portfolio page but an archive page. Even this https://www.mon-consultant-marketing.fr/marketplace/ is an archive page.

Creating masonry for portfolio independent from theme settings would require customization but it’s something we can’t provide here in the forum, but yes doable. But you can try the CSS one, example

Format Search Results Page

Hello Robert, Thanks for asking. Masonry layout is also not a feature of the Search result page. The theme only outputs the Standard layout. So, it will require some bit of customization which falls outside the scope of support we can offer. Having said that, you can use following CSS under X > Theme Options > CSS to get started: .search-results article { margin-right: 2%; border: 1px solid #eaeaea; padding: 20px; margin-top: 0 !important; margin-bottom: 20…

You’ll have to change .search-results to .post-type-archive-x-portfolio. Then to hide the content, will be

.post-type-archive-x-portfolio .entry-wrap {
display: none;
}

Thanks!

[Richardz]

Hello @rad ,

Thank you for the information.

I followed your advice and created a “portfolio layout” page and set up the page to display three columns here :
https://www.mon-consultant-marketing.fr/espace-pro/marketplace/

I integrated CSS code to hide the content (entry-wrap) but the rendering is not what I expected…
My images are 1:1 square format but they don’t look good.

Would you have a solution or CSS tags to share with me ? (in Chrome webtools I can’t find anything concrete)

NB 2 : how to make the filters appear on the page ?

[rad]

Hi Richard,

The images are cropped, please check this https://www.mon-consultant-marketing.fr/wp-content/uploads/2020/06/Etude-de-marché-881x492.jpg

And please make sure to turn off cropping option at Theme Options > Portfolio > Content > Cropped featured images, this makes sure the original aspect ratio of the image is displayed.

As for the filter, since you’re custom header, you’ll have to manually add your filter. Example, you can add a text element to your header and place this shortcode [x_portfolio_filters].

Thanks!

[Richardz]

Hi @rad ,

Thanks for the information, I was able to modify the site thanks to you.

Last little thing, what are the “properties” or CSS “name” of these elements? (red frames)

I would like to modify the appearance of the filter buttons and the appearance of the results with CSS code .

Thanks to you!

[Richardz]

Here is the CSS code I could find also to modify the appearance of the filter buttons in the portfolio :

.x-portfolio-filters, .x-portfolio-filter {
  background: #383838 !important;
  color: white !important;
  border:none;
  display:inline-block !important;
  float:none;
}
.x-portfolio-filters {
  display:none!important;
}

@rad On the other hand, I haven’t found a way to rename the “All” button.
Would you have a line of Js or CSS to share?

[rad]

Hi Richard,

Glad it’s working and styled now, for the text, you can try this CSS with your new text

    .x-portfolio-filters-menu li:first-child a{
        text-indent: -999999999999px;
position: relative;
overflow: hidden;
line-height:0;
    }
.x-portfolio-filters-menu li:first-child a:after {
content: "yourtext here";
display: block;
text-indent: 0px;
line-height: 1.3;
}

Please note that we don’t maintain or provide support to the provided code and CSS.

Cheers!

[Richardz]

@rad

.x-portfolio-filters-menu li:first-child a{
        text-indent: -999999999999px;
position: relative;
overflow: hidden;
line-height:0;
    }
.x-portfolio-filters-menu li:first-child a:after {
content: "yourtext here";
display: block;
text-indent: 0px;
line-height: 1.3;
}

Is there a way to know all the CSS tags of the theme?

It would be great to be able to customize the theme more with CSS code but I’m regularly having trouble finding the right CSS “class” …

Thanks for your help.

[marc_a]

Hi Richard,

To simply find the css tags of each element, just right-click the elements and click inspect, this is what we called inspect element.

Example on this page https://www.mon-consultant-marketing.fr/espace-pro/marketplace/:

1.) I hover my mouse under “Module E-commerce” then right-click and then click inspect, it will show this layout below.

2.) You can now see the CSS name of that element then you can apply your custom css.

Here are some helpful links in order for you to understand very well
https://www.hostinger.ph/tutorials/website/how-to-inspect-and-change-style-using-google-chrome
https://www.w3schools.com/css/

I hope it will answer your question.

Thank you.