#184059 gửi bởi quocviet2006
Ngày 19 Tháng 04 2017 , 01: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

Việt Tí - Chia sẻ để thành công - http://vietnho.com
#184253 gửi bởi billygoat
Ngày 03 Tháng 05 2017 , 03:55
Rất hay và hữu ích, 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 (điều này là Imposible) bởi nó đang có đến trăm bài viết, sửa sao mà cho hết.... bạn có giải pháp nào không sử dụng thể <p> không?

hết ham ~O)
Website: https://hoasenvang.vn
#184473 gửi bởi quocviet2006
Ngày 15 Tháng 05 2017 , 00:47
nếu bạn đã có sẵn data rồi thì bạn vào phần code html xem cấu trúc đoạn văn bản đầu tiên như thế nào, rồi lọc ra cái tag để chèn drop cap vào (có thể là div, p hay span, ...), mình nghĩ tất cả các bài viết của 1 site đều viết dưới dạng giống nhau hết

Việt Tí - Chia sẻ để thành công - http://vietnho.com