Flatsome Tips
Hướng dẫn tạo Timeline Vertical đơn giản cho Flatsome
Trong bài viết này, mình sẽ chia sẻ lại với các bạn một tip đơn giản để tạo Timeline Vertical cho Flatsome chỉ thuần với html & CSS, tùy chỉnh lại nội dung một cách dễ dàng với ux-builder
Để tại Timeline Vertical đơn giản cho Flatsome, mình chỉ sử dụng thuần HTML & CSS, và các bạn có thể dễ dàng tùy chỉnh lại nội dung với UX-Builder, các bạn tham khảo phần demo phía dưới.
6h00
Sáng sớm thức dậy – Thể dục thể thao – Sức khỏe dồi dào – Đi vào ngủ tiếp
10h00
Trời buồn trời đổ cơn mưa – Ta buồn ta ngủ từ trưa đến chiều – Ngủ xong dậy ăn cơm chiều – Ăn xong lại ngủ từ chiều đến mai
Demo với ảnh này! =))
12h00
Bồ xấu thì sợ bạn chê – Bồ đẹp thì sợ bạn mê, bạn giành – Thế nên anh mới phải đành – Làm thân trai ế giành bồ bạn anh
CSS Timeline Vertical
Đầu tiên, các bạn coppy toàn bộ phần CSS phía dưới, và dán vào khung CSS tùy chỉnh của Flatsome.
/*Timeline vertical by MyWebsite*/
.mywebsite-timeline-vertical .my-timeline{
padding-bottom: 2rem;
border-left: 2px solid var(--primary-color);
position: relative;
}
.mywebsite-timeline-vertical .my-timeline:last-child{
border: 0px;
padding-bottom: 0;
}
.mywebsite-timeline-vertical .my-timeline:before{
content:"\e01a";
font-family: fl-icons;
color: var(--primary-color);
font-size: 17pt;
width: 40px;
height: 40px;
background: white;
box-shadow: 3px 3px 0px #bab5f8;
position: absolute;
left: -22px;
top: -1px;
padding: 0 7px;
border: 2px solid var(--primary-color);
border-radius: 99px;
}
.my-timeline .my-time{
line-height: 32px;
border-radius: 4px;
margin-bottom: 10px;
padding: 4px 10px;
background: var(--primary-color);
color: #ffffff;
}
.time-section{
border: 2px solid var(--primary-color);
border-radius: 6px;
margin-left: 33px;
margin-top: -13px;
box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
}
.time-section:before{
top: 21px;
left: -10px;
border-top: 8px solid transparent;
border-right: 8px solid var(--primary-color);
border-bottom: 8px solid transparent;
position:
absolute;
content: '';
z-index: 1000;
}
.my-timeline-vertical{
padding: 16px 5px 0 25px!important;
}
.mywebsite-timeline-vertical .my-timeline:hover:before{
color: white;
background: var(--primary-color);
box-shadow: 3px 3px 0px #bab5f8;
}
.my-time p{margin-bottom:0}
/*End timeline vertical*/
HTML Timeline Vertical
Để tạo Timeline Vertical cho Flatsome, các bạn chỉ cần coppy đoạn HTML dán vào khung soạn thảo bằng HTML ngay sau khi tạo bài viết mới, sau đó chọn Edit with UX-Builder để tùy chỉnh lại phần nội dung một cách dễ dàng theo ý các bạn.
[section class="mywebsite-timeline-vertical"]
[row style="small" class="my-timeline"]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="time-section"]
[ux_text font_size="1.3" class="my-time"]
<p><strong>6h00</strong></p>
[/ux_text]
<p>Sáng sớm thức dậy - Thể dục thể thao - Sức khỏe dồi dào - Đi vào ngủ tiếp</p>
[/col]
[/row]
[row style="small" class="my-timeline"]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="time-section"]
[ux_text font_size="1.3" class="my-time"]
<p><strong>10h00</strong></p>
[/ux_text]
<p>Trời buồn trời đổ cơn mưa - Ta buồn ta ngủ từ trưa đến chiều - Ngủ xong dậy ăn cơm chiều - Ăn xong lại ngủ từ chiều đến mai</p>
[/col]
[/row]
[row style="small" class="my-timeline"]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="time-section"]
[ux_text font_size="1.3" class="my-time"]
<p><strong>12h00</strong></p>
[/ux_text]
<p>Bồ xấu thì sợ bạn chê - Bồ đẹp thì sợ bạn mê, bạn giành - Thế nên anh mới phải đành - Làm thân trai ế giành bồ bạn anh</p>
[/col]
[/row]
[/section]
Trong quá trình thực hiện, nếu có thắc mắc nào, các bạn có thể để lại bình luận cho mình phía dưới bài viết.
Chúc các bạn thành công!
Mình không hiểu cái này chỉnh sửa như thế nào ạ
Mình chưa hiểu ý bạn lắm….
Cám ơn Huy Real đã hướng dẫn code Tine line Vertical như trên
Mình có 2 phần sau muốn hỏi:
1/ Huy đang dùng css var(–primary-color) nghĩa là theo màu chủ đạo của Site, tuy nhiên do đặc thù site mình có nhiều bài viết mỗi bài viết có màu sắc chủ đạo khác nhau. Vậy mình có thể dùng code gì để tùy biến màu sắc theo mỗi chủ đề post riêng biệt?
2/ Giả sử ý 1 khó thực hiện thì nhờ Huy hướng dẫn cách chèn CSS + HTML trên vào trong một Post, thay vì hiện tại để trong custom CSS để thông qua Class trong Element.
Cám ơn Huy ^^
Theo mình cách đơn giản nhất là trong trình ux builder -> bạn chọn element “HTML” -> Thêm đoạn html css important bổ sung như ví dụ sau:
<style>
background: #fff!important; /*Thay #fff thành mã màu của bạn*/
</style>
Tương tự như thế, bạn thay lại thành mã màu nào mà bạn muốn cho từng post riêng biệt là được.
Chúc bạn thành công!
Cám ơn Huy đã phản hồi
Mình đã làm theo cách trên với Element HTML trong UX Bullder nhưng kết quả ko ra được Timeline như để trong Custom CSS ^^
Cụ thể
[ux_html label="Post 1"]
Dán CSS của Huy vào
/*Timeline vertical by MyWebsite*/
…
/*End timeline vertical*/
Dán HTML của Huy vào
[section class="mywebsite-timeline-vertical"]
…
[/section]
[/ux_html]
Mình không biết dán vậy có đúng không nhưng khi ra Frontend xem thì Nó không works….>.<
Đoạn CSS trong bài bạn cứ dán nó vào “CSS tùy chỉnh” trong “Tùy Biến”, còn đoạn “HTML Timeline Vertical” bạn dán vào khung soạn thảo “văn bản” được chọn như ảnh bên dưới trước khi bạn chỉnh sửa với ux-builder
Còn trong element HTML trong bài viết khi bạn chỉnh với ux-builder, bạn dán full đoạn dưới và chỉnh lại #mãmàu thành mã màu theo ý bạn
<style>
/*Edit màu Timeline*/
.mywebsite-timeline-vertical .my-timeline{
border-left: 2px solid #mãmàu!important;
}
.mywebsite-timeline-vertical .my-timeline:before{
color: #mãmàu!important;
border: 2px solid #mãmàu!important;
}
.my-timeline .my-time{
background: #mãmàu!important;
}
.time-section{
border: 2px solid #mãmàu!important;
}
.time-section:before{
border-right: 8px solid #mãmàu!important;
}
.mywebsite-timeline-vertical .my-timeline:hover:before{
background: #mãmàu!important;
}
</style>
Tuyệt vời! Code trên hữu ích đến 99% ^^
Cám ơn Huy rất nhiều vì đã giúp mình giải quyết được vấn đề tùy biến màu trên Time Line.
Có 1 phần nhỏ chỗ đoạn code ngay chỗ hover thì viền cái “đồng hồ TimeLine” bị trùng màu background. (code nguyên bản của Huy ban đầu không bị tình trạng này). Cụ thể đoạn này.
.mywebsite-timeline-vertical .my-timeline:hover:before{
background: #mãmàu!important;
}
Mình thêm code: color: white; vào như bên dưới
.mywebsite-timeline-vertical .my-timeline:hover:before{
color: white;
background: #mãmàu!important;
}
nhưng vẫn không tạo ra được viền màu trắng đối lập bg cho “đồng hồ timeline” ?!
Không biết mình bỏ lỡ điều >.<
Thanks Huy anyway.
Ps: mình có chụp ảnh màn hình nhưng ko biết gửi lên đây ntn ^^
Bạn thử thêm “color:white!important;” thay thế cho “color:white;” thử xem sao nhé!
Mình thử thêm “color:white!important;” vẫn không được nhưng mình vẫn cảm thấy hài lòng và biết ơn Huy.
Mình thấy ok với kết quả này.
Cám ơn Huy và trân trọng nhé.
Vậy bạn xóa dòng 14 và 57 trong đoạn css dán ở tuỳ biến đi, còn trong element html trên uxbuilder, bạn xoá important ở chỗ này:
.mywebsite-timeline-vertical .my-timeline:before{
color: #mãmàu;/*xoá important ở đây*/
border: 2px solid #mãmàu!important;
}
Vẫn giữ đoạn “color:white!important;” thay thế cho “color:white;” đã bàn trước đó là được
Hay quá b ơi, nhưng mình muốn cho nó đối xứng 2 bên cho nó đẹp thì chỉnh được không nhỉ. Chứ để căn trái nó hơi lệch
Đối xứng 2 bên thì trong thư viện Flatsome Studio có sẵn, bạn chỉ cần import vào thôi là được
Cám ơn bạn đã chia sẽ, code này mình muốn thay đổi trái phải đối xứng nhau mình làm cách nào vậy bạn.
Timeline dạng 2 bên đối xứng nhau thì Flatsome Studio đã có sẵn mẫu demo rồi, bạn chỉ cần import vào và chỉnh sửa lại là được