PoppyShotts Posted July 20, 2022 Posted July 20, 2022 Site URL: https://harmonica-silver-l6sn.squarespace.com/diary/le-nozze-di-figaro-mozart-glyndebourne Hello! I'm working in Brine template (Squarespace 7.0) Link: https://harmonica-silver-l6sn.squarespace.com/diary/le-nozze-di-figaro-mozart-glyndebourne Password: lottie I have two requests: 1) My client wants me to remove the text "earlier event" and "later event" and just have dates. Does anyone know any CSS that could do that? I would be very appreciative! See image below. 2) My client wants the sources for the quotes to be pink. My hex code for this is #FF23FF. See screenshot for what I mean (OPERA MAGAZINE to be #FF23FF). Does anyone have any CSS for this that would work in the Brine template? Thank you so much in advance. (See screenshot below) Many thanks! Poppy
tuanphan Posted July 21, 2022 Posted July 21, 2022 #2. Can you share link to a page where we can see quote? #1. Add to Diary Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".eventitem-pager-date").html(function() { return $(this).html().replace("Earlier Event:", ""); }); $(".eventitem-pager-date").html(function() { return $(this).html().replace("Later Event:", ""); }); }); </script> 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!)
PoppyShotts Posted July 23, 2022 Author Posted July 23, 2022 Thank you so much! That is so helpful. I have sorted the colour for the quote source now. My client is on the personal plan and doesn't want to pay for the business plan (which we need for the header injection). Instead of removing the text, do you know any CSS to make just the text "earlier event" and "later event" pink (hex code: #FA31FA)? Many thanks in advance! Poppy
tuanphan Posted July 23, 2022 Posted July 23, 2022 Text - Date in same tag, so there is no way to target text only. Try adding to Design > Custom CSS /* testing code */ .eventitem-pager>div { overflow: hidden; } .eventitem-pager-older .eventitem-pager-date { margin-left: -125px; } .eventitem-page-newer .eventitem-pager-date { transform: rotate(88deg); display: block; } .eventitem-pager-newer .eventitem-pager-date { text-align: left; margin-left: -125px; } @media screen and (max-width:640px) { .eventitem-pager-older .eventitem-pager-date { margin-left: -100px; } .eventitem-pager-newer .eventitem-pager-date { margin-left: -90px; }} 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment