Widget Styles Missing after Clone

Jesse_H · ‎07-07-2022

I cloned the My Requests V2 widget but I noticed the widget style is now different than the original My Requests Widget.

When I inspect the page to compare the original widget vs the cloned one I notice there are unique styles applied to the original widget like:

.v8cc0df25875023000f220cf888cb0bb5 .panel.b .panel-heading .panel-title {

font-size: 2.4rem;
font-weight: 600;

Jesse_H · ‎07-07-2022

The page wasn't copied. I think there is a CSS Include from the EC Theme that is using a unique class assigned to the OOB widget to style it further vs applying styles more broadly so they can be reused.

I will use dev tools to find unique styles, remove the unique class/id reference and apply these styles directly to the cloned widget.

Thank you for your help.

View solution in original post

Jesse_H · ‎11-27-2023

Hi @Akash_Yadav,

I copied the OOB CSS from the EC Theme that didn't transfer over when I cloned.

1. Go to your cloned My Requests Widget

2. Paste this at the end of the CSS code:

/** Replicate OOB styles from EC Theme that didn't xfer over **/

.panel.b .panels-container > .list-group-item.row {
padding: 1.6rem 0 2.4rem;
margin: 0 -16px !important;
}
.panel.b .panel-heading {
background: none;
border-bottom: none;
}
.panel.b .panels-container {
text-align: center;
padding: 0 2.4rem 2.4rem;
}
.panel.b .panels-container > .list-group-item.row {
padding: 1.6rem 0 2.4rem;
margin: 0 -16px !important;
}
.panel.b .panel-heading .panel-title {
font-size: 2.4rem;
font-weight: 600;
}
.panel.b .panels-container.list-group {
text-align: left;
}
.primary-display {
font-size: 1.6rem;
line-height: 1.1;
margin-bottom: 0.4rem;
font-weight: 600;
}
.panel.b .panels-container > .table .list-group-item {
display: flex;
align-items: center;
border: 0.1rem solid #DADDE2;
border-bottom: none;
padding: 1.6rem 2.4rem;
}
.panel.b .panels-container > .table .list-group-item:last-of-type {
border-bottom: 0.1rem solid #DADDE2;
}
.panel.b .panels-container > .list-group-item.row .control-view label {
margin-right: 0.8rem;
}
.control-view {
display: flex;
}
.panel.b .panels-container > .list-group-item.row > div.m-b-sm {
padding-right: 0;
margin-bottom: 0.8rem !important;
}
.panel.b .panels-container > .list-group-item.row {
padding: 1.6rem 0 2.4rem;
margin: 0 -16px !important;
}
.panel .requests-header-container .fit-content {
min-width: fit-content;
}
.panel.b .panels-container > .table {
margin-bottom: 0;
}
.secondary-display {
font-size: 1.2rem;
color: #181A1F;
}

View solution in original post

Mohith Devatte · ‎07-07-2022

Hello,

When you cloned the widget it will only clone the widget and the widget CSS but there might be CSS at the page level as well

Can you please go to the page where this widget is located and check if there is any css in PAGE SPECIFIC CSS field and also check is there any CSS in instance that is holding this widget

please accept this solution if it works for you

Jesse_H · ‎07-07-2022

Hello,

Thank you for the prompt reply. There are no page or instance-specific styles.

Page:

Widget Instance:

Mohith Devatte · ‎07-07-2022

If not may be it might been missed .

Lets do one thing in your page specific CSS for your new page please copy paste the CSS what you have pasted above and try reloading the portal .

It might apply the css

Jesse_H · ‎07-07-2022

The page wasn't copied. I think there is a CSS Include from the EC Theme that is using a unique class assigned to the OOB widget to style it further vs applying styles more broadly so they can be reused.

I will use dev tools to find unique styles, remove the unique class/id reference and apply these styles directly to the cloned widget.

Thank you for your help.