Jump to content

Title Above Masonry Grid & Custom Bulletpoints

Recommended Posts

Posted (edited)

Hi! I'm trying to add a title to my Gallery, and I've been able to do it okay, but I want it to look like the animated title for my desktop version, and I'm not seeing any way to edit the text to do so.

  • In the below image, you'll see "Our Work" with a green drawn circle animation (this is what I want) and then "Our Work" below it that is plain. How do I make the plain look like the animated version?
  • Furthermore, I've installed custom bullets (image type) via CSS. However, I'm still seeing the standard dot bullet points intermittently while I'm editing. Is this behavior normal or is there a way to prevent it?

@tuanphan Maybe you have some ideas?

 

Site URL: https://springtail-coyote-2gnb.squarespace.com/home

Site Password: squarespacehelp

 

Gallery Title Code:

section[data-section-id="6653662cc2a07e35f42e6d12"] .content-wrapper:before {
  content: '';
  color:#000;
  text-align: center;
  padding: 40px 0;
  font-size: 2em;
}
section[data-section-id="6653662cc2a07e35f42e6d12"] .content-wrapper {
  flex-direction: column;  
}

section[data-section-id="6653662cc2a07e35f42e6d12"]::before {
  content: 'Our Work';
  color:#000;
  font-size: 4.5em;
  font-weight: 700;
  display:block;
  width:100%;
  height:100px;
  position: absolute;
  top:0;
  z-index:1;
  margin:auto;
  text-align:center;
  line-height: 80px

 

Bulletpoint Code:

ul[data-rte-list] li>*:first-child::before {
    content: "";
}

#block-f93d5a1914d70fd60541, #block-yui_3_17_2_1_1716681074846_60832  ul, li {
  list-style-type: none;
}

#block-212501fe4e660f6a5dfb,#block-yui_3_17_2_1_1716681074846_60832   ul, li {
  list-style-type: none;}
  
#block-212501fe4e660f6a5dfb
.sqs-block-content li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }

#block-f93d5a1914d70fd60541 .sqs-block-content li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }

#block-c156a929be894344c15b .sqs-block-content li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }

.accordion-item__description li:before {
    content: '';
    display: block;
    height: 30px;
    position: relative;
    top: 38px;
    left: -40px;
    width: 30px;
    background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png);
    background-size: contain;
    margin-right: 5px;
  }


li(inset a right-pointing angled bracket here)*:first-child::before{content:"https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png"!important}

 

Screenshot 2024-05-26 at 10.07.47 AM.png

Edited by wildflowertides
URL Update
Link to comment
  • Replies 1
  • Views 413
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.