adincampbell Posted March 27, 2022 Share Posted March 27, 2022 (edited) Site URL: https://adincampbell.com/ Hello I switched from adobe portfolio to squarespace. I really like the layout of the gallery using the Andreas theme from adobe portfolio with the single row with title and description in a box to the side of the image (reference: https://adincampbell.com/). I am wondering if it is possible to customize the gallery showcase to look like this using custom CSS? I am currently using the Novo theme. Edited March 27, 2022 by adincampbell Link to comment
tuanphan Posted March 29, 2022 Share Posted March 29, 2022 Hi. I think this is possible with Sections Only + Custom Code Or Gallery Section + Code or List Section Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
adincampbell Posted March 29, 2022 Author Share Posted March 29, 2022 6 hours ago, tuanphan said: Hi. I think this is possible with Sections Only + Custom Code Or Gallery Section + Code or List Section Do you still need help on this? Hi I've tried using Sections but I like the idea of being able to hover over and click the entire section. I think gallery + code is the closest yet. I have used some custom css to make the gallery 1 row down. Other than that I couldn't figure out how to alternate the gallery items left and right and add a box to the opposite side moving the text and description into that as well. Link to comment
tuanphan Posted April 1, 2022 Share Posted April 1, 2022 On 3/30/2022 at 12:05 AM, adincampbell said: Hi I've tried using Sections but I like the idea of being able to hover over and click the entire section. I think gallery + code is the closest yet. I have used some custom css to make the gallery 1 row down. Other than that I couldn't figure out how to alternate the gallery items left and right and add a box to the opposite side moving the text and description into that as well. Can you share link to page where you added? We will try some code adincampbell 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
adincampbell Posted April 5, 2022 Author Share Posted April 5, 2022 (edited) On 4/1/2022 at 3:12 AM, tuanphan said: Can you share link to page where you added? We will try some code Heres the page: https://cod-smilodon-fkfw.squarespace.com/ Edited April 5, 2022 by adincampbell Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 On 4/6/2022 at 2:15 AM, adincampbell said: Heres the page: https://cod-smilodon-fkfw.squarespace.com/ Add to Design > Custom CSS /* Portfolio Page - Custom Layout */ @media screen and (min-width:768px) { .portfolio-grid-overlay .grid-item { height: auto !important; display: flex; flex-wrap: nowrap; padding-bottom: 0 !important; } .portfolio-grid-overlay .grid-item>div { width: 50% !important; float: left !important; opacity: 1 !important; padding: 0 !important; } .portfolio-text { position: relative !important; } .portfolio-overlay { display: none !important; } div#gridThumbs>a:nth-child(even) { flex-direction: row-reverse !important; } .grid-image-inner-wrapper { position: relative !important; }} adincampbell 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
adincampbell Posted April 10, 2022 Author Share Posted April 10, 2022 (edited) 21 hours ago, tuanphan said: Add to Design > Custom CSS /* Portfolio Page - Custom Layout */ @media screen and (min-width:768px) { .portfolio-grid-overlay .grid-item { height: auto !important; display: flex; flex-wrap: nowrap; padding-bottom: 0 !important; } .portfolio-grid-overlay .grid-item>div { width: 50% !important; float: left !important; opacity: 1 !important; padding: 0 !important; } .portfolio-text { position: relative !important; } .portfolio-overlay { display: none !important; } div#gridThumbs>a:nth-child(even) { flex-direction: row-reverse !important; } .grid-image-inner-wrapper { position: relative !important; }} Thanks so much! Works great. Modified the code a little bit added some subheadings and here is how it looks now: https://cod-smilodon-fkfw.squarespace.com/ Instead of disabling portfolio overlays: I am trying to keep those hover animations though, and have them reversed instead where hovering over transitions/inverts the text color and the banner overlay darkens when hovering over. Example: https://adincampbell.com/ Been trying to figure that out. Also the page does flicker quite a bit when reloading the page. Not sure what is causing this in the custom css but I think it has to do with it overriding squarespaces default settings in portfolio grid settings with the custom css, not sure if there is a workaround for this. Edited April 11, 2022 by adincampbell Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment