วันพฤหัสบดีที่ ๒ พฤษภาคม พ.ศ. ๒๕๕๖

เมื่อต้องการทำลิงค์ Read more ให้เป็นปุ่ม ใน Wordpress

จากบทความที่แล้ว สร้างลิงค์ Read moreให้เปลี่ยนเป็นสีน้ำเงิน เพื่อให้สวยงามขึ้นอีกขั้นหนึ่ง จึงทำเป็นปุ่มแทนลิงค์ มีหน้าตาคล้ายกับปุ่มของ Facebook การแก้ไขก็แก้ที่ css file เช่นเดิมคือ style.css มีขั้นตอนดังนี้

  • login to server
  • # cd  /var/.../..../wordpress/wp-content/themes/tarski/
  • # nano style.css
แก้ไข ส่วนของบรรทัดสุดท้ายจากเดิมที่เคยทำลิงค์สีน้ำเงินเอาไว้

.entry-content a,
.entry-summary a{/* CONTINUE READING */
color: #0000FF;
font-weight:bold;
text-decoration: none;
font-size: 15px;
}

.entry-content a:hover,
.entry-summary a:hover{/* CONTINUE READING */
color: #FF00;
text-decoration: underline;
}

เอาคำสั่งตัวสีแดงออกใช้คำสั่งนี้ต่อไปนี้แทน

        -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
 background-color:#5B74A8;
 border:1px solid #29447E;
 font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
 font-size:12px;
 font-weight:700;
 padding:2px 6px;
 height:28px;
 color:#fff;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
    

  • Save ด้วยการกดปุ่ม Ctrl+O
    • 

  • ทดลอง refresh หน้าจอ wordpress
    • 









อ้างอิง http://graemeboy.com/css-buttons/

เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)