Portfolio Individual Listing Page
COMPONENT SELECTOR GUIDE
On This Page:
You’ll notice there is only one selector on this page unlike the other collection pages. That’s because portfolio individual listing pages use regular page sections like the normal pages in Squarespace; the only element that is different is the pagination element.
Pagination
Relevant CSS Selectors
If you want to select this element on any collection page, not just blog pages, remove the attribute selector [data-collection-type*="portfolio"].
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| General Selectors | ||
| .item-pagination[data-collection-type*="portfolio"] | The item pagination container on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link | The item pagination link containers on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-title | The item pagination title on blog portfolio pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-icon | The container for the SVG vector images on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-icon svg | The SVG vector imagery in each of the item pagination link containers on portfolio collection pages. |
|
| "Previous" Link Elements | ||
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--prev | The "Previous" item pagination link container on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon | The container for the "Previous" SVG vector images on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon svg | The SVG vector imagery in the "Previous" item pagination link containers on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-title | The item pagination title for the "Previous" link on portfolio collection pages. |
|
| "Next" Link Elements | ||
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--next | The "Next" item pagination link container on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon | The container for the "Next" SVG vector images on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon svg | The SVG vector imagery in the "Next" item pagination link containers on portfolio collection pages. |
|
| .item-pagination[data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-title | The item pagination title for the "Next" link on portfolio collection pages. |
|
HTML Structure Explanation
The item pagination container on portfolio pages and it’s descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.
The item pagination container on blog posts and it’s descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.