Last Woodmart update breaking all custom CSS added previously

I have same issue this
https://xtemos.com/forums/topic/last-woodmart-update-breaking-all-custom-css-added-previously/

here my all css
`
.instagram-gallery {
padding-top:62px;
padding-bottom:67px;
}

.bold-font-quote p,
.bold-font-quote .woodmart-title-container,
.bold-font-quote .woodmart-title-container strong {
font-weight:700 !important;
}

span.woodmart-burger.wd-tools-icon {
color:#ffffff;
}

.instagram-gallery .eapps-instagram-feed-has-error:not(.eapps-instagram-feed-debug) {
display: block !important;
padding-top: 10px !important;
}

.mc4wp-form>div>p.submit-change {
margin-bottom: 0px !important;
}

.main-page-wrapper {
margin-top: 0px !important;
padding-top: 0px !important;
}

.woodmart-button-wrapper a.btn:not(.about-video-btn) {
text-transform: inherit !important;
font-size: 15px !important;
letter-spacing: 0.5px !important;
}

body:not(.home) .main-page-wrapper {
margin-top:143px !important;
}

#about-video {
padding: 10px !important;
background-color: #000000!important;
border-radius: 6px !important;
}

@font-face {
font-family: herbert;
src: url(https://www.studiostoryline.nl/wp-includes/fonts/Herbert-Regular-400.ttf);
}

@font-face {
font-family: poppins;
src: url(https://www.studiostoryline.nl/wp-includes/fonts/Poppins-Regular.ttf);
}

@font-face {
font-family: British-Shorthair;
src:url(https://www.studiostoryline.nl/wp-includes/fonts/British-Shorthair.otf);
}

@font-face {
font-family: Philosopher-Bold;
src=”https://www.studiostoryline.nl/wp-includes/fonts/Philosopher-Bold.ttf”;
}

.whb-header {
margin-bottom: 0px !important;
}

body:not(.home) .whb-general-header,
body:not(.home) .whb-top-bar {
background-color: #000 !important;
}

body .whb-sticked .whb-general-header {
background-color: rgba(0,0,0,0.85) !important;
}

.header-box p {
font-size: 13px;
}

.header-box p a {
color:#ffffff !important;
}

.header-box p:hover a {
color:#84171d !important;
}

.woodmart-navigation .item-level-0.menu-item-has-children>a:after {
color: #ffffff !important;
margin-left: 14px !important;
}

#menu-main-menu .sub-menu-dropdown {
right: auto !important;
left: 0 !important;
width: 280px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top:0px !important;
}

#menu-main-menu .sub-menu li {
padding: 10px 0px;
transition:0.3s;
}

#menu-main-menu .sub-menu li:hover {
background-color: #f4f4f4;
}

#menu-main-menu .sub-menu li:not(:last-child) {
border-bottom: 1px solid #efefef;
}

#menu-main-menu .sub-menu li a {
color: #c79f8b !important;
font-size: 16px;
}

#menu-main-menu .sub-menu li:hover a {
color: #9b655d !important;
}

#menu-main-menu .sub-menu li a:hover {
background-color:transparent !important;
}

.whb-general-header-inner .whb-col-right,
.whb-general-header-inner .whb-col-right .whb-navigation,
.menu-main-menu-container, #menu-main-menu , #menu-main-menu>li {
height: 100% !important;
}

.header-divider:before {
border-color: rgb(255 255 255 / 65%) !important;
border-right-width: 2px !important;
}

header .search-button .search-button-icon:before {
font-size: 14px !important;
font-weight: 900 !important;
color: #fff !important;
}

header .woodmart-search-dropdown input[type=text] {
padding-left: 15px !important;
padding-right: 35px !important;
height: 41px !important;
}

header .woodmart-search-dropdown {
width: 248px !important;
}

header .woodmart-search-dropdown .searchsubmit {
width: 35px !important;
}

.searchform .searchsubmit:after {
font-size: 13px !important;
font-weight: 900 !important;
color: #8c8c8c !important;
}

header .woodmart-search-dropdown input.s::placeholder,
header .woodmart-search-dropdown input.s {
font-size: 13px !important;
}

/* header .navigation-style-underline .item-level-0>a .nav-link-text:after {
background-color: #84171d !important;
bottom: -15px !important;
top: auto !important;
} */

header .whb-color-dark .navigation-style-separated .item-level-0:after {
border-color: rgb(255 255 255) !important;
}

.woodmart-prefooter {
padding-bottom: 0px !important;
}

.site-content {
margin-bottom: 0px !important;
}

.woodmart-text-block p:first-child:empty,
.woodmart-text-block p:first-child:empty~p:last-child {
display: block !important;
}

.generic-title .title {
font-size: 40px;
}

/**********/

ul#menu-main-menu li a {
color: #fff;
padding: 0px 15px !important;
text-transform: none;
}

ul#menu-main-menu>.current-menu-item>a.woodmart-nav-link>span {
background-color: #c79f8b;
padding: 7px 18px 7px;
border-radius: 3px;
}

/********SINGLE POST PRODUCT******/

.single-post .meta-post-categories,
.single-post .woodmart-entry-meta,
.single-post .post-date,
.single-post #comments,
.single-post .woodmart-single-footer {
display: none;
}

.single-post header.entry-header {
margin-bottom: 0px !important;
}

.single-post .post-single-page .entry-content {
margin-bottom: 0px !important;
background-color: #f3f3f3;
padding: 20px 25px 25px;
}

.single-post .main-page-wrapper {
padding-top: 50px !important;
padding-bottom: 50px !important;
}

.sidebar-container {
margin-bottom: 40px;
background-color: #f5f5f5;
padding: 15px 15px;
box-shadow: 0px 0px 3px lightgrey;
}

.sidebar-container .woodmart-recent-posts .recent-posts-thumbnail img {
border-radius: 100px !important;
}

.sidebar-container .woodmart-recent-posts .entry-title {
margin-bottom: 2px !important;
}

.sidebar-container .woodmart-recent-posts li {
align-items: center !important;
}

/**************/

.copyrights-wrapper.copyrights-two-columns {
background-color: #c79f8b;
color: #ffffff;
border-color: #ffffff54;
}

.copyrights-wrapper a:hover {
color: #000000;
}
/*
.newsletter-footer {
padding-top:70px;
padding-bottom:70px;
}

.newsletter-footer .mc4wp-form-fields {
flex-wrap: unset !important;
}

.newsletter-footer .mc4wp-form-fields>input:not(:last-child) {
margin-right: 15px;
background-color: #fff;
border:none;
}

.newsletter-footer .mc4wp-form-fields>input {
height: 53px;
}

.newsletter-footer .mc4wp-form-fields input[type=”submit”] {
background-color: #9b655d !important;
}

.newsletter-footer .mc4wp-form-fields input[type=”submit”]:hover {
background-color: #84171d !important;
}

.newsletter-footer .title-after_title {
font-size: 18px !important;
color: #fff !important;
}*/

.woodmart-prefooter>.container>p {
display: none;
}

.news-letter-row .mc4wp-form-fields input[type=”text”] {
display: none;
}

.news-letter-row .mc4wp-form-fields {
display: flex !important;
flex-wrap: nowrap !important;
}

.news-letter-row .mc4wp-form-fields input[type=”email”] {
border-radius:4px 0px 0px 4px !important;
}

.news-letter-row .mc4wp-form-fields input[type=”submit”] {
border-radius:0px 4px 4px 0px !important;
text-transform: none !important;
}

.mc4wp-form-fields input[type=”submit”] {
font-size:15px !important;
}

.news-letter-row {
padding-top: 64px;
padding-bottom: 66px;
border-top:2px solid #e0e0e0;
}

.contact-footer-row p, .contact-footer-row p a {
color:#ffffff;
}

.contact-footer-row p a:hover {
color:#c79f8b;
}

.contact-footer-row a.woodmart-social-icon.social-tumblr:hover {
background-color: #fe2c55;
border-color: #fe2c55;
}

.contact-footer-row .social-tumblr i:before {
content: “\f133” !important;
}
`

Hi,

In the 6.0 update that was released in the summer 2021, we refactored our theme styles to implement CSS variables. CSS variables and changing CSS class prefixes from “.woodmart-” to “.wd-” allows us to reduce theme styles and increase theme performance. In your case, the solution of your issues is the same as in the topic on which you’re replying.

Part of your custom CSS code does not work because it contains an old .woodmart- class prefix and simple changing it to .wd- will fix the issue, but unfortunately, several classes have been completely renamed or removed due to theme HTML structure simplification and in that case custom CSS need to be refactored. More about changes in classes can be found in correspondence table (https://docs.google.com/spreadsheets/d/1b_PBt1itPNby4mkpeV_VcRrQHPHjtuF9DIs8jJE0maQ/edit#gid=0) and theme migration guide (https://xtemos.com/docs/woodmart/faq-guides/woodmart-update-6-0-explained/).

Kind Regards

[Author]

Posts