Widget Styles Missing after Clone

[Jesse_H]

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;

}

Below is an image showing you both widgets on the page. The top is the cloned version. Notice padding issues, font size, etc.

How can I go about getting these styles added to the cloned widget? Why didn't they copy over? Where are they?

Thank you!
Jesse

[Jesse_H · Accepted solution]

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.

[Akash_Yadav]

Hi Jesse_H
I am facing the same issue. Can you please tell what have you done to fix the padding issue on the cloned widget.
TIA

[Jesse_H · Accepted solution]

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;
}

[Akash_Yadav]

Thanks for the prompt reply.
This thing worked.