STC Posted July 10, 2023 Share Posted July 10, 2023 (edited) Could you help me with code where the banner image is the same on all event posts but not on the Events collection page? I already have the events collection page with a banner on it. Edited July 10, 2023 by STC Link to comment
tuanphan Posted July 14, 2023 Share Posted July 14, 2023 On 7/10/2023 at 8:34 AM, STC said: Could you help me with code where the banner image is the same on all event posts but not on the Events collection page? I already have the events collection page with a banner on it. What is event page url? We can check 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
STC Posted August 4, 2023 Share Posted August 4, 2023 Sorry, I didn't see your reply but I was able to fix it. Link to comment
VladaKremenovic Posted July 19 Share Posted July 19 Thank you @tuanphan and @creedon with help on this issue. I'm hoping to achieve the event page layout (attached JPEG) if possible. https://www.ontheboards.org/events/24-25/javaad-alipoor So the desire is that the banner image moves to the right of the .eventitem-column-meta in one full-width row, and the .eventitem-column-content to expand to full width below them. Another issue I foresee is that on mobile view, it should still stack as is does currently: banner image eventitem-column-meta eventitem-column-content Thank you for any help/advice you can offer. The current code relating to this layout is JavaScript <!-- Pull featured image to top of event page --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>; <script> jQuery(document).ready(function ($) { a = $('meta[property="og:image"]'); a.attr("content", a.attr("content").replace("http", "https")); var t = a.attr("content"); $('<div class="event-detail-banner"><img class="event-detail-banner-image" src="' + t + '"></div>').insertBefore("div.events-item-wrapper"); }); </script> <!--Title, Dates, Times '.event-custom-metadata--> <script> $(document).ready(function(){ $('.event-custom-metadata').insertAfter('h1.eventitem-title'); }); </script> <!--Content end buttons move to meta--> <script> $( ( ) => { const selector = '.eventitem-column-content > .sqs-grid-12 > ' + '.sqs-row > .sqs-col-12 > .sqs-row:last .sqs-block-button'; $( `<ul class="eventitem-meta event-meta event-meta-button-container"> <li class="eventitem-meta-item event-meta-item eventitem-meta-buttons"> </li> </ul>` ) .appendTo ( '.eventitem-column-meta' ); $( selector ) .appendTo ( '.eventitem-meta-buttons' ); } ); </script> <!-- end event content end buttons move to meta --> <!-- Back to event --> <script> $(document).ready(function(){ $('a.eventitem-backlink').insertAfter('.eventitem-meta-buttons') }); </script> CSS <style> /* banner image style*/ body {overflow-x:hidden;} img.event-detail-banner-image { width: 98vw; max-width: 1200px; display : flex; justify-content: center!important; } .event-detail-banner { display : flex; justify-content: center!important; }/* Meta buttons */ body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-block-horizontalrule:nth-last-of-type( 2 ), body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:last-child { display : none; } .eventitem-meta-buttons { -webkit-box-align : start; -ms-flex-align : start; align-items : flex-start; display : -webkit-box; display : -ms-flexbox; display : flex; gap : 1.5em; -webkit-box-pack : justify; -ms-flex-pack : justify; justify-content : start; margin: 0 0 3vw 0 !important; } .eventitem-meta-buttons .sqs-block-button { white-space : nowrap; } @media only screen and ( max-width : 639px ) { .eventitem-meta-buttons { -webkit-box-pack : unset; -ms-flex-pack : unset; justify-content : unset; } .events { padding-top: 6vw!important; } .eventlist-datetag { left: 10px!important; } } /* Backlink */ .eventitem-backlink { margin:0px!important;} .eventitem-column-meta { margin:0px!important;} </style> Link to comment
tuanphan Posted July 25 Share Posted July 25 On 7/20/2024 at 6:35 AM, VladaKremenovic said: Thank you @tuanphan and @creedon with help on this issue. I'm hoping to achieve the event page layout (attached JPEG) if possible. https://www.ontheboards.org/events/24-25/javaad-alipoor So the desire is that the banner image moves to the right of the .eventitem-column-meta in one full-width row, and the .eventitem-column-content to expand to full width below them. Another issue I foresee is that on mobile view, it should still stack as is does currently: banner image eventitem-column-meta eventitem-column-content Thank you for any help/advice you can offer. The current code relating to this layout is JavaScript <!-- Pull featured image to top of event page --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>; <script> jQuery(document).ready(function ($) { a = $('meta[property="og:image"]'); a.attr("content", a.attr("content").replace("http", "https")); var t = a.attr("content"); $('<div class="event-detail-banner"><img class="event-detail-banner-image" src="' + t + '"></div>').insertBefore("div.events-item-wrapper"); }); </script> <!--Title, Dates, Times '.event-custom-metadata--> <script> $(document).ready(function(){ $('.event-custom-metadata').insertAfter('h1.eventitem-title'); }); </script> <!--Content end buttons move to meta--> <script> $( ( ) => { const selector = '.eventitem-column-content > .sqs-grid-12 > ' + '.sqs-row > .sqs-col-12 > .sqs-row:last .sqs-block-button'; $( `<ul class="eventitem-meta event-meta event-meta-button-container"> <li class="eventitem-meta-item event-meta-item eventitem-meta-buttons"> </li> </ul>` ) .appendTo ( '.eventitem-column-meta' ); $( selector ) .appendTo ( '.eventitem-meta-buttons' ); } ); </script> <!-- end event content end buttons move to meta --> <!-- Back to event --> <script> $(document).ready(function(){ $('a.eventitem-backlink').insertAfter('.eventitem-meta-buttons') }); </script> CSS <style> /* banner image style*/ body {overflow-x:hidden;} img.event-detail-banner-image { width: 98vw; max-width: 1200px; display : flex; justify-content: center!important; } .event-detail-banner { display : flex; justify-content: center!important; }/* Meta buttons */ body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-block-horizontalrule:nth-last-of-type( 2 ), body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:last-child { display : none; } .eventitem-meta-buttons { -webkit-box-align : start; -ms-flex-align : start; align-items : flex-start; display : -webkit-box; display : -ms-flexbox; display : flex; gap : 1.5em; -webkit-box-pack : justify; -ms-flex-pack : justify; justify-content : start; margin: 0 0 3vw 0 !important; } .eventitem-meta-buttons .sqs-block-button { white-space : nowrap; } @media only screen and ( max-width : 639px ) { .eventitem-meta-buttons { -webkit-box-pack : unset; -ms-flex-pack : unset; justify-content : unset; } .events { padding-top: 6vw!important; } .eventlist-datetag { left: 10px!important; } } /* Backlink */ .eventitem-backlink { margin:0px!important;} .eventitem-column-meta { margin:0px!important;} </style> Don't remove any code in your current code. Use this code to bottom of Code Injection > Footer <script> $(document).ready(function(){ $('<div class="event-top-section"></div>').insertBefore('.events-item-wrapper.events-stacked-item-wrapper'); $('.eventitem-column-meta').appendTo('.event-top-section'); $('.event-detail-banner').appendTo('.event-top-section'); }); </script> <style> .event-top-section { max-width: 1200px; padding-left: 2vw; padding-right: 2vw; margin: 0 auto; display: flex; } .event-detail-banner img { width: 100% !important; } @media screen and (max-width:767px) { .event-top-section { flex-direction:column-reverse; } .event-detail-banner { margin-bottom: 20px; } } </style> 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
VladaKremenovic Posted July 31 Share Posted July 31 (edited) On 7/25/2024 at 2:55 AM, tuanphan said: Don't remove any code in your current code. Use this code to bottom of Code Injection > Footer <script> $(document).ready(function(){ $('<div class="event-top-section"></div>').insertBefore('.events-item-wrapper.events-stacked-item-wrapper'); $('.eventitem-column-meta').appendTo('.event-top-section'); $('.event-detail-banner').appendTo('.event-top-section'); }); </script> <style> .event-top-section { max-width: 1200px; padding-left: 2vw; padding-right: 2vw; margin: 0 auto; display: flex; } .event-detail-banner img { width: 100% !important; } @media screen and (max-width:767px) { .event-top-section { flex-direction:column-reverse; } .event-detail-banner { margin-bottom: 20px; } } </style> This is AMAZING @tuanphan thank you. I have a couple of clarifying questions: Is it possible to have the event-top-section be equal width as the rest of the page? When I shrink the browser window, the featured image squishes as shown in the image below. Is it possible to make the image overflow inside the wrapper and maintain height, or at least shrink equally? Lastly, is there a way to vertically center eventitem-column-meta with the image? Thank you!!! Edited July 31 by VladaKremenovic Upload image Link to comment
User1776 Posted August 27 Share Posted August 27 On 2/9/2021 at 7:55 AM, katieslee said: Site URL: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes Hello, I'm trying to customise the style of the events summary on this site, and the events pages themselves. 1. On the summary, I'd like to make the following style changes for all events: Increase the size of the title text (the custom font) Align the text to the centre of the image Change the 'learn more' link to a button 2. On all the individual events pages, I'd like to move the back link, event title & metadata to be centred above the body copy. Is this possible? Any help so appreciated! Thank you, Katie @katieslee @tuanphan @creedon Hi! I clicked on the link that @katieslee provided in this post & really like how you were able to get the left side bar to stay on the page as you scroll down. How did you do this? I saw that both you responded to this post and you've been a great help to me in the past, so I thought I would ask if either of you helped out or know how I could achieve this on my site? https://www.thepromiseofliberty.org/events/empire-rare-book-fair Link to comment
tuanphan Posted August 30 Share Posted August 30 On 8/1/2024 at 2:16 AM, VladaKremenovic said: This is AMAZING @tuanphan thank you. I have a couple of clarifying questions: Is it possible to have the event-top-section be equal width as the rest of the page? When I shrink the browser window, the featured image squishes as shown in the image below. Is it possible to make the image overflow inside the wrapper and maintain height, or at least shrink equally? Lastly, is there a way to vertically center eventitem-column-meta with the image? Thank you!!! Sorry, I missed your comment. Do you still need help with this? @User1776 You can use this code to Website Tools > Custom CSS div.eventitem-column-meta { align-self: flex-start; position: sticky; top: 50px; } } User1776 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
User1776 Posted September 4 Share Posted September 4 On 8/30/2024 at 4:15 AM, tuanphan said: Sorry, I missed your comment. Do you still need help with this? @User1776 You can use this code to Website Tools > Custom CSS div.eventitem-column-meta { align-self: flex-start; position: sticky; top: 50px; } } Thank you! Do you know how to create a box or boarder around the side bar like in this example: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep My website link is: https://www.thepromiseofliberty.org/events/empire-rare-book-fair Link to comment
tuanphan Posted September 7 Share Posted September 7 On 9/5/2024 at 3:08 AM, User1776 said: Thank you! Do you know how to create a box or boarder around the side bar like in this example: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep My website link is: https://www.thepromiseofliberty.org/events/empire-rare-book-fair You can use this code to Custom CSS div.eventitem-column-meta { background-color: #fff; padding: 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
User1776 Posted September 17 Share Posted September 17 On 8/30/2024 at 4:15 AM, tuanphan said: @User1776 You can use this code to Website Tools > Custom CSS div.eventitem-column-meta { align-self: flex-start; position: sticky; top: 50px; } } @tuanphan Hi! Thank you so much, this worked! But now the formatting is glitchy on the mobile site. Do you know how to make the info box stay on the screen as you scroll in desktop view, but then revert it back to default on mobile view? Basically, I'm asking how do I stop the info box from moving with the screen as you scroll ONLY on mobile view? This is a good example of how the info box stays on the screen as you scroll in desktop view, but then it does not on mobile view: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep My website link: https://www.thepromiseofliberty.org/events/empire-rare-book-fair Thank you so much. Link to comment
tuanphan Posted September 19 Share Posted September 19 On 9/17/2024 at 10:16 PM, User1776 said: @tuanphan Hi! Thank you so much, this worked! But now the formatting is glitchy on the mobile site. Do you know how to make the info box stay on the screen as you scroll in desktop view, but then revert it back to default on mobile view? Basically, I'm asking how do I stop the info box from moving with the screen as you scroll ONLY on mobile view? This is a good example of how the info box stays on the screen as you scroll in desktop view, but then it does not on mobile view: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep My website link: https://www.thepromiseofliberty.org/events/empire-rare-book-fair Thank you so much. Change the code to this code @media screen and (min-width:768px) { div.eventitem-column-meta { align-self: flex-start; position: sticky; top: 50px; } } 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
User1776 Posted September 19 Share Posted September 19 5 hours ago, tuanphan said: Change the code to this code @media screen and (min-width:768px) { div.eventitem-column-meta { align-self: flex-start; position: sticky; top: 50px; } } @tuanphan Thank you!! Do you know how to change the size of the info box? I'd like to make the width a bit smaller. Link to comment
tuanphan Posted September 21 Share Posted September 21 On 9/19/2024 at 10:08 PM, User1776 said: @tuanphan Thank you!! Do you know how to change the size of the info box? I'd like to make the width a bit smaller. Change it to this @media screen and (min-width:768px) { div.eventitem-column-meta { align-self: flex-start; position: sticky; top: 50px; flex: 1 0 100px !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment