Home Webboard ArticlesKnowledges  
ข่าวประกาศ:

:: กติกา มารยาท ในการใช้งานเว็บบอร์ด ::
กรุณากรอกอีเมล์จริงในการสมัคร และรับอีเมล์ยืนยันเพื่อใช้งานในบอร์ด

ผู้เขียน หัวข้อ: มาทำให้กรอบ Quote และ Code ดูมีชีวิตชีวาขึ้นกันเถอะ  (อ่าน 20414 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ LittleCat

  • ไม่เต็มบาท
  • Administrator
  • *
  • ID : 2
  • กระทู้: 1608
  • เห็นด้วย&ขอบคุณ: 436
  • ตามโลกไม่ทัน
    • บอร์ดแมวเมา
เครดิต  HoLY CoMM[แอท]nDo
ที่มา  www.zone-it.com


ผลที่ได้จะออกมาเป็นดังภาพ


• ทำภาพพื้นหลังชื่อ bg-code.png และ bg-quote.png แล้วนำไปไว้ที่โฟลเดอร์ Themes/<ธีมที่ใช้>/images ของ Theme นั้นๆ
• เปิดไฟล์ Themes/<ธีมที่ใช้>/style.css
• ค้นหาโค้ด

โค๊ด: [Select]
/* A quote, perhaps from another post. */
.quote
{
background: #fff url(images/bg-quote-r.png) top right no-repeat;
color: #000000;
background-color: white;
border: 1px solid #00B7FF;
margin: 1px;
padding: 3px;
font-size: 9pt;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
background: #fff url(images/bg-code-r.png) top right no-repeat;
color: #000000;
background-color: white;
font-family: "consolas", "courier new", "times new roman", monospace;
font-size: 9pt;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid orange;
margin: 1px auto 1px auto;
padding: 2px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 30 lines, and just show a scrollbar. */
max-height: 30em;
}
.code pre {
font: 13px "Consolas", "courier new", monospace;
}

/* Quote: Code: */
.quoteheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:#00B7FF;
text-align: left;
}

.codeheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:orange;
text-align: left;
}

• นำโค้ดนี้ไปวางทับทั้งหมด
โค๊ด: [Select]
/* A quote, perhaps from another post. */
.quote
{
background: #fff url(images/bg-quote.png) top left no-repeat;
color: #000000;
background-color: white;
border: 1px solid #00B7FF;
margin: 1px;
padding: 3px;
font-size: 9pt;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
background: #fff url(images/bg-code.png) top left no-repeat;
color: #000000;
background-color: white;
font-family: "consolas", "courier new", "times new roman", monospace;
font-size: 9pt;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid orange;
margin: 1px auto 1px auto;
padding: 2px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 30 lines, and just show a scrollbar. */
max-height: 30em;
}
.code pre {
font: 13px "Consolas", "courier new", monospace;
}
/* The "Quote:" and "Code:" header parts... */
.quoteheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:#00B7FF;
text-align: left;
}

.codeheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:orange;
text-align: left;
}

Note1: เราสามารถเปลี่ยนสีเส้นขอบและสีตัวอักษรของ Quote และ Code ให้สอดคล้องกับภาพที่จะทำขึ้นมาได้โดยจะแก้อยู่ 2 ส่วนคือ
ส่วนที่ 1 แก้ไขที่ .quote และ .code ที่บรรทัด
border: 1px solid <สีที่ต้องการ>;
ส่วนที่ 2 แก้ไขที่ .quoteheader และ .codeheader ที่บรรทัด
color:<สีที่ต้องการ>;

ซึ่งตรงที่เน้นสีแดงเราสามารถแก้ไขสีให้เป็นไปตามที่เราต้องการได้

Note2: ส่วนของภาพพื้นหลัง เราสามารถกำหนดให้ชิดขอบซ้ายหรือขอบขวาได้โดยให้แก้ไขที่
background: #fff url(images/bg-quote.png) top left no-repeat;

