Jump to content

CSS to edit "earlier event" / "later event" text on event page Brine template 7.0

Recommended Posts

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. image.thumb.png.22425fa38d95f3f93f54d0406890ff1a.png

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)

image.png.5e1e28bf0fc758963acd04820da9c0e6.png

 

Many thanks! 

Poppy 

Link to comment
  • Replies 3
  • Views 221
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

#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!)

Link to comment

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

 

 

Link to comment

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!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.