Target portfolio posts in 7.1 with CSS?

Is there a way to target all portfolio pages with CSS (.e.g with body class or something)? 

Seems like there is no header code injection for portfolio type too. 

Portfolio projects or Portfolio list page?

Which plan do/will you use?

Can you share link to your site?

CSS for all portfolio single pages, not list. It seems that custom CSS is  applied to portfolio list page too, which I don't want.

I'm using Business plan, but unfortunately can't share the link. 

If you add to page header, you can use body.view-item class name. It targets single pages only.

If you want code apply to specific portfolio pages only, conside using this tool to get the collection id of porfolio page.

Chrome Web Store - Extensions (google.com)
eg: 

Then this selector can be applied for all of the pages inside the porfolio

.collection-5d28ae573e47cd0001707a3f.view-item

Sample page from this

Alex Tepito (squarespace.com)

@tuanphan @bangank36 Is there a way to target portfolio pages as a class (keeping other pages untouched), so that any CSS would apply to duplicate pages my clients make? I created a custom layout for portfolio pages that they might want to duplicate for new bodies of work. Collection IDs wouldn't work on my clients' future duplicate pages, unless they hired me to add CSS later.

On 2/9/2022 at 8:10 AM, sfphotogirl said:

@tuanphan  Is there a way to target portfolio pages as a class (keeping other pages untouched), so that any CSS would apply to duplicate pages my clients make? I created a custom layout for portfolio pages that they might want to duplicate for new bodies of work. Collection IDs wouldn't work on my clients' future duplicate pages, unless they hired me to add CSS later.

wrap code in style tag & add to Portfolio Page Header

On 2/13/2022 at 7:33 AM, tuanphan said:

wrap code in style tag & add to Portfolio Page Header

Thanks so much for answering. Would it be necessary to add this code to each portfolio page my client duplicates? Is there something/some selector that affects all portfolio pages on a site but not other kinds of pages?

On 2/8/2022 at 5:10 PM, sfphotogirl said:

Is there a way to target portfolio pages as a class (keeping other pages untouched), so that any CSS would apply to duplicate pages my clients make?

In general yes it is possible. If you try to work within the CSS that SS created I think you'll find that you can do what you want. The trick is to remember that if you get some CSS set up to work for a portfolio and want to make a duplicate. That duplicate needs to be setup exactly the same way the portfolio the CSS was designed for was. I'm not talking about the content of course but the settings that the SS interface provides.

On 2/14/2022 at 5:45 PM, creedon said:

In general yes it is possible. If you try to work within the CSS that SS created I think you'll find that you can do what you want. The trick is to remember that if you get some CSS set up to work for a portfolio and want to make a duplicate. That duplicate needs to be setup exactly the same way the portfolio the CSS was designed for was. I'm not talking about the content of course but the settings that the SS interface provides.

@creedon Thanks for your reply. My hope is that my clients wouldn't touch the layout of the duplicate portfolio page, but just add new artwork. My challenge has been finding a way to get CSS to apply to pages that don't yet exist (because they haven't been duplicated yet). I have inspected portfolio pages and haven't found a specific selector to target that is only for portfolio pages.

40 minutes ago, sfphotogirl said:

My challenge has been finding a way to get CSS to apply to pages that don't yet exist (because they haven't been duplicated yet).

I think the trick will be to discover if a portfolio set up in a particular way produces a unique set of targetable elements.

Alternately you might go the exclusion route. Basically all portfolios that are created with particular settings take on the CSS rulesets you want to apply to make it easier for your client. But if needed you could exclude certain ones.

2 hours ago, creedon said:

I think the trick will be to discover if a portfolio set up in a particular way produces a unique set of targetable elements.

Alternately you might go the exclusion route. Basically all portfolios that are created with particular settings take on the CSS rulesets you want to apply to make it easier for your client. But if needed you could exclude certain ones.

Not sure how unique the set of targetable elements are – I'm placing a column of text next to a gallery block of stacked images, sort of like the Montauk 7.0 gallery pages. My clients like that layout, so I'm replicating it in 7.1. It's different from the default Squarespace layouts, because of the columns. The CSS I want to use will ideally tell portfolio pages only to stack on tablet view. But I don't know how to exclude the other pages.

@sfphotogirl

Can you post an example page we can look at? Given your description of the layout it may not be possible to target the elements. But hey you never know.

If you are using the business plan or above for the site you might be able to target some CSS programmatically.

18 hours ago, creedon said:

@sfphotogirl

Can you post an example page we can look at? Given your description of the layout it may not be possible to target the elements. But hey you never know.

If you are using the business plan or above for the site you might be able to target some CSS programmatically.

Here is the trial site I'm testing. Right now I'm trying some code that stacks this page on tablet/mobile, but unfortunately the code also affects other pages. The Home page looks weird stacked on tablet, so that is really what I want to exclude from the CSS. https://cat-parrotfish-4eaj.squarespace.com/portfolio-1/point-reyes  (password: tester)

Here is the code I tried out: 

@media screen and (max-width: 800px) {.layout-engine-section [class*=sqs-col] {
float: none !important;
width: auto !important;
}
}

On 2/18/2022 at 12:00 PM, sfphotogirl said:

.layout-engine-section [class*=sqs-col]

That selector is very general and would have far reaching impact on pages.

I just looked at the page you provided. It appears SS provides no real indications selector wise that the page is part of a portfolio.

The only possible solution I can think is the business plan or above and Javascript. With Javascript it may be possible to add a class or attribute to the portfolio page projects that you could then target with a selector.