ซึ่งตรงที่เน้นสีแดงเราสามารถแก้ไขตำแหน่งตามความเหมาะสมดังนี้
left = ชิดซ้าย
right = ชิดขวา

ซึ่งภาพ Screenshot ที่ผมนำมาลงไว้ เป็นการทำให้ภาพชิดขอบขวา ถังนั้นจึงต้องปรับเป็นดังนี้
background: #fff url(images/bg-quote.png) top right no-repeat;

ทิ้งท้าย: เราสามารถที่จะใช้สีพื้นหลังแทนการใช้ภาพพื้นหลังแทนได้ หากคิดว่าไม่อยากใช้ภาพเป็นพื้นหลัง
ให้เราลบบรรทัด background: ของทั้ง .quote และ .code ออกไป
แล้วแก้ไขสีที่ background-color: <สีที่ต้องการ>; เป็นสีที่เราต้องการครับ



ตัวอย่าง

« แก้ไขครั้งสุดท้าย: 09 พฤศจิกายน 2551, 15:22:32 น. โดย เซียวเหล่งนึ่ง แห่งสำนักสุสานโบราณ »


อย่าคิดว่าตนเองเก่ง อย่าคิดว่าคนอื่นขาดตนเองไม่ได้ -- หลักการในการทำงานของแมวขี้เมา

kaikimao

  • บุคคลทั่วไป
Re: มาทำให้กรอบ Quote และ Code ดูมีชีวิตชีวาขึ้นกันเถอะ
« ตอบกลับ #1 เมื่อ: 09 พฤศจิกายน 2551, 11:20:06 น. »
สีเหมือนหวานเย็น น่ากิน  :smitten-1:

ออฟไลน์ LittleCat

  • ไม่เต็มบาท
  • Administrator
  • *
  • ID : 2
  • กระทู้: 1608
  • เห็นด้วย&ขอบคุณ: 436
  • ตามโลกไม่ทัน
    • บอร์ดแมวเมา
Re: มาทำให้กรอบ Quote และ Code ดูมีชีวิตชีวาขึ้นกันเถอะ
« ตอบกลับ #2 เมื่อ: 09 พฤศจิกายน 2551, 11:25:36 น. »

ของป้าเซียวฯ เขาทำมาฝากหนะ อิอิ
 :smitten-1:
อย่าคิดว่าตนเองเก่ง อย่าคิดว่าคนอื่นขาดตนเองไม่ได้ -- หลักการในการทำงานของแมวขี้เมา

ออฟไลน์ ก๊วนกวน

  • Just Staff
  • *
  • ID : 1564
  • กระทู้: 402
  • เห็นด้วย&ขอบคุณ: 21
    • pop music box
 :help: :help: :help:  ทำแล้วครับ แต่ติดปัญหาคือที่บร์อด
ไม่แสดงผลอ้างถึงครับ มีวิธีไหนทำให้มีอ้างถึงได้ครับ
 ((เป็นทุกบร์อดที่ทำเลยครับ ไม่ได้ไปทำอะไรเลยอัพขึ้นไปก็เป็นเลยครับ))
ขอบคุณครับ   :adore: :adore:
จงเต้น  โดยคิดว่าไม่มีใครมองอยู่
จงรัก    โดยคิดว่าจะไม่ได้รับความเจ็บปวดเลยซักครั้ง
จงร้องเพลง  โดยคิดว่าไม่มีใครกำลังฟังอยู่
จงทำงาน     โดยคิดว่าไม่ต้องการเงิน
จงใช้ชีวิต     โดยคิดว่าวันนี้เป็นวันสุดท้าย >> Series :: เรื่อง My Name is Kim Sam Soon

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • ID : 8
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2150
    • SMFjusthost.com
เพราะแต่เดิมทีบอร์ดไม่มีอ้างถึง เพื่อป้องกันการก็อบลิงก์แฟลชหนะสิ

ทีนี้ต้องดูว่าเอาไฟล์ที่โหลดมาใหม่อัพทับขึ้นไปได้ไหม (อย่าลืมแบ็คอัพ)

