Agregando estilo en línea a componentes
Estoy intentando actualizar algunos componentes en AEM para permitir estilos en línea. Por ejemplo, tengo un componente llamado “Row-Dual Column” y estoy perdido en cómo permitir los estilos en línea para este componente. El html de “Row-Dual Column” consiste en:
El código en texto:
<table class="ac_dualColumn" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100% !important;">
<tr>
<td valign="top" id="ac-column-left-cell" class="ac-content-cell ac-column-cell" width="50%" style="width: 50%; padding-right: 10px;">
<div style="margin-bottom: 20px;">
<div data-sly-resource="${'parLeft' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap=""></div>
</div>
</td>
<td>
</td><td valign=""top"" id=""ac-column-right-cell"" class=""ac-content-cell" ac-column-cell"="" width=""50%"" style=""width:" 50%;="" padding-left:="" 10px;"="">
<div style="margin-bottom: 20px;">
<div data-sly-resource="${'parRight' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap=""></div>
</div>
</td>
</tr>
</table>
Si este problema es demasiado para escribir, me encantaría comunicarme por teléfono o correo electrónico.
Gracias.
davy.ai
Para permitir los estilos en línea para el componente Row-Dual Column en AEM, deberá realizar cambios en el código HTML del componente.
<
table> y agregue el siguiente código dentro del valor del atributo:
style="border-collapse: collapse; width: 100% !important; **all: initial;**"
.style="width: 50%; padding-right: 10px; **all: initial;**"
ystyle="width: 50%; padding-left: 10px; **all: initial;**"
.En las etiquetas
<
div> dentro de las etiquetas
style="margin-bottom: 20px; **all: initial;**"
.Al agregar
all: initial;
a los atributos de estilo, se reinician todos los estilos existentes y se permite el uso de estilos en línea.Después de realizar estos cambios y guardar el componente, ahora debería poder utilizar estilos en línea para el componente Row-Dual Column en AEM.