tuanphan Posted July 7, 2023 Author Share Posted July 7, 2023 19 hours ago, Lpulecio said: Hi @tuanphan - I tried using the code for #17. Add all projects under Pagination but my subscription plan apparently doesn't include code injection. Could you help me with the css code or some way to add all portfolio projects in a grid under pagination? So people don't have to go back to the homepage every time or be able to only go to the next project. This is my website: www.laurapulecio.com Thank you in advance!! This is not possible with CSS code. You try edit your Site Footer > Add a Markdown Block > Then add the #17 code. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
imuhwinner Posted August 14, 2023 Share Posted August 14, 2023 (edited) Thank you so much for this! Just used #1 to do exactly what I needed. Follow up: Wondering if each project in the portfolio could overlay a different color in the site palette? How hard would that be? Thanks again! Edited August 14, 2023 by imuhwinner Link to comment
tuanphan Posted August 14, 2023 Author Share Posted August 14, 2023 1 minute ago, imuhwinner said: Thank you so much for this! Just used #1 to do exactly what I needed. Follow up: Wondering if each project in the portfolio could overlay a different color in the site palette? How hard would that be? Thanks again! Use some code like this under above code .grid-item:nth-child(1) .grid-image:after { background-color: red !important; /* chage overlay color here */ } .grid-item:nth-child(2) .grid-image:after { background-color: #f1f !important; } .grid-item:nth-child(3) .grid-image:after { background-color: rgba(0,0,0,0.5) !important; } .grid-item:nth-child(4) .grid-image:after { background-color: violet !important; } Repeat similar You can use color name (eg: red), hex color (eg: #f1f), rgb (eg: rgb(0,0,0)) or rgba color (eg: rgba(0,0,0,0.5)) This code will apply all portfolio pages, if you use multi pages, you can send link to portfolio page where you want to apply, we can tweak code easier imuhwinner 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
imuhwinner Posted August 14, 2023 Share Posted August 14, 2023 Woo! Totally worked and exactly what I wanted! Thank you!! tuanphan 1 Link to comment
DanniR Posted August 19, 2023 Share Posted August 19, 2023 Hi @tuanphan, is it possible to add an additional text line when using Grid: Overlay, please? I would ideally like to add a colour when hovering over each project within Grid: Overlay too, is this possible? Link to comment
tuanphan Posted August 20, 2023 Author Share Posted August 20, 2023 9 hours ago, DanniR said: Hi @tuanphan, is it possible to add an additional text line when using Grid: Overlay, please? I would ideally like to add a colour when hovering over each project within Grid: Overlay too, is this possible? #1. You can use #2 code. I remember Grid Simple and Grid Overlay have same class/id, so you can use that code #2. Each project will have a different color? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
FortWest Posted January 3 Share Posted January 3 (edited) Hi @tuanphan I used your CSS to add a subtitle to my portfolio/case studies page– which worked great. It currently looks like this: I'm curious if there is a way to move the to move both the title and the subtext to display over the image on rollover, with a light screen over the image (which is a .gif, if that matters). Positioned like this: As a bonus, it would be amazing if the text could animate in from the bottom up on rollover, with the image zoom and a light screen over the bottom ⅓ of the image (to make the white text pop), but that might be asking too much. Thank you so much all the help and support you provide on this forum! Edited January 3 by FortWest Additional detail. Link to comment
tuanphan Posted January 5 Author Share Posted January 5 On 1/3/2024 at 11:37 PM, FortWest said: Hi @tuanphan I used your CSS to add a subtitle to my portfolio/case studies page– which worked great. It currently looks like this: I'm curious if there is a way to move the to move both the title and the subtext to display over the image on rollover, with a light screen over the image (which is a .gif, if that matters). Positioned like this: As a bonus, it would be amazing if the text could animate in from the bottom up on rollover, with the image zoom and a light screen over the bottom ⅓ of the image (to make the white text pop), but that might be asking too much. Thank you so much all the help and support you provide on this forum! Hi, It is possible, but require some code, if you share link to your portfolio page, I can test code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
FortWest Posted January 9 Share Posted January 9 On 1/5/2024 at 1:04 AM, tuanphan said: Hi, It is possible, but require some code, if you share link to your portfolio page, I can test code easier Thank you @tuanphan! The portfolio page is located here: https://www.fortwest.com/work The effect (screen and text reveal) I'm trying to match is on the home page (from screen shot), here: https://www.fortwest.com/ Thank you very much for your help! Link to comment
tuanphan Posted January 10 Author Share Posted January 10 On 1/9/2024 at 8:29 AM, FortWest said: Thank you @tuanphan! The portfolio page is located here: https://www.fortwest.com/work The effect (screen and text reveal) I'm trying to match is on the home page (from screen shot), here: https://www.fortwest.com/ Thank you very much for your help! Use this code to Custom CSS box .portfolio-text { position: absolute !important; bottom: 0; left: 10px; z-index: 999999; transform: translateY(65%); transition: all 0.3s ease; } .portfolio-text * { color: white !important; } a.grid-item:hover .portfolio-text { transform: translateY(0); transition: all 0.3s ease; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
FortWest Posted January 11 Share Posted January 11 On 1/9/2024 at 11:54 PM, tuanphan said: Use this code to Custom CSS box .portfolio-text { position: absolute !important; bottom: 0; left: 10px; z-index: 999999; transform: translateY(65%); transition: all 0.3s ease; } .portfolio-text * { color: white !important; } a.grid-item:hover .portfolio-text { transform: translateY(0); transition: all 0.3s ease; } Thank you, @tuanphan! This is amazing! I implemented this on the site, and it's almost exactly what I'm looking for. I adjusted the font sizes to match what I have on the home page. I think it looks great. I adjusted the left and bottom padding to put the title where I want it to be (to match the home page). However, when I did that, it starts to show the description copy. On the home page, the description copy fades in on hover (as the title moves up). Is that possible? When I adjusted the bottom padding (to get the title to match the home page example), on hover the padding on the bottom of the description text is more than I want (see screenshot). Is there a way to separate those? Lastly, is there a way to control the padding on the right side of the description text? Thank you SO much for your help! You are amazing! Link to comment
tuanphan Posted January 13 Author Share Posted January 13 On 1/12/2024 at 4:39 AM, FortWest said: Thank you, @tuanphan! This is amazing! I implemented this on the site, and it's almost exactly what I'm looking for. I adjusted the font sizes to match what I have on the home page. I think it looks great. I adjusted the left and bottom padding to put the title where I want it to be (to match the home page). However, when I did that, it starts to show the description copy. On the home page, the description copy fades in on hover (as the title moves up). Is that possible? When I adjusted the bottom padding (to get the title to match the home page example), on hover the padding on the bottom of the description text is more than I want (see screenshot). Is there a way to separate those? Lastly, is there a way to control the padding on the right side of the description text? Thank you SO much for your help! You are amazing! To make text hidden, adjust 65% in the code To adjust right padding, use this CSS under h3.portfolio-title { padding-right: 20px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
MakingWaves Posted March 11 Share Posted March 11 (edited) Great post, thanks Tuan 🙂 I've managed to adjust the title and subtitle fonts, but my client is keen for a block of colour to feature behind, as well as an underline if possible. Can you help? First image shows how it looks now, second shows how client would like it to look. TIA. https://oval-mandolin-y344.squarespace.com/projects PW: Phoebe24 Edited March 11 by MakingWaves Link to comment
tuanphan Posted March 14 Author Share Posted March 14 On 3/11/2024 at 10:39 PM, MakingWaves said: Great post, thanks Tuan 🙂 I've managed to adjust the title and subtitle fonts, but my client is keen for a block of colour to feature behind, as well as an underline if possible. Can you help? First image shows how it looks now, second shows how client would like it to look. TIA. https://oval-mandolin-y344.squarespace.com/projects PW: Phoebe24 You can use this CSS code /* Portfolio - Text over image */ .portfolio-text { margin-top: 0 !important; top: -50px; background-color: white; max-width: 700px; min-width: 350px; margin-left: auto; margin-right: auto; } @media screen and (max-width:767px) { .portfolio-text { min-width: 150px; padding-left: 10px; padding-right: 10px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TeamGoodGuys Posted June 24 Share Posted June 24 This is such a great post, Tuanphan. Thank you for putting it together. I am using your tip "#7. Add an icon next to title" to try and place an arrow (as a prompt for users to click on the one of the projects), but I cannot get it to work. I am using Portfolio Grid:Simple and version 7.1. This is my code. } /* arrow in grid title */ a.grid-item[href="https://pomegranate-haddock-wfgf.squarespace.com/work"] h3:after { content: ""; background-image: url(https://static1.squarespace.com/static/6672edd8a65dc42920c605b2/t/6678e3467cfbe72c9ab0d808/1719198534925/port-arrow.png); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 20px; height: 20px; display: block; float: right; } I have tried just using the slug as well as the full URL. I have also changed the pixels down from 50 to 30 to 20 just to see what the issue could be. None of these tweaks have worked. Any help is much appreciated. Thanks! Link to comment
tuanphan Posted June 25 Author Share Posted June 25 On 6/24/2024 at 11:42 AM, TeamGoodGuys said: This is such a great post, Tuanphan. Thank you for putting it together. I am using your tip "#7. Add an icon next to title" to try and place an arrow (as a prompt for users to click on the one of the projects), but I cannot get it to work. I am using Portfolio Grid:Simple and version 7.1. This is my code. } /* arrow in grid title */ a.grid-item[href="https://pomegranate-haddock-wfgf.squarespace.com/work"] h3:after { content: ""; background-image: url(https://static1.squarespace.com/static/6672edd8a65dc42920c605b2/t/6678e3467cfbe72c9ab0d808/1719198534925/port-arrow.png); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 20px; height: 20px; display: block; float: right; } I have tried just using the slug as well as the full URL. I have also changed the pixels down from 50 to 30 to 20 just to see what the issue could be. None of these tweaks have worked. Any help is much appreciated. Thanks! change id to a.grid-item h3:after Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Curious3791 Posted July 20 Share Posted July 20 On 3/18/2022 at 7:15 PM, tuanphan said: #9. Add “view” text when hover image Hello! Is there a way to change the "view" text when hovering over each image on the portfolio simple grid? I can't find an individual clear-cut way to call out each image in the code on that page . Here is my site. https://hypersphere-lanternfish-p6lg.squarespace.com/config/ Thanks for your help in advance and thanks for all the work putting this code up in 2022! Link to comment
tuanphan Posted July 25 Author Share Posted July 25 On 7/21/2024 at 3:30 AM, Curious3791 said: Hello! Is there a way to change the "view" text when hovering over each image on the portfolio simple grid? I can't find an individual clear-cut way to call out each image in the code on that page . Here is my site. https://hypersphere-lanternfish-p6lg.squarespace.com/config/ Thanks for your help in advance and thanks for all the work putting this code up in 2022! Add this under your code a.grid-item[href="/projects/jefferson"] .grid-image:before { content: "View jefferson" !important; } a.grid-item[href="/projects/adfire-health-site-rebrand"] .grid-image:before { content: "View adfire" !important; } Repeat similar, just replace with item url Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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