ออฟไลน์ ก๊วนกวน

  • Just Staff
  • *
  • ID : 1564
  • กระทู้: 402
  • เห็นด้วย&ขอบคุณ: 21
    • pop music box
เพราะแต่เดิมทีบอร์ดไม่มีอ้างถึง เพื่อป้องกันการก็อบลิงก์แฟลชหนะสิ

ทีนี้ต้องดูว่าเอาไฟล์ที่โหลดมาใหม่อัพทับขึ้นไปได้ไหม (อย่าลืมแบ็คอัพ)

แล้วทำไมบร์อด smf 1.1.7 โหลดและอัพใหม่เลยยังเป็นครับ
 ตามไปดูไฟล์ที่น่าสงสัย ก็ไม่ได้แก้ครับ  ไฟลฺนี้ครับ Display.template.php
ก็ไม่ได้แก้อะไรเลยครับ
จงเต้น  โดยคิดว่าไม่มีใครมองอยู่
จงรัก    โดยคิดว่าจะไม่ได้รับความเจ็บปวดเลยซักครั้ง
จงร้องเพลง  โดยคิดว่าไม่มีใครกำลังฟังอยู่
จงทำงาน     โดยคิดว่าไม่ต้องการเงิน
จงใช้ชีวิต     โดยคิดว่าวันนี้เป็นวันสุดท้าย >> Series :: เรื่อง My Name is Kim Sam Soon

ออฟไลน์ เซียวเหล่งนึ่งฯ

  • Global Moderator
  • *
  • ID : 8
  • กระทู้: 5547
  • เห็นด้วย&ขอบคุณ: 2150
    • SMFjusthost.com
แล้วถ้าทำบอร์ดใหม่เลยล่ะ 
โหลดไฟล์ล่าสุด+สร้างฐานข้อมูลใหม่

ออฟไลน์ ก๊วนกวน

  • Just Staff
  • *
  • ID : 1564
  • กระทู้: 402
  • เห็นด้วย&ขอบคุณ: 21
    • pop music box
แล้วถ้าทำบอร์ดใหม่เลยล่ะ 
โหลดไฟล์ล่าสุด+สร้างฐานข้อมูลใหม่


 :razz: :razz:จ๊ากกกกกก !!!!! แล้วมีวิธีทำให้อ้างถึงเห็นเฉพาะผู้ัดูแลไหมครับ
ไปลองมาแล้วครับโหลดไฟล์ล่าสุด+สร้างฐานข้อมูลใหม่ สามารถใช้อ้างถึงได้ครับ
555+ แสดงว่ามีคนไปเอาออกครับ  หาวิธีที่ทำอ้างถึงให้เห็นเฉพาะผู้ดูแลได้ไหมครับ


มีอีกข้อครับ คือว่าชอบนะครับ
ถ้าจะทำให้เวลาตั้งกระทู้เป็นกล่องและใส่ภาพ แบบนี้ได้นะครับ พี่ว่ามีวิธีไหมครับ
555+ สวยดีครับ



« แก้ไขครั้งสุดท้าย: 21 มกราคม 2552, 01:45:02 น. โดย ก๊วนกวน »
จงเต้น  โดยคิดว่าไม่มีใครมองอยู่
จงรัก    โดยคิดว่าจะไม่ได้รับความเจ็บปวดเลยซักครั้ง
จงร้องเพลง  โดยคิดว่าไม่มีใครกำลังฟังอยู่
จงทำงาน     โดยคิดว่าไม่ต้องการเงิน
จงใช้ชีวิต     โดยคิดว่าวันนี้เป็นวันสุดท้าย >> Series :: เรื่อง My Name is Kim Sam Soon

ออฟไลน์ bomb88

  • Ju
  • *
  • ID : 4894
  • กระทู้: 1
  • เห็นด้วย&ขอบคุณ: 2
