Jump to content

Coding location of Meta Data Position

Recommended Posts

Site URL: https://tmha-new-site.squarespace.com/reviews

Is there by ANY CHANCE a magical way to code the meta position to be centered under the square image? Bonus points if I can also make that meta text color #EDEBEB and the pt size be only 7px with a • between the categories shown?

 

(password: tamara)

Screen Shot 2022-01-24 at 8.59.56 AM.png

Edited by ThisWayToFabulous
updated link
Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

30 minutes ago, ThisWayToFabulous said:

Site URL: https://tmha-new-site.squarespace.com/reviews

Is there by ANY CHANCE a magical way to code the meta position to be centered under the square image? Bonus points if I can also make that meta text color #EDEBEB and the pt size be only 7px with a • between the categories shown?

 

(password: tamara)

Screen Shot 2022-01-24 at 8.59.56 AM.png

Do you mean moving the signature at the bottom of image?

image.thumb.png.33193c49c83b70a000193b85d463f246.png

Or moving the entire content below the image?

image.thumb.png.c0c3d63e8cd815b11f8f2373dc165b7a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
46 minutes ago, ThisWayToFabulous said:

@bangank36 sorry for the confusion! Here's what i want moved. ONLY the "category" meta-data.

(fyi, only the first 2 reviews on this page have the categories added bc I want to know if i can do this first. Its too messy/confusing where it is right now.

Screen Shot 2022-01-24 at 8.59.56 AM.png

Try adding to Home > Settings > Advanced > Code Injection, choose footer

<script>
  //Moving meta below the image in blog Page
  (function(){
    document.addEventListener('DOMContentLoaded', () => {
      const listMetas = document.querySelectorAll('#collection-61a132e0cfdac877172cbcc6 .blog-meta-section');
      if(listMetas.length){
        listMetas.forEach(item => {
          const parentNode = item.closest('.blog-item');
          parentNode.querySelector('.blog-image-wrapper').appendChild(item);
        })
      }     
    });
  })()
</script>

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 minutes ago, ThisWayToFabulous said:

@bangank36 did not work 😞

Screen Shot 2022-01-24 at 10.29.07 AM.png

Just updated to fix, kindly try again

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@ThisWayToFabulous Try add this to Design > Custom CSS

/* reviews */
body#collection-61a132e0cfdac877172cbcc6 {
.blog-meta-section {
    text-align: center;
}

.blog-meta-section a {
    color: #edebeb !important;
    font-size: 12px !important;
}

span.blog-categories--comma {
    font-size: 0;
}

span.blog-categories--comma:before {
    content: "";
    background-color: black;
    width: 3px;
    height: 3px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-left: 5px;
    margin-right: 5px;
}}

 

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

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.