Use Author CSS#

#1. Cách làm chuẩn nhất (AEM Best Practice)

Trong project mysite, cấu hình chuẩn này đã có sẵn tại:

ui.apps/src/main/content/jcr_root/apps/mysite/clientlibs/clientlib-authoring

#File .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="[cq.authoring.page,cq.authoring.editor.hook]"/>

#File css/authoring.css

/*
 * Authoring ClientLib Styles
 * Loaded exclusively in AEM Touch UI Editor (cq.authoring.page)
 */

.carousel.cq-Editable-dom--container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#2. Làm cách nào để style padding-top: 1.25rem bị gạch ngang

Trong trình duyệt (DevTools), một thuộc tính CSS sẽ bị gạch ngang khi:

1. Có một selector khác khớp vào cùng element đó.
2. Selector đó định nghĩa lại cùng thuộc tính (padding-top).
3. Selector đó có độ ưu tiên cao hơn hoặc có cờ !important.

#Selector chính xác để đè bẹp rule của Adobe

Rule gốc của Adobe trong /libs/.../internal/page.css:

.cq-Editable-dom--container, .cq-Editable-dom--container.[*] {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

Để đè và làm nó bị gạch ngang, bạn có 2 cách viết selector:

:::tabs

#Cách dùng !important (khuyên dùng)

Khuyên dùng trong authoring.css để chắc chắn 100%:

.carousel.cq-Editable-dom--container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#Cách không dùng !important

Tăng độ đặc hiệu (Specificity):

.cq-Editable-dom--container.aem-GridColumn.carousel {
    padding-top: 0;
    padding-bottom: 0;
}

Specificity của selector này là (0, 3, 0), cao hơn (0, 2, 0) của Adobe nên tự động đè gạch ngang không cần !important.

:::

#3. Tại sao trang của bạn hiện tại chưa thấy bị gạch ngang?

Qua kiểm tra trực tiếp trên instance AEM của bạn:

1. Node clientlib-authoring đã được nạp vào trang qua thẻ:

<link rel="stylesheet" href="/etc.clientlibs/mysite/clientlibs/clientlib-authoring.css" type="text/css">

2. Sau khi hard reload lại trang trong Editor, DevTools hiển thị:
   • padding-top: từ 20px (1.25rem) → 0px
   • Rule của Adobe .cq-Editable-dom--container bị gạch ngang