เครดิต  HoLY CoMM[แอท]nDo
ที่มา  newbielink:http://www.zone-it.com [nonactive]


ผลที่ได้จะออกมาเป็นดังภาพ


• ทำภาพพื้นหลังชื่อ bg-code.png และ bg-quote.png แล้วนำไปไว้ที่โฟลเดอร์ Themes/<ธีมที่ใช้>/images ของ Theme นั้นๆ
• เปิดไฟล์ Themes/<ธีมที่ใช้>/style.css
• ค้นหาโค้ด

โค๊ด: newbielink:javascript:void(0); [nonactive]
/* A quote, perhaps from another post. */
.quote
{
background: #fff url(images/bg-quote-r.png) top right no-repeat;
color: #000000;
background-color: white;
border: 1px solid #00B7FF;
margin: 1px;
padding: 3px;
font-size: 9pt;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
background: #fff url(images/bg-code-r.png) top right no-repeat;
color: #000000;
background-color: white;
font-family: "consolas", "courier new", "times new roman", monospace;
font-size: 9pt;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid orange;
margin: 1px auto 1px auto;
padding: 2px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 30 lines, and just show a scrollbar. */
max-height: 30em;
}
.code pre {
font: 13px "Consolas", "courier new", monospace;
}

/* Quote: Code: */
.quoteheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:#00B7FF;
text-align: left;
}

.codeheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:orange;
text-align: left;
}

• นำโค้ดนี้ไปวางทับทั้งหมด
โค๊ด: newbielink:javascript:void(0); [nonactive]
/* A quote, perhaps from another post. */
.quote
{
background: #fff url(images/bg-quote.png) top left no-repeat;
color: #000000;
background-color: white;
border: 1px solid #00B7FF;
margin: 1px;
padding: 3px;
font-size: 9pt;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
background: #fff url(images/bg-code.png) top left no-repeat;
color: #000000;
background-color: white;
font-family: "consolas", "courier new", "times new roman", monospace;
font-size: 9pt;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid orange;
margin: 1px auto 1px auto;
padding: 2px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 30 lines, and just show a scrollbar. */
max-height: 30em;
}
.code pre {
font: 13px "Consolas", "courier new", monospace;
}
/* The "Quote:" and "Code:" header parts... */
.quoteheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:#00B7FF;
text-align: left;
}

.codeheader {
font-family: "Trebuchet MS", "Tahoma";
font-weight: bold;
color:orange;
text-align: left;
}

Note1: เราสามารถเปลี่ยนสีเส้นขอบและสีตัวอักษรของ Quote และ Code ให้สอดคล้องกับภาพที่จะทำขึ้นมาได้โดยจะแก้อยู่ 2 ส่วนคือ
ส่วนที่ 1 แก้ไขที่ .quote และ .code ที่บรรทัด
border: 1px solid <สีที่ต้องการ>;
ส่วนที่ 2 แก้ไขที่ .quoteheader และ .codeheader ที่บรรทัด
color:<สีที่ต้องการ>;

ซึ่งตรงที่เน้นสีแดงเราสามารถแก้ไขสีให้เป็นไปตามที่เราต้องการได้

Note2: ส่วนของภาพพื้นหลัง เราสามารถกำหนดให้ชิดขอบซ้ายหรือขอบขวาได้โดยให้แก้ไขที่
background: #fff url(images/bg-quote.png) top left no-repeat;

ซึ่งตรงที่เน้นสีแดงเราสามารถแก้ไขตำแหน่งตามความเหมาะสมดังนี้
left = ชิดซ้าย
right = ชิดขวา

ซึ่งภาพ Screenshot ที่ผมนำมาลงไว้ เป็นการทำให้ภาพชิดขอบขวา ถังนั้นจึงต้องปรับเป็นดังนี้
background: #fff url(images/bg-quote.png) top right no-repeat;