Were I to approach the code I'd put a code block with a trigger keyword that the Javascript code could look for to know when to alter the page with the class or attribute.

When a page was duplicated for a new project that code block would ride along. You instruct the client to never alter or remove the code block. I have found with a good set of instructions most clients are able to not mess up the code block situation.

4 hours ago, creedon said:

That selector is very general and would have far reaching impact on pages.

I just looked at the page you provided. It appears SS provides no real indications selector wise that the page is part of a portfolio.

The only possible solution I can think is the business plan or above and Javascript. With Javascript it may be possible to add a class or attribute to the portfolio pages that you could then target with a selector.

If I were to approach the code I'd put a code block with a trigger keyword that the Javascript code could look for to know when to alter the page with the class or attribute.

When a page was duplicated for a new project that code block would ride along. You instruct the client to never alter or remove the code block. I have found with a good set of instructions most clients are able to not mess up the code block situation.

This sounds fine! I don't have much experience with javascript, but I have heard of this method before. I always instruct my clients to buy the business plan, so that is no issue.

On 2/18/2022 at 1:17 PM, creedon said:

With Javascript it may be possible to add a class or attribute to the portfolio page projects that you could then target with a selector.

If I were to approach the code I'd put a code block with a trigger keyword that the Javascript code could look for to know when to alter the page with the class or attribute.

Please see Portfolio Page Project Collection Type Class Add.

The cited code doesn't use the code block method but instead looks for the the project navigation and if found adds the class twc-collection-type-portfolio to the body tag. This particular method is good for if you want to target every project page within a portfolio.

If one needed to have some projects have one style and others a different one then the code block method would still need to be used to accomplish that effect.

@sfphotogirl

On 2/21/2022 at 1:39 PM, creedon said:

Please see Portfolio Page Project Collection Type Class Add.

The cited code doesn't use the code block method but instead looks for the the project navigation and if found adds the class twc-collection-type-portfolio to the body tag. This particular method is good for if you want to target every project page within a portfolio.

If one needed to have some projects have one style and others a different one then the code block method would still need to be used to accomplish that effect.

@sfphotogirl

Thank you! This worked perfectly. I'm so pleased!

On 2/21/2022 at 1:39 PM, creedon said:

Please see Portfolio Page Project Collection Type Class Add.

The cited code doesn't use the code block method but instead looks for the the project navigation and if found adds the class twc-collection-type-portfolio to the body tag. This particular method is good for if you want to target every project page within a portfolio.

If one needed to have some projects have one style and others a different one then the code block method would still need to be used to accomplish that effect.

@sfphotogirl

I spoke a bit too soon! Code appears to work on everything except an iPad (slightly larger tablet). The code I added to CSS is currently this (after adding your code to Header Code injection). Maybe I have the selector slightly wrong?

@media screen and (max-width: 1000px) {.item-pagination[data-collection-type^="portfolio"] {
float: none !important;
width: auto !important;
}
}

6 hours ago, sfphotogirl said:

Maybe I have the selector slightly wrong?

Yes your selector appears to be targeting the item pagination which is after the main content of the page. That won't work.

My code adds the class twc-collection-type-portfolio to the body tag. So your selectors would look something like the following.

@media screen and ( max-width : 1000px ) {

  .twc-collection-type-portfolio [build the rest of your selector up here] {
  
	float : none !important;
	width : auto !important;
    
	}
  	
  }

Let us know how it goes.

22 hours ago, creedon said:

Yes your selector appears to be targeting the item pagination which is after the main content of the page. That won't work.

My code adds the class twc-collection-type-portfolio to the body tag. So your selectors would look something like the following.

@media screen and ( max-width : 1000px ) {

  .twc-collection-type-portfolio [build the rest of your selector up here] {
  
	float : none !important;
	width : auto !important;
    
	}
  	
  }

Let us know how it goes.

Ah, thanks! It's working now. Perfect! Home page didn't stack, but portfolios are stacking on tablet.

Final CSS is this:

@media screen and ( max-width : 1000px ) {
.twc-collection-type-portfolio [class*=sqs-col] {
  
    float : none !important;
    width : auto !important;
  }    
  }

Hi,

Thank you for the javascript targeting portoflio pages which I've added. I'm not sure I'm targeting the added class correctly in my CSS though. I'm trying to replace a grey logo with a white logo, and change nav color only on those pages, but the logo does not change (tested that it changes without the ".twc..." class). Appreciate a look and any help/corrections!

Portfolio page

Quote

//Change Logo and Nav color//
.twc-collection-type-portfolio {
    .header-title-logo img {
    visibility: hidden !important;
}
    .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/62b8cab7cbbc6359efdfc5dd/t/63334cfc58a9522e8fa8f45b/1664306428278/ZH-Architects-logo-white-500.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
    .header-nav-item a {
    color: #FFF !important;
}
    .header-nav-folder-content {
   background: #6A7284 !important;
}
}

12 minutes ago, MonicaW said:

Thank you for the javascript targeting portoflio pages which I've added.

My code is not running as someone has altered it.

2 hours ago, creedon said:

My code is not running as someone has altered it.

Ah, I see. Thank you for pointing that out, appreciate it. I had something leftover from when I was trying to change blog pages, I took it out and It works now.

Can someone help me with this also? I'm trying to make the nav headers of JUST the portfolio project pages transparent, and I can't get it to work.  I tried using the adaptive option, but that doesn't work either based on how I want the rest of the pages to look.  Maybe I'm using  the wrong class name / selector? So confused and any help much appreciated!