{"id":90809,"date":"2017-07-21T16:53:58","date_gmt":"2017-07-21T16:53:58","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=90809"},"modified":"2021-07-19T06:23:43","modified_gmt":"2021-07-19T06:23:43","slug":"converting-visualforce-page-look-in-lightning-look","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/","title":{"rendered":"Converting Visualforce Page Look In Lightning Look"},"content":{"rendered":"\n

In this blog we will learn how to give lightning look<\/strong> to visualforce page. To convert your page in lightning view, now you don’t have to create lightning <\/strong>component separately you just need to change css<\/strong>. Let’s learn how:<\/p>\n\n\n\n

Key Points:<\/h3><\/div>
\n

1). <apex:Slds\/><\/strong> : By using this tag you can include lightning css file in your visualforce page. You don’t need to update your resource time to time .<\/p>\n\n\n\n

2). To use the SVG<\/strong> spritemap icons, add the attributes xmlns=“http:\/\/www.w3.org\/2000\/svg” xmlns:xlink=”http:\/\/www.w3.org\/1999\/xlink”<\/strong> to the <html> element. As shown below:<\/p>\n\n\n\n

<apex:page>\n  <html xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" lang=\"en\">\n    <!-- write your code -->\n     <span class=\"slds-icon_container slds-icon-standard-account\">\n        <svg aria-hidden=\"true\" class=\"slds-icon\">\n            <use xlink:href=\"{!URLFOR($Asset.SLDS, 'assets\/icons\/standard-sprite\/svg\/symbols.svg#account')}\"><\/use>\n        <\/svg>\n       <span class=\"slds-assistive-text\">Contact Icon<\/span>\n     <\/span>\n  <\/html>\n<\/apex:page>\n<\/pre>\n\n\n\n
3). Wrap<\/strong> your code in a container:<\/p>\n\n\n\n
<div class=\"slds-scope\">...<\/div><\/pre>\n<\/div>\n\n\n\n
Example:<\/h3><\/div>
\n
Let’s create an example page and give this page a lightning look<\/strong> in salesforce lightning user interface and classic look <\/strong>in salesforce classic user interface.<\/p>\n\n\n\n
1) . Create a visualforce page and copy the following code:<\/p>\n\n\n\n
<apex:page standardController=\"Contact\" recordSetvar=\"Cont\" sidebar=\"false\" extensions =\"exampleLightningVf\" tabStyle=\"Contact\">\n    <!-- \n    \/**\n    * Webkul Software.\n    *\n    * @category  Webkul\n    * @author    Webkul\n    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\n    * @license   https:\/\/store.webkul.com\/license.html\n    *\/\n    -->\n    <html xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" lang=\"en\">\n        <head>\n            <style>\n                .head{\n                font-size:1.3em;\n                }\n                .slds-scope .slds-icon-standard-account {\n                background-color: #7f8de1;\n                width: 35px;\n                height: 33px;\n                margin-right: 10px;\n                margin-top: 3px;\n                }\n                .wk_btn{\n                margin: 10px 45% !important;\n                }\n                \n            <\/style>\n        <\/head>\n        <apex:Slds rendered ='{!ligtningMode}'\/> \n        <div class = \"slds-scope\">\n            <apex:form >\n                <apex:outputpanel styleclass=\"slds-grid\" >\n                    <apex:outputpanel styleclass=\"slds-col slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12\" rendered ='{!ligtningMode}'>\n                        <div class=\"slds-page-header\" role=\"banner\">\n                            <div class=\"slds-grid\">\n                                <span class=\"slds-icon_container slds-icon-standard-account\">\n                                    <svg aria-hidden=\"true\" class=\"slds-icon\">\n                                        <use xlink:href=\"{!URLFOR($Asset.SLDS, 'assets\/icons\/standard-sprite\/svg\/symbols.svg#account')}\"><\/use>\n                                    <\/svg>\n                                    <span class=\"slds-assistive-text\">Contact Icon<\/span>\n                                <\/span>\n                                <div class=\"slds-col\">\n                                    <h1 class=\"slds-text-heading--medium\">Contact <\/h1>\n                                    <p class=\"slds-text-heading--label\">Home<\/p>\n                                <\/div>\n                            <\/div> \n                        <\/div>\n                    <\/apex:outputpanel>\n                <\/apex:outputpanel>\n                \n                <apex:sectionHeader title=\"Contacts\" subtitle=\"Home\" help=\"https:\/\/help.salesforce.com\/articleView?err=1&id=contacts_overview.htm&siteLang=en_US&type=0\" rendered=\"{!!ligtningMode}\"  \/> \n                <apex:pageBlock mode=\"{!pbMode}\">\n                    <apex:commandButton value=\"New\" action=\"\/001\/e\" styleClass=\"slds-button slds-button_neutral wk_btn\"\/>\n                    <apex:pageBlockTable value=\"{!cont}\" var=\"item\"  id=\"list\" styleClass=\"slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout wk_table\">\n                        <apex:column headerValue=\"Name\" headerClass=\"slds-text-heading--label \" styleClass=\"slds-truncate wk_table\">\n                            <apex:outputLink value=\"\/{!item.id}\">\n                                <apex:outputText >{!item.name}<\/apex:outputText>\n                            <\/apex:outputLink>\n                        <\/apex:column>\n                        <apex:column headerValue=\"Account Name\" headerClass=\"slds-text-heading--label\" styleClass=\"slds-truncate wk_table\">\n                            <apex:outputLink value=\"\/{!item.accountid}\">\n                                <apex:outputtext value=\"{!item.Account.name}\"\/>\n                            <\/apex:outputlink>\n                        <\/apex:column>\n                        \n                        <apex:column headerValue=\"Phone\" headerClass=\"slds-text-heading--label\" styleClass=\"slds-truncate wk_table\">\n                            <apex:outputtext value=\"{!item.phone}\"\/>\n                        <\/apex:column>\n                        \n                    <\/apex:pageBlockTable>    \n                    \n                    \n                <\/apex:pageBlock>\n                \n                \n            <\/apex:form>\n        <\/div>\n    <\/html>\n<\/apex:page><\/pre>\n\n\n\n
2). Now create controller class to determine the look of visualforce page according to user interface either lightning or classic.<\/p>\n\n\n\n
public class exampleLightningVf {\n   \/**\n    * Webkul Software.\n    *\n    * @category  Webkul\n    * @author    Webkul\n    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\n    * @license   https:\/\/store.webkul.com\/license.html\n    *\/\n    public String pbMode{get; set;}\n    public Boolean ligtningMode {get; set;}\n    \n    public exampleLightningVf(ApexPages.StandardSetController controller) {\n     if(UserInfo.getUiThemeDisplayed() == 'Theme3' && Apexpages.currentPage().getParameters().get('beLightning') == null)\n     {\n         pbMode = 'edit';\n         ligtningMode = false;\n     }\n        else {\n            pbMode = 'maindetail';\n            ligtningMode = true;\n        }\n            \n    }\n}<\/pre>\n\n\n\n
3). Last step : Now create a new visualforce page tab and assign your visualforce page to this tab<\/strong>.To create visualforce page tab Goto<\/strong>|SetUp<\/strong>|Tabs<\/strong>|Lightning Page<\/strong> Tabs<\/strong>| New<\/strong> | Assign your Lightning Page.<\/em><\/strong><\/p>\n\n\n\n
That’s all now check your page in both user interface.<\/p>\n<\/div>\n\n\n\n
Output<\/h3><\/div>
\n
#Lightning View:<\/p>\n\n\n\n
\"image\"<\/a><\/figure>\n\n\n\n
# Classic View :\"\"<\/a><\/p>\n\n\n\n
<\/p>\n<\/div>\n\n\n\n
Support<\/h3><\/div>
\n
That\u2019s all for Converting Visualforce Page Look In Lightning Look <\/strong>, still if you have any further query feel free to add a ticket, we will be happy to help you https:\/\/support.uvdesk.com\/en\/customer\/create-ticket\/<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In this blog we will learn how to give lightning look to visualforce page. To convert your page in lightning view, now you don’t have to create lightning component separately you just need to change css. Let’s learn how:<\/p>\n","protected":false},"author":145,"featured_media":90820,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1808,3418,3545,1887,1888],"tags":[5126,5125,5128],"class_list":["post-90809","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-how-to-configure-lightning-experience-record-pages-using-the-lightning-app-builder","category-lightning-design-system","category-salesforce","category-visualforce","tag-converting-visualforce-page-look-in-lightning-look","tag-lightning-look-of-vf-page","tag-use-of-svg-tag-in-vf-page"],"yoast_head":"\nConverting Visualforce Page Look In Lightning Look - Webkul Blog<\/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:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Converting Visualforce Page Look In Lightning Look - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog we will learn how to give lightning look to visualforce page. To convert your page in lightning view, now you don’t have to create lightning component separately you just need to change css. Let’s learn how:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-21T16:53:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-19T06:23:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Snehil Jaiswal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Snehil Jaiswal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/\"},\"author\":{\"name\":\"Snehil Jaiswal\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e7e387ae1eb38a5dd56c53c2daf848d1\"},\"headline\":\"Converting Visualforce Page Look In Lightning Look\",\"datePublished\":\"2017-07-21T16:53:58+00:00\",\"dateModified\":\"2021-07-19T06:23:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/\"},\"wordCount\":257,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png\",\"keywords\":[\"Converting VisualForce Page Look In Lightning Look\",\"Lightning look of vf page\",\"use of svg tag in vf page\"],\"articleSection\":[\"Ajax\",\"How To Configure Lightning Experience Record Pages Using the Lightning App Builder\",\"Lightning Design System\",\"Salesforce\",\"Visualforce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/\",\"url\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/\",\"name\":\"Converting Visualforce Page Look In Lightning Look - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png\",\"datePublished\":\"2017-07-21T16:53:58+00:00\",\"dateModified\":\"2021-07-19T06:23:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Converting Visualforce Page Look In Lightning Look\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e7e387ae1eb38a5dd56c53c2daf848d1\",\"name\":\"Snehil Jaiswal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4bca6424a95aaafa9ab0ddc940099d65d20ab159fbcec826869a62578336590d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4bca6424a95aaafa9ab0ddc940099d65d20ab159fbcec826869a62578336590d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Snehil Jaiswal\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/snehil-jaiswal901\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Converting Visualforce Page Look In Lightning Look - Webkul Blog","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:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/","og_locale":"en_US","og_type":"article","og_title":"Converting Visualforce Page Look In Lightning Look - Webkul Blog","og_description":"In this blog we will learn how to give lightning look to visualforce page. To convert your page in lightning view, now you don’t have to create lightning component separately you just need to change css. Let’s learn how:","og_url":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-07-21T16:53:58+00:00","article_modified_time":"2021-07-19T06:23:43+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png","type":"image\/png"}],"author":"Snehil Jaiswal","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Snehil Jaiswal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/"},"author":{"name":"Snehil Jaiswal","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e7e387ae1eb38a5dd56c53c2daf848d1"},"headline":"Converting Visualforce Page Look In Lightning Look","datePublished":"2017-07-21T16:53:58+00:00","dateModified":"2021-07-19T06:23:43+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/"},"wordCount":257,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png","keywords":["Converting VisualForce Page Look In Lightning Look","Lightning look of vf page","use of svg tag in vf page"],"articleSection":["Ajax","How To Configure Lightning Experience Record Pages Using the Lightning App Builder","Lightning Design System","Salesforce","Visualforce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/","url":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/","name":"Converting Visualforce Page Look In Lightning Look - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png","datePublished":"2017-07-21T16:53:58+00:00","dateModified":"2021-07-19T06:23:43+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-6-2.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/converting-visualforce-page-look-in-lightning-look\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Converting Visualforce Page Look In Lightning Look"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e7e387ae1eb38a5dd56c53c2daf848d1","name":"Snehil Jaiswal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4bca6424a95aaafa9ab0ddc940099d65d20ab159fbcec826869a62578336590d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4bca6424a95aaafa9ab0ddc940099d65d20ab159fbcec826869a62578336590d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Snehil Jaiswal"},"url":"https:\/\/webkul.com\/blog\/author\/snehil-jaiswal901\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/90809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=90809"}],"version-history":[{"count":7,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/90809\/revisions"}],"predecessor-version":[{"id":296939,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/90809\/revisions\/296939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/90820"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=90809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=90809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=90809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}