ทิ้งท้าย: เราสามารถที่จะใช้สีพื้นหลังแทนการใช้ภาพพื้นหลังแทนได้ หากคิดว่าไม่อยากใช้ภาพเป็นพื้นหลัง
ให้เราลบบรรทัด background: ของทั้ง .quote และ .code ออกไป
แล้วแก้ไขสีที่ background-color: <สีที่ต้องการ>; เป็นสีที่เราต้องการครับ



ตัวอย่าง



cs]j,g]p

ออฟไลน์ dontknowanything

  • Just
  • **
  • ID : 8282
  • กระทู้: 86
  • เห็นด้วย&ขอบคุณ: 18
  • เพศ: ชาย
  • สัตว์โลกย่อมเป็นไปตามกรรม
Re: มาทำให้กรอบ Quote และ Code ดูมีชีวิตชีวาขึ้นกันเถอะ
« ตอบกลับ #9 เมื่อ: 23 พฤศจิกายน 2553, 07:59:56 น. »
แล้วถ้ามีพวก Hide หรือ Spoiler อยู่ข้างใน Quote อีกที เวลากดดูที่ย่อไว้แบ็คกราวมันจะไม่เต็ม มีวิธีแก้ไหมครับ หรือต้องทำให้รูปมันขนาดใหญ่โครตไปเลย   :grin:

ออฟไลน์ zelda

  • Just Staff
  • *
  • ID : 5702
  • กระทู้: 474
  • เห็นด้วย&ขอบคุณ: 543
  • เพศ: ชาย
    • www.izedzine.com
Re: มาทำให้กรอบ Quote และ Code ดูมีชีวิตชีวาขึ้นกันเถอะ
« ตอบกลับ #10 เมื่อ: 23 พฤศจิกายน 2553, 12:42:46 น. »
ใช้คำสั่ง repeat สิครับ

ออฟไลน์ dontknowanything

  • Just
  • **
  • ID : 8282
  • กระทู้: 86
  • เห็นด้วย&ขอบคุณ: 18
  • เพศ: ชาย
  • สัตว์โลกย่อมเป็นไปตามกรรม
Re: มาทำให้กรอบ Quote และ Code ดูมีชีวิตชีวาขึ้นกันเถอะ
« ตอบกลับ #11 เมื่อ: 23 พฤศจิกายน 2553, 22:37:01 น. »
ใช้คำสั่ง repeat สิครับ

อืมจริงด้วย ตอนแก้โค๊ดเคยเจอแต่คำสั่ง repeat-x เลยไม่ได้เอะใจว่ามี repeat/repeat-y ด้วย  :adore:
« แก้ไขครั้งสุดท้าย: 23 พฤศจิกายน 2553, 23:05:17 น. โดย dontknowanything »

ออฟไลน์ construction

  • ตามหาความรู้
  • You Are Just Member
  • ******
  • ID : 3463
  • กระทู้: 272
  • เห็นด้วย&ขอบคุณ: 23
  • โยธาภูธรคอนหวัน
    • อบต.โพธิ์ประสาท
ลองทำแล้วพื้นหลังมาไม่เต็มกรอบครับ  http://www.civil-nkw.com/index.php



ออฟไลน์ akha

  • รักษ์อาข่าสุดห้องหัวใจ
  • Ju
  • *
  • ID : 9641
  • กระทู้: 6
  • เห็นด้วย&ขอบคุณ: 2
  • เพศ: ชาย
    • ผมอาข่า
ลองทำแล้วพื้นหลังมาไม่เต็มกรอบครับ  newbielink:http://www.civil-nkw.com/index.php [nonactive]


newbielink:http://image.ohozaa.com/show.php?id=293c511393cd5b50daa80d81634664fc [nonactive]


เปลี่ยนตรงนี้

background: #fff url(images/bg-quote.png) top left no-repeat;

จาก  no-repeat ใ้ห้เป็น repeat ดูสิครับ

 

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

ชื่อ: อีเมล์:
Verification:
ธงชาติไทยมีกี่สี ตอบเป็นเลขอารบิก:

ใส่รูปในกระทู้ คลิก >>
Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 
                                           
Back to top