185113 – Timeline3

Description

• adding timeline3 style with Team Section
• view demo – password: abc
• buy me a coffee if it is useful for you

#1. Install Code

#1.1. First you need to add Section

Choose Team > Choose section with (i) icon. You need to add 3 Team sections

Make sure use Simple List

#1.2. Next, enable these options

Next, add your desired text/image

#1.3. Hover on top right of section > click Edit Section

at Anchor Link, enter word: timeline3

#1.4. Hover on page where you added Team Section > Click Gear icon

Click Advanced > Paste this code

<!-- @tuanphan - Timeline 3 -->
<style>
  section[id*="timeline3"] .user-items-list {
  	display: none;
  }
section[id*="timeline3"] .tp-timeline {
  padding: 28px 0 22px;
  background: #fff;
}

section[id*="timeline3"] .tp-section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
  font-weight: 700;
  color: #0b1220;
}

section[id*="timeline3"] .tp-viewport {
  overflow: auto;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

section[id*="timeline3"] .tp-viewport::-webkit-scrollbar {
  display: none;
}

section[id*="timeline3"] .tp-viewport.tp-dragging {
  cursor: grabbing;
  user-select: none;
}

section[id*="timeline3"] .tp-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 44px;
  align-items: end;
  padding: 0 24px;
  min-width: max-content;
}

section[id*="timeline3"] .tp-line {
  position: absolute;
  height: 2px;
  background: #d7dde7;
  left: 0;
  width: 0;
  top: 0;
  pointer-events: none;
}

section[id*="timeline3"] .tp-item {
  text-align: center;
  color: #0b1220;
  min-width: 180px;
  min-height: 150px;
}

section[id*="timeline3"] .tp-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

section[id*="timeline3"] .tp-title {
  width: 120px;
  margin: 0 auto 16px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  min-height: 2.5em;
  word-break: break-word;
}

section[id*="timeline3"] .tp-dot {
  width: 10px;
  height: 10px;
  background: #f08a24;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

</style>

<script>
(()=>{const t=(t,e)=>t?t.querySelector(e):null,e=(t,e)=>t?Array.from(t.querySelectorAll(e)):[],n=()=>{const n=document.querySelector('section[id*="timeline3"]');return!!n&&(n=>{if(document.querySelector("body.sqs-edit-mode"))return!1;const i=t(n,".user-items-list"),s=t(n,"ul.user-items-list-item-container");if(!s)return!1;const c=t(n,".list-section-title"),l=c?c.textContent.trim():"",o=e(s,"li.list-item");if(!o.length)return!1;const d=o.map((e=>{const n=t(e,".list-item-content__title"),i=t(e,"img");return{title:n?n.textContent.trim():"",src:i?i.getAttribute("data-src")||i.src:""}})),r=t(n,".tp-timeline");r&&r.remove();const a=document.createElement("div");if(a.className="tp-timeline",l){const t=document.createElement("h2");t.className="tp-section-title",t.textContent=l,a.appendChild(t)}const m=document.createElement("div");m.className="tp-viewport";const p=document.createElement("div");p.className="tp-track";const u=document.createElement("div");u.className="tp-line",p.appendChild(u),d.forEach((t=>{const e=document.createElement("div");if(e.className="tp-item",t.src){const n=document.createElement("img");n.className="tp-icon",n.src=t.src,e.appendChild(n)}const n=document.createElement("div");n.className="tp-title",n.textContent=t.title;const i=document.createElement("div");i.className="tp-dot",e.appendChild(n),e.appendChild(i),p.appendChild(e)})),m.appendChild(p),a.appendChild(m),i&&i.parentNode.insertBefore(a,i);let g,h,f=!1;const v=()=>{const t=e(p,".tp-dot");if(!t.length)return;const n=p.getBoundingClientRect(),i=t[0].getBoundingClientRect(),s=t[t.length-1].getBoundingClientRect(),c=i.left+i.width/2-n.left,l=s.left+s.width/2-n.left,o=i.top+i.height/2-n.top;u.style.left=c+"px",u.style.width=l-c+"px",u.style.top=o+"px"};return m.addEventListener("mousedown",(t=>{f=!0,m.classList.add("tp-dragging"),g=t.clientX,h=m.scrollLeft})),window.addEventListener("mousemove",(t=>{f&&(m.scrollLeft=h-(t.clientX-g),v())})),window.addEventListener("mouseup",(()=>{f=!1,m.classList.remove("tp-dragging")})),m.addEventListener("scroll",v),window.addEventListener("resize",v),setTimeout(v,500),n.classList.add("tp-sync-on"),!0})(n)};let i=0;const s=()=>{n()||i>30||(i++,setTimeout(s,300))};s()})();
</script>

#2. Customize

#2.1. To change image style, find these lines

section[id*="timeline3"] .tp-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#2.2. To change text style, find these

section[id*="timeline3"] .tp-title {
    width: 120px;
    margin: 0 auto 16px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    min-height: 2.5em;
    word-break: break-word;
}

#2.3. To change orange circle style, find these

section[id*="timeline3"] .tp-dot {
    width: 10px;
    height: 10px;
    background: #f08a24;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#2.4. To change horizontal gray line style, find these

section[id*="timeline3"] .tp-line {
    position: absolute;
    height: 2px;
    background: #d7dde7;
    left: 0;
    width: 0;
    top: 0;
    pointer-events: none;
}