Coding location of Meta Data Position

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)

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)

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

Or moving the entire content below the image?

@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.

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.

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

@bangank36 did not work 😞

3 minutes ago, ThisWayToFabulous said:

@bangank36 did not work 😞

Just updated to fix, kindly try again

@bangank36 YES that worked! Is there a way for it to also:

1. be centered under the image
2. be much smaller
3. be #edebeb
4. have a bullet between instead of a comma (this is low priority but curious if its doable.

@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;
}}