ปรับปรุงส่วน code , quote ให้ดูเก๋ไก๋ ]

ผู้เขียน หัวข้อ: ปรับปรุงส่วน code , quote ให้ดูเก๋ไก๋  (อ่าน 255 ครั้ง)

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

DEKTAI2U.COM

  • Administrator
  • เด็กมัธยม
  • *****
  • ออฟไลน์
    Level and Hp Level 17 : Exp 15%
    HP: 3.1%


    • ดูรายละเอียด
ปรับปรุงส่วน code , quote ให้ดูเก๋ไก๋
« เมื่อ: วันที่ 20 กุมภาพันธ์ 2016 เวลา 14:53:51 น. »
ไฟล์ Style.css
หาส่วนนี้

โค๊ด: [Select]
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #D7DAEC;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

เอาแทนที่หา

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

/* A code block - maybe even PHP ;). */
.code
{
background: #fff url(images/bg-code.gif) top 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;
}

จุดสังเกตุที่คุณต้องแก้ไขเพิ่ม
background: #fff url(images/bg-code.gif) top repeat;  คือภาพพื้นหลัง  สร้างภาพพื้นหลังตามที่ต้องการ ชื่อ bg-code.gif
การกำหนดขนาดของภาพนั้น  ก็แล้วแต่คณต้องการ  แต่น่าจะเป็น 200x100 px. 
แล้วควร save เป็นไฟล์ .gif  เพื่อการเรียกใช้เร็ว


สวัสดีคุณ ผู้เยี่ยมชม เข้าเว็บไซต์ DEKTAI2U.COM
Programming System & IT ZONE