Tạo drop cap cho bài viết trong nukeviet

Thứ tư - 19/04/2017 01:39

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.

Để 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, ...).

Tạo drop cap trong nukeviet

 

- 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).

Tạo drop cap nukeviet

 

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ử.

Tạo drop cap nukeviet

 

Tác giả bài viết: S.C.L

Xin giữ lại nguồn http://songchamlai.com khi đăng lại nội dung từ bài viết này !

Bạn có thích bài viết này không ? Hãy like bài viết này hoặc chia sẻ bài viết đến bạn bè. Mọi ý kiến đóng góp hay thắc mắc bạn có thể Liên hệ hoặc tham gia Bình luận bên dưới.

Chân thành cảm ơn !

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Mã bảo mật   
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây