#184059 gửi bởi quocviet2006
Ngày 19 Tháng 04 2017 , 12:47

Drop cap là làm cho chữ cái đầu tiên trong bài viết to hơn những chữ cái khác, có thể dễ dàng nhận ra trên các bài báo hay trong Microsoft Word.

Drop-cap

Để tạo được Drop cap trong nukeviet, cần phân tích thẻ trong nội dung bài viết, cách làm như sau:

- Vào chi tiết một bản tin hay bài viết đã đăng.

- Chọn dòng văn bản đầu tiên, chuột phải và chọn view source (tùy theo trình duyệt mà chữ này có thể là view soure, view selection soure, ...).
 

Drop-cap

- Hoặc có thể xem trực tiếp mã nguồn trong phần viết bài ở trang quản trị website nukeviet của bạn (khi chuyển qua tab HTML trong soạn thảo).
 

Drop-cap

Trong bài viết này, sẽ hướng dẫn tạo Drop cap cho thẻ p, các thẻ khác tương tự. Nếu nội dung bài viết của bạn chưa có thẻ nào thì hãy chèn thêm thẻ p vào (ví dụ <p>nội dung đoạn văn bản đầu tiên </p>)

Các bước thực hiện như sau:

- Mở file style.css trong theme đang sử dụng (ví dụ /themes/tên-theme/css/style.css). Thêm vào cuối file dòng sau:

.panel-body .margin-bottom-lg.bodytext > p:first-child {text-indent: 0px;}
.panel-body .margin-bottom-lg.bodytext > p:first-child:first-letter {
display: block;
float:left;
font-family: 'Dancing Script', cursive;
font-size:70px;
font-weight:400;
color: #0099ff;
text-transform:uppercase;
margin: 10px 20px 0 0;
}

- Tiếp đến mở file header_only.tpl trong thư mục layout (ví dụ /themes/tên-theme/layout/header_only.tpl). Thêm vào bên trong thẻ <head> </head> dòng sau:

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">

Vậy là xong, hãy vào chi tiết bài viết để xem thử.

Demo xem thêm