如何为一种类型的所有 Portlet 应用高级样式

Question

我想将我的资产发布者 portlet 的高级样式应用到所有已创建和将在功能中创建的实例。（我想更新文档预览的宽度而不是 portlet 的宽度）这是我的代码：

.yui3-dd-draggable.yui3-resize{
width: 75% !important;
}

我这样试过

.portlet-borderless.portlet-asset-publisher.yui3-dd-draggable.yui3-resize{
width: 75% !important;
}

或

.portlet-borderless.portlet-asset-publisher. yui3-dd-draggable.yui3-resize{
width: 75% !important;
}

或

.portlet-borderless.portlet-asset-publisher
.yui3-dd-draggable.yui3-resize{
width: 75% !important;
}
}

或

.yui3-dd-draggable.yui3-resize{
.portlet-borderless.portlet-asset-publisher
width: 75% !important;
}
}

或所有这些变体，但使用 .portlet-borderless.portlet-document-library 而不是 .portlet-borderless.portlet-asset-publisher 但没有成功。

那么您有什么建议可以让我的 css 默认为我站点中的所有资产发布者 portlet 吗？

Answer 1

默认情况下，所有 Asset Publisher 实例都在包装 div 元素中使用此 class，如平台 liferay-portlet.xml:

中所指定

<portlet>
    <portlet-name>101</portlet-name>
    ...
    <css-class-wrapper>portlet-asset-publisher</css-class-wrapper>
    ...
</portlet>

每个 Asset Publisher 实例的样式

CSS 选择器 .portlet-asset-publisher 就够了。

.portlet-asset-publisher {
    width: 75% !important;
}

仅资产详细信息的样式

默认情况下，Liferay 将资产内容包装为 div 和 asset-full-content class。

.portlet-asset-publisher.asset-full-content {
    width: 75% !important;
}

如果您需要更多控制

列表和详细信息都可以使用 ADT 模板或 JSP 挂钩进行自定义。如果您需要完全控制 HTML 输出，我建议为列表实施自定义 ADT 模板（参见 Rich Summary) and custom display style for the detail (ie. JSP hook - in LR 6.2, the detail still cannot be customized with ADT; see example）。

如何为一种类型的所有 Portlet 应用高级样式

How to apply advanced styling for all portlets of one kind

css

liferay

portlet