Editing layout of Portfolio Post

Support
#1

Hey guys,

So I am in need of some assistance with how to go about editing the portfolio post pages. Not adding content to them, but actually changing the current layout.

Currently, using one of the Renew’s, the portfolio Image is on the left, with social sharing buttons on the right, and all content below the image.

I’m needing to be able to add content below and beside the image, while also having the portfolio item name appear above the image in a full-width container. The info beside the image needs to be the actual portfolio content, while below I am adding an information and CTA section that the client is requesting be on all portfolio posts.

I’ve attached an image that shows what I am wanting to achieve.

Thank you in advance for you assistance.

#2

Hi There,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom template, but this would be outside the scope of support we can offer.

How about we hide the feature image and the extra sidebar, so you’ll have the entire content to work on, you can add the custom CSS below on Theme Options > CSS. You can then save your first portfolio post page as a Cornerstone (.csl) template. then use that template for your succeeding portfolio post.

/*hide the feature image and extra sidebar on single portfolio*/
.single-x-portfolio .entry-featured,
.single-x-portfolio .entry-extra {
	display: none;
}

/*make a fullwidth the content-area of single portfolio*/
.single-x-portfolio .entry-info {
	float: none;
	width: 100%;
}

Thank you for understanding.

#3

Hey Friech,

Thank you! While this isn’t what I was expecting, this is almost exactly what I needed. One question with it though:

The second section of that is not allowing me to make sections full width. I tried this:

.x-container.width{
   width:100%;
}

However, it destroys footer layout, as well as forcing me to put padding into each row that I do not want full width, since row containers do not work. The offset container is setting a margin around everything, but I would only like that to be around two of the 3 sections. I need that black section and the top title section to be full width black.

Also, on my portfolio pages, I am wanting to edit how the categories are displayed. I’d like to remove them from the dropdown + button. Is that possible to do? If I can get them out, I should be able to modify them how I would like, I’m just unsure of how to remove that. I’d also like to remove the page title without removing the filtering portion of the page.

#4

Hi There,

Please provide your URL so we can take a closer look.

Thanks!

#5

http://104.244.121.69/~devthepinnacle/

#6

Hi There,

Please add the following code instead

.single-x-portfolio .x-comments-area,.single-x-portfolio footer.x-container.max,.single-x-portfolio .x-colophon {
   
    max-width: 90%;
    margin: auto;
}

.single-x-portfolio .x-container.width{
   width:100%;
}

.x-portfolio .entry-cover-content span {
    text-transform: uppercase;
    display: none;
}

.page-template-template-layout-portfolio  .entry-title .h-landmark {
display: none;

}

Hope it helps!

#7

Oh no, that super broke it. One section of the footer goes full width, while the other is very messed up. Also, the portfolio page filtering aspect of my question wasn’t addressed.

Here’s login information if you’d like to go in and mess with it:

#8

Hi There,

Thank you for the credentials. Unfortunately, I am a little confuse right now with your setup. Please try to remove suggested CSS.
If you want the content area only of the footer to be fullwidth, please try this CSS instead:

.single-x-portfolio .x-header-landmark+.x-container.width {
    width: 100%;
    border: thin solid red;
}

That CSS is specific on content area after the header. I can see you have an extra footer. Did you add that via child theme? Please give us screenshot with comments on how it should be so we can specific on our suggestion. We’re sorry for the back and forth, it’s just from the state of your portfolio item, I am not sure how should it be.

#9

Hey Lely,

I have a previously attached picture that shows what I want to achieve with the individual portfolio pages. One person was able to assist me in removing some sections so that I could just use cornerstone to layout how I’d like the rest of the page to be. However, I cannot make it full-width like I want. Joao gave me those 4 sections to put into the CSS to override some theme CSS, but it does not do what I need. The only full-width portion that actually shows full width is my custom footer section. You can see it in the Starbucks portfolio page when you view it.

Also, I added your CSS code, but it doesn’t make the page full width. It makes it full width within the container, but not the entire page.

As for the filter section, it is currently all located in a + button on the portfolio pages. I want to bring it out of the portfolio pages, and be able to style it to my clients specifications. See the attached image for what I am trying to get on that.

#10

Hi There,

I think you have a wide-screen monitor :slight_smile: Sorry if we overlooked the portfolio page width, we have a standard screen size so your portfolio page looks full-width to us. You can add the custom CSS below to remove the max-width on the main container so it can be a true full-width on all screen-size.

/*remove main container's width limit*/
.single-x-portfolio .x-container.offset {
	max-width: none !important;
}

It could be possible with custom development, regretfully this would be outside the scope of support that we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.