View difference between Paste ID: yHJxKcgP and bAT67Lsq
SHOW: | | - or go back to the newest paste.
1
<!--
2
[คู่มือการแก้ไขโคด]
3
- สีหลัก (สีแดง) : --vibe-primary: #c51427;
4
- สีรอง (สีเทา) :--vibe-secondary: #6d6e71;
5
6
- สีพื้นหลัง : --vibe-bg: #f2f2f2;
7
- สีตัวอักษร : --vibe-txt: #000;
8
- สีขอบ : --vibe-border: #6d6e71;
9-
<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G3vSX2.png);--vibe-pos: 50% 55%;--vibe-size: 122%;"></div>
9+
10-
<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G3S3F9.png);--vibe-pos: 70% 40%;--vibe-size: 185%;"></div>
10+
- ฟอนต์ภาษาไทย* : --vibe-fontth: 'Bai Jamjuree';
11-
<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G38NEP.png);--vibe-pos: 70% 62%;--vibe-size: 122%;"></div>
11+
* อย่าลืมเอาลิงก์ฟอนต์มาด้วย
12-
<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G38z2n.png);--vibe-pos: 70% 80%;--vibe-size: 110%;"></div>
12+
13
------------------------
14
[ส่วนแถบด้านบน]
15
ด้านซ้าย แก้ที่ <div class="vibe-topbar-item"> อันแรก
16
- รูป png : [img]https://iili.io/2E047J1.png[/img]
17-
<p>Christmas is a season of joy, a time for love, and a moment to remember the blessings we have.</p>
17+
- คำ : Vibe Journey
18
- ไม่ต้องเว้นบรรทัด วางติดกันไปเลย
19-
<div class="vibe-btn primary">Joy of Xmas</div>
19+
20-
<div class="vibe-btn">The best gift</div>
20+
ด้านขวา แก้ที่ <div class="vibe-topbar-item"> อันที่สอง
21
- เลือกไอคอนจาก https://fontawesome.com/search มาวางได้เลย
22
- ไม่ต้องเว้นบรรทัด วางติดกันไปเลย
23-
<p>กลับมาให้หายคิดถึงอีกครั้งกับกิจกรรมที่จะพาทุกคนไปทำความรู้จักกับตัวละครที่คุณรักมากขึ้น ไม่ว่าจะจากเวิร์สหลักหรือจากกิจกรรมใด ๆ ที่ขึ้นแท่นลูกรักมากเป็นพิเศษ !</p>
23+
24-
<p>[color=#c51427][b]Vibe Journey : Christmas Edition[/b][/color] กิจกรรมที่จะชวนทุกคนให้มาตกแต่งภาพเก้าช่องด้วยรูปอะไรก็ได้ ขอแค่เกี่ยวข้องกับตัวละครของคุณและอยู่ในธีมคริสต์มาสก็เป็นพอ ! อย่าลืมใส่คำอธิบายเล็ก ๆ น้อย ๆ ไม่เกิน 70 คำไว้ด้วยนะ คนอื่นที่แวะเวียนมาเล่นจะได้รู้จักคุณมากขึ้นยังไงล่ะ</p>
24+
------------------------
25-
<p>ฟังดูง่ายใช่ไหม งั้นมาเริ่มแชร์ไวบ์ของตัวละครพวกคุณกันเลย</p>
25+
[ส่วนเฮด]
26
รูป 4 ช่อง : --vibe-pic: url(--ลิงก์รูป--);
27
28
ส่วนข้อความด้านขวา
29-
[*]ทำภาพไวบ์ของตัวละครในรูปแบบ 9 ช่อง โดยจะใช้ภาพแบบไหนก็ได้ที่เกี่ยวข้องกับตัวละครในธีม Christmas
29+
- โลโก้กิจ : [img]https://iili.io/2GfP37V.png[/img] (รูปขนาด 500px ไม่เว้นขอบ)
30-
[*]เขียนคำอธิบายสำหรับภาพไวบ์ตัวละคร ไม่เกิน 70 คำ
30+
- ข้อความสักอย่าง แก้ใน <p></p>
31-
[*]ผู้เล่นจะทำกี่ตัวละครก็ได้ ไม่จำกัด
31+
- ปุ่มมีสี : จะมีชื่อคลาส primary
32-
[*]ใช้โคดของกิจกรรมเท่านั้น
32+
33
------------------------
34
[ส่วนเนื้อหา]
35
- หัวข้อ (ตัวไม่ใหญ่มาก ตัวหนา สีตามสีหลัก) ใช้ <h3>หัวข้อ</h3> เวลาใช้ให้เว้นบรรทัดว่างข้างบนไว้ 1 บรรทัดจะห่างพอดี
36
- เนื้อหาเป็นย่อหน้า ใส่ใน <p></p> ถ้าจะเพิ่มย่อหน้าก็ก๊อปวางเพิ่ม ถ้าไม่อยากเว้นย่อหน้าข้อความก็พิมพ์ข้อความปกติได้เลยไม่ต้องใช้ <p></p>
37-
[*]ผู้เข้าร่วมทุกคนจะได้รับ เงินรางวัล 50 ดอลลาร์ และ คริสตัลคะแนน 1 ชิ้น [b][color=#c51427]*[/color][/b]
37+
38-
[*]ผู้เข้าร่วมสามารถลงชื่อขอรับแบนเนอร์ประจำกิจกรรมได้ในดิสคอร์ด
38+
- นอกนั้นใช้เครื่องมือปกติได้เลย
39
40-
[align=center][b][color=#c51427]* หากมีผู้เข้าร่วมเกินจำนวน ทางผู้จัดจะทำการสุ่มคริสตัลให้ผู้เข้าร่วมกิจกรรม[/color][/b][/align]
40+
------------------------
41
[เพลงประกอบกิจ]
42-
<h3>โคดส่งกิจกรรม :</h3>
42+
43-
<details><summary>
43+
-->
44-
[align=center][color=#888888](คลิกที่รูปเพื่อรับโคด)[/color]
44+
45-
<img src="https://iili.io/2Gf99VV.png" style="width: 600px;max-width: 100%;">[/align]
45+
46-
</summary>
46+
47-
<h3>สิ่งที่แก้ไขได้</h3>
47+
48
<div class="vibe-topbar-item">[img]https://iili.io/2E047J1.png[/img]Vibe Journey</div>
49-
[*][b]สีหลัก[/b] (สำหรับส่วนชื่อ) [b]:[/b]  [font=monospace][color=#6d6e71]--vibe-primary: #c51427;[/color][/font]
49+
50-
[*][b]สีพื้นหลัง :[/b] [font=monospace][color=#6d6e71]--vibe-bg: #f2f2f2;[/color][/font]
50+
51-
[*][b]สีตัวอักษร :[/b] [font=monospace][color=#6d6e71]--vibe-txt: #000;[/color][/font]
51+
52-
[*][b]ฟอนต์ภาษาไทย[color=#c51427]*[/color] :[/b] [font=monospace][color=#6d6e71]--vibe-fontth: 'Bai Jamjuree';[/color][/font]
52+
53-
[*][b]ฟอนต์ภาษาอังกฤษ[color=#c51427]*[/color][/b] (สำหรับส่วนชื่อ) [b]:[/b] [font=monospace][color=#6d6e71]--vibe-fonten: 'Bai Jamjuree';[/color][/font]
53+
<div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป1--);"></div>
54
<div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป2--);"></div>
55-
[b][color=#c51427]* อย่าลืมแนบลิงก์ฟอนต์มาด้วย[/color][/b]
55+
<div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป3--);"></div>
56
<div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป4--);"></div>
57-
[b][color=#c51427]หมายเหตุ :[/color][/b] เพื่อไม่ให้ยากต่อการแก้ไขโคด ควรตัดรูปเป็นจตุรัสให้เรียบร้อย
57+
58
<div class="vibe-details">
59
[img]https://iili.io/2GfP37V.png[/img]
60
<hr>
61-
[*][b]ขยับตำแหน่งรูป :[/b] [font=monospace][color=#6d6e71]เพิ่ม --vibe-pos: 50% 50%; ต่อท้ายลิงก์รูปที่ต้องการปรับ[/color][/font]
61+
<p>--คำโปรย--</p>
62
<div class="vibe-btn-group">
63-
[*][b]ขยับซ้ายขวา :[/b] [font=monospace][color=#6d6e71]เพิ่ม/ลดเลข 50% ตัวหน้า[/color][/font]
63+
<div class="vibe-btn primary">--ปุ่มมีสี--</div>
64-
[*][b]ขยับขึ้นลง :[/b] [font=monospace][color=#6d6e71]เพิ่ม/ลดเลข 50% ตัวหลัง[/color][/font]
64+
<div class="vibe-btn">--ปุ่มไม่มีสี--</div>
65
</div></div></div>
66
<div class="vibe-content">
67
<p>--ย่อหน้า 1--</p>
68
<p>--ย่อหน้า 2--</p>
69-
[*][b]ปรับขนาดรูปในวงกลม :[/b] [font=monospace][color=#6d6e71]เพิ่ม --vibe-size: 100%; ต่อท้ายลิงก์รูปที่ต้องการปรับ[/color][/font]
69+
<p>--ย่อหน้า 3--</p>
70
71-
[*][b]ขยายใหญ่ :[/b] [font=monospace][color=#6d6e71]เพิ่มเลข 100%[/color][/font]
71+
72-
[*][b]ลดขนาด :[/b] [font=monospace][color=#6d6e71]ลดเลข 100%[/color][/font]
72+
73
[*]ขั้นตอน 1
74
[*]ขั้นตอน 2
75-
[code]<link href="https://dl.dropbox.com/scl/fi/8ymzebtysl0ptvb2eyzg6/vibe.css?rlkey=5sf0s91nok670edo21icu6raf&st=a3nwl187" rel="stylesheet">
75+
[*]ขั้นตอน 3
76-
<div id="zzzcode"><a href="https://discord.com/users/625292873914515456/"></a><div class="vibe-play-container" style="--vibe-primary: #c51427;--vibe-bg: #f2f2f2;--vibe-txt: #000;--vibe-fontth: 'Bai Jamjuree';--vibe-fonten: 'Bai Jamjuree';">
76+
77-
<div class="vibe-play-pic" style="--vibe-pic: url(--ลิงก์รูปตัวละคร--);"></div>
77+
78-
<div class="vibe-play-name">--ชื่อตัวละคร--</div>
78+
79-
<p>--เขียนอธิบาย 70 คำ--</p>
79+
80-
<div class="vibe-play-img-group">
80+
[*]รางวัล 1
81-
<div id="pic1" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่1--);"></div>
81+
[*]รางวัล 2
82-
<div id="pic2" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่2--);"></div>
82+
83-
<div id="pic3" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่3--);"></div>
83+
84-
<div id="pic4" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่4--);"></div>
84+
85-
<div id="pic5" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่5--);"></div>
85+
86-
<div id="pic6" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่6--);"></div>
86+
87-
<div id="pic7" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่7--);"></div>
87+
88-
<div id="pic8" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่8--);"></div>
88+
89-
<div id="pic9" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่9--);"></div>
89+
90
</div></div></div>