{"id":7379,"date":"2024-05-24T06:15:00","date_gmt":"2024-05-24T06:15:00","guid":{"rendered":"https:\/\/www.leadshook.com\/help\/?p=7379"},"modified":"2024-08-08T06:29:38","modified_gmt":"2024-08-08T06:29:38","slug":"css-mapping-guide-for-transition-from-v1-to-v2","status":"publish","type":"post","link":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/","title":{"rendered":"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2"},"content":{"rendered":"\n<p class=\"has-luminous-vivid-amber-background-color has-background has-medium-font-size\"><strong>Please Note:<\/strong> You can easily optimize for V2 using Appearance setting, this guide is tailored for users who has custom CSS from V1 and want to retain it in V2. They will need to use the updated CSS selectors based on the mapping below in order for their previous CSS code to work properly with V2<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>So, you&#8217;re looking to hit the ground running with Version 2 (V2), and maybe even shake things up with some custom Decision Trees (DTs)? No worries, we&#8217;ve got you covered. This guide is your golden ticket to not only navigate the CSS class modifications from Version 1 (V1) to V2, but also to get a kick out of leveraging the nifty Purecss framework for custom designs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Assumed Knowledge<\/h2>\n\n\n\n<p>Before we dive in, let&#8217;s make sure you&#8217;re comfortable with the basics of CSS classes and their role in web development. A familiarity with our previous system version (V1) and its CSS architecture is a plus. Lastly, having a basic understanding of HTML and markup languages wouldn&#8217;t hurt either!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Objectives<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">This guide has two primary goals:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To impart a comprehensive understanding of the CSS class changes from V1 to V2.<\/li>\n\n\n\n<li>Equip you with the knowledge to craft custom DT designs using the superior architecture of V2 and the power of Purecss.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Changes and Building Your Custom Design<\/h2>\n\n\n\n<p>With the shift to V2, we&#8217;re welcoming a leaner, meaner CSS structure that significantly amps up the performance and maintainability of our platform. Farewell to the slow page load times of V1, thanks to the farewell we bid to third-party libraries.<\/p>\n\n\n\n<p>V2 strides forward with pure CSS, fast-tracking your page speed, which is absolutely essential for the quick form loading. Now, this new CSS structure is also your playground for creating custom designs with the Purecss framework. Here&#8217;s how you do it:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Explore Purecss Layouts <\/h4>\n\n\n\n<p>Navigate to the Purecss layouts website at <a href=\"https:\/\/purecss.io\/layouts\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/purecss.io\/layouts\/<\/a> Here, you&#8217;ll find a variety of layout templates that you can use as a base for your custom design.<\/p>\n\n\n\n<img decoding=\"async\" width=\"100%\" src=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Choose a Layout <\/h4>\n\n\n\n<p>Browse through the available layouts and select one that aligns with your design vision. For example, the Pricing layout <a href=\"https:\/\/purecss.io\/layouts\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/purecss.io\/layouts\/pricing\/ <\/a>might be a good start. <\/p>\n\n\n\n<img decoding=\"async\" width=\"100%\" src=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Choose-a-Layout.jpg\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Clone the HTML Code<\/h4>\n\n\n\n<p> Once you&#8217;ve selected a layout, clone or copy its HTML code. This is the foundation of your design structure. The &#8220;clone&#8221; or &#8220;copy&#8221; option is usually available via right-clicking on the webpage or through the developer tools in your browser.<\/p>\n\n\n\n<img decoding=\"async\" width=\"100%\" src=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Clone-the-HTML-Code.jpg\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Apply the Cloned Code to Your DT Node <\/h4>\n\n\n\n<p>Navigate back to your project and paste the copied HTML code onto your DT node. This action will mirror the layout structure on your DT.<\/p>\n\n\n\n<img decoding=\"async\" width=\"100%\" src=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Apply-the-Cloned-Code-to-Your-DT-Node.jpg\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Customize <\/h4>\n\n\n\n<p>With the cloned layout now in place, start customizing according to your requirements. Remember that while the cloned layout provides a good starting point, further refinements and customization will require some knowledge of CSS. <\/p>\n\n\n\n<img decoding=\"async\" width=\"100%\" src=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Customize.jpg\"\/>\n\n\n\n<p><br>By following these steps, you can swiftly apply a new layout structure to your DT without a deep dive into CSS. For extra shine and finish though, some experimentation and manipulation of CSS will be necessary.<\/p>\n\n\n\n<p>Remember, should you need further assistance or have any questions during the process, don&#8217;t hesitate to contact our LeadsHook support team. We&#8217;re here to make your transition and design journey as seamless as possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Detailed CSS Mapping<\/h2>\n\n\n<table style=\"width: 100%; height: 1092px;\">\n<thead>\n<tr style=\"height: 23px;\">\n<th style=\"height: 23px;\">Component<\/th>\n<th style=\"height: 23px;\">V1 Classes<\/th>\n<th style=\"height: 23px;\">V2 Classes<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Header<\/td>\n<td style=\"height: 70px;\">.lh-header<br \/>.header-logo-center<br \/>.clearfix<\/td>\n<td style=\"height: 70px;\">.header-container<br \/>.container<br \/>.header-logo-center-layout<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Header Logo<\/td>\n<td style=\"height: 70px;\">.lh-logo (no associated class)<\/td>\n<td style=\"height: 70px;\">.header-logo<br \/>.pure-img<br \/>.header-logo-img<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Header Menu<\/td>\n<td style=\"height: 70px;\">UL: .lh-ul-menu<br \/>LI: .lh-menu-item<\/td>\n<td style=\"height: 70px;\">UL: .pure-menu-list .header-menu .header-menu-main<br \/>LI: .pure-menu-item .header-menu-item<\/td>\n<\/tr>\n<tr style=\"height: 46px;\">\n<td style=\"height: 46px;\">Container<\/td>\n<td style=\"height: 46px;\">.node-well<br \/>.well<\/td>\n<td style=\"height: 46px;\">.node-inner<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Panel<\/td>\n<td style=\"height: 70px;\">.panel<br \/>.panel-default<br \/>.lh-panel-default<\/td>\n<td style=\"height: 70px;\">.node-panel<br \/>.html-area<\/td>\n<\/tr>\n<tr style=\"height: 46px;\">\n<td style=\"height: 46px;\">Form Input<\/td>\n<td style=\"height: 46px;\">.form-control<br \/>.question-field<\/td>\n<td style=\"height: 46px;\">.form-field<br \/>.form-control<\/td>\n<\/tr>\n<tr style=\"height: 116px;\">\n<td style=\"height: 116px;\">Button<\/td>\n<td style=\"height: 116px;\">.btn<br \/>.btn-primary<br \/>.submit-btn<br \/>.html-area<\/td>\n<td style=\"height: 116px;\">.pure-button<br \/>.next-btn<br \/>.pure-button-primary<br \/>.btn<br \/>.submit-btn<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Answer Button<\/td>\n<td style=\"height: 70px;\">.panel<br \/>.panel-default<br \/>.panel-answer<\/td>\n<td style=\"height: 70px;\">.question-answer<br \/>.question-answer-1<\/td>\n<\/tr>\n<tr style=\"height: 116px;\">\n<td style=\"height: 116px;\">Slider (Blank)<\/td>\n<td style=\"height: 116px;\">.ui-slider<br \/>ui-slider-horizontal<br \/>.ui-widget<br \/>.ui-widget-content, <br \/>.ui-corner-all<\/td>\n<td style=\"height: 116px;\">.noUi-connects<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Slider (Fill)<\/td>\n<td style=\"height: 70px;\">.ui-slider-range<br \/>.ui-widget-header<br \/>.ui-slider-range-min<\/td>\n<td style=\"height: 70px;\">.noUi-origin<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Slider (Circle)<\/td>\n<td style=\"height: 70px;\">.ui-slider-handle<br \/>.ui-state-default<br \/>.ui-corner-all<\/td>\n<td style=\"height: 70px;\">.noUi-handle<br \/>.noUi-handle-lower<\/td>\n<\/tr>\n<tr style=\"height: 23px;\">\n<td style=\"height: 23px;\">Chatbot<\/td>\n<td style=\"height: 23px;\">.question-line-content<\/td>\n<td style=\"height: 23px;\">.question-line-inner<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Progress Bar (Blank)<\/td>\n<td style=\"height: 70px;\">.ui-progress-bar<br \/>.progress<br \/>.progress-striped<\/td>\n<td style=\"height: 70px;\">.progress-bar<\/td>\n<\/tr>\n<tr style=\"height: 46px;\">\n<td style=\"height: 46px;\">Progress Bar (Fill)<\/td>\n<td style=\"height: 46px;\">.progress-bar<\/td>\n<td style=\"height: 46px;\">.progress-bar-inner<br \/>.progress-bar-striped<\/td>\n<\/tr>\n<tr style=\"height: 70px;\">\n<td style=\"height: 70px;\">Footer<\/td>\n<td style=\"height: 70px;\">.lh-footer<br \/>.footer-menu-center<\/td>\n<td style=\"height: 70px;\">.footer-container<br \/>.container<br \/>.footer-menu-center-layout<\/td>\n<\/tr>\n<tr style=\"height: 46px;\">\n<td style=\"height: 46px;\">Footer Menu<\/td>\n<td style=\"height: 46px;\">UL: .lh-ul-menu<br \/>LI: .lh-menu-item<\/td>\n<td style=\"height: 46px;\">UL: .pure-menu-list .footer-menu .footer-menu-main<br \/>LI: .pure-menu-item .footer-menu-item<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n<p>Jumping from V1 to V2 is like unboxing a shiny new toy, one that comes with a revamped, faster, and more maintainable CSS architecture. So, while Purecss helps you assemble the basic structure of your custom DT designs, remember, it&#8217;s your personal touch with CSS that will make these designs shine.<\/p>\n<p>Need more help or have a question? Don\u2019t think twice before hitting up our <a href=\"https:\/\/www.leadshook.com\/support\">LeadsHook support team.<\/a> We&#8217;re always here to make your design journey as smooth as possible.<\/p>\n<h2>Review Summary<\/h2>\n<p>This guide is a double whammy &#8211; it lays out the path for a seamless transition from V1 to V2 and also arms you with the know-how to create custom designs using the Purecss framework. The language is casual yet insightful, demystifying the technical aspects while keeping the focus on your design goals. The guide also offers a compelling call-to-action for further support, ensuring you&#8217;re never left hanging!<\/p>\n<p><a class=\"readmore\" href=\"https:\/\/www.leadshook.com\/contact-us\/\">Contact Us \u2192<\/a><\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Please Note: You can easily optimize for V2 using Appearance setting, this guide is tailored for users who has custom CSS from V1 and want to retain it in V2. They will need to use the updated CSS selectors based on the mapping below in order for their previous CSS code to work properly with [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[273,548,27,12,228],"tags":[512,1026,980],"class_list":["post-7379","post","type-post","status-publish","format-standard","hentry","category-appearance","category-css-hacks","category-decision-tree","category-leadshook","category-troubleshooting","tag-css","tag-css-conversion","tag-v1-to-v2-conversion"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2 - LeadsHook Knowledge Base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2 - LeadsHook Knowledge Base\" \/>\n<meta property=\"og:description\" content=\"Please Note: You can easily optimize for V2 using Appearance setting, this guide is tailored for users who has custom CSS from V1 and want to retain it in V2. They will need to use the updated CSS selectors based on the mapping below in order for their previous CSS code to work properly with [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/\" \/>\n<meta property=\"og:site_name\" content=\"LeadsHook Knowledge Base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/leadshook\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-24T06:15:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-08T06:29:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg\" \/>\n<meta name=\"author\" content=\"Anshul Gupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@leadshook\" \/>\n<meta name=\"twitter:site\" content=\"@leadshook\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anshul Gupta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/\"},\"author\":{\"name\":\"Anshul Gupta\",\"@id\":\"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/09c2ac94a63a91932134623c2f13b23c\"},\"headline\":\"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2\",\"datePublished\":\"2024-05-24T06:15:00+00:00\",\"dateModified\":\"2024-08-08T06:29:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/\"},\"wordCount\":843,\"publisher\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg\",\"keywords\":[\"CSS\",\"CSS conversion\",\"V1 to V2 conversion\"],\"articleSection\":[\"Appearance\",\"CSS Hacks\",\"Decision Tree\",\"LeadsHook\",\"Troubleshooting\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/\",\"url\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/\",\"name\":\"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2 - LeadsHook Knowledge Base\",\"isPartOf\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg\",\"datePublished\":\"2024-05-24T06:15:00+00:00\",\"dateModified\":\"2024-08-08T06:29:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage\",\"url\":\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg\",\"contentUrl\":\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg\",\"width\":1023,\"height\":724},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.leadshook.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.leadshook.com\/help\/#website\",\"url\":\"https:\/\/www.leadshook.com\/help\/\",\"name\":\"LeadsHook Knowledge Base\",\"description\":\"LeadsHook Training &amp; Technical Help\",\"publisher\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.leadshook.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.leadshook.com\/help\/#organization\",\"name\":\"LeadsHook\",\"url\":\"https:\/\/www.leadshook.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png\",\"contentUrl\":\"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png\",\"width\":350,\"height\":83,\"caption\":\"LeadsHook\"},\"image\":{\"@id\":\"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/leadshook\/\",\"https:\/\/x.com\/leadshook\",\"https:\/\/www.linkedin.com\/showcase\/leadshook\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/09c2ac94a63a91932134623c2f13b23c\",\"name\":\"Anshul Gupta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/2a9531acf7affbab2a279ee981ce8f55db1c3077ee64af32b57752ad59dd0a98?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a9531acf7affbab2a279ee981ce8f55db1c3077ee64af32b57752ad59dd0a98?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a9531acf7affbab2a279ee981ce8f55db1c3077ee64af32b57752ad59dd0a98?s=96&d=mm&r=g\",\"caption\":\"Anshul Gupta\"},\"url\":\"https:\/\/www.leadshook.com\/help\/author\/anshuldesign-leadshook-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2 - LeadsHook Knowledge Base","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/","og_locale":"en_US","og_type":"article","og_title":"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2 - LeadsHook Knowledge Base","og_description":"Please Note: You can easily optimize for V2 using Appearance setting, this guide is tailored for users who has custom CSS from V1 and want to retain it in V2. They will need to use the updated CSS selectors based on the mapping below in order for their previous CSS code to work properly with [&hellip;]","og_url":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/","og_site_name":"LeadsHook Knowledge Base","article_publisher":"https:\/\/www.facebook.com\/leadshook\/","article_published_time":"2024-05-24T06:15:00+00:00","article_modified_time":"2024-08-08T06:29:38+00:00","og_image":[{"url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg","type":"","width":"","height":""}],"author":"Anshul Gupta","twitter_card":"summary_large_image","twitter_creator":"@leadshook","twitter_site":"@leadshook","twitter_misc":{"Written by":"Anshul Gupta","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#article","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/"},"author":{"name":"Anshul Gupta","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/09c2ac94a63a91932134623c2f13b23c"},"headline":"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2","datePublished":"2024-05-24T06:15:00+00:00","dateModified":"2024-08-08T06:29:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/"},"wordCount":843,"publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg","keywords":["CSS","CSS conversion","V1 to V2 conversion"],"articleSection":["Appearance","CSS Hacks","Decision Tree","LeadsHook","Troubleshooting"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/","url":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/","name":"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2 - LeadsHook Knowledge Base","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg","datePublished":"2024-05-24T06:15:00+00:00","dateModified":"2024-08-08T06:29:38+00:00","breadcrumb":{"@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#primaryimage","url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg","contentUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2024\/05\/Explore-Purecss-Layouts-.jpg","width":1023,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.leadshook.com\/help\/css-mapping-guide-for-transition-from-v1-to-v2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.leadshook.com\/help\/"},{"@type":"ListItem","position":2,"name":"Guide to CSS Class Transition for Decision Tree Conversion from V1 to V2"}]},{"@type":"WebSite","@id":"https:\/\/www.leadshook.com\/help\/#website","url":"https:\/\/www.leadshook.com\/help\/","name":"LeadsHook Knowledge Base","description":"LeadsHook Training &amp; Technical Help","publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.leadshook.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.leadshook.com\/help\/#organization","name":"LeadsHook","url":"https:\/\/www.leadshook.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","contentUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","width":350,"height":83,"caption":"LeadsHook"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/leadshook\/","https:\/\/x.com\/leadshook","https:\/\/www.linkedin.com\/showcase\/leadshook\/"]},{"@type":"Person","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/09c2ac94a63a91932134623c2f13b23c","name":"Anshul Gupta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2a9531acf7affbab2a279ee981ce8f55db1c3077ee64af32b57752ad59dd0a98?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2a9531acf7affbab2a279ee981ce8f55db1c3077ee64af32b57752ad59dd0a98?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a9531acf7affbab2a279ee981ce8f55db1c3077ee64af32b57752ad59dd0a98?s=96&d=mm&r=g","caption":"Anshul Gupta"},"url":"https:\/\/www.leadshook.com\/help\/author\/anshuldesign-leadshook-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/7379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/comments?post=7379"}],"version-history":[{"count":12,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/7379\/revisions"}],"predecessor-version":[{"id":7516,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/7379\/revisions\/7516"}],"wp:attachment":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/media?parent=7379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/categories?post=7379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/tags?post=7379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}