{"id":5513,"date":"2021-04-11T14:33:47","date_gmt":"2021-04-11T14:33:47","guid":{"rendered":"https:\/\/thecitragroup.com\/?post_type=docs&#038;p=5513"},"modified":"2021-04-11T14:34:20","modified_gmt":"2021-04-11T14:34:20","slug":"custom-css","status":"publish","type":"docs","link":"https:\/\/thecitragroup.com\/id\/help\/custom-css\/","title":{"rendered":"Custom CSS"},"content":{"rendered":"<p>WPBakery Page Builder offers several ways for users to interact with CSS:<\/p>\n\n\n\n<p><strong>First:<\/strong>&nbsp;You can access WP Dashboard -&gt;&nbsp;WPBakery Page Builder -&gt; Design Options tab where you change default color and margin\/padding settings for content elements.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Edit Your WordPress Site Look with WPBakery Page Builder Design Options\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/0IUKAACdd6E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Second:&nbsp;<\/strong>Under&nbsp;WPBakery Page Builder -&gt; Custom CSS tab you can add your own custom CSS style rules.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Add Custom CSS to Your WordPress Site with WPBakery Page Builder\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/HEP16aj5eXs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Third:<\/strong>&nbsp;You can add custom CSS rules for exact Page or Post. In the Page or Post edit window, you will see CSS button on the right top side above&nbsp;WPBakery Page Builder window, click it to open form where you can place custom CSS rules for this particular page or post.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Add Custom CSS to Your WordPress Page with WPBakery Page Builder\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/poE_tPJ1JQM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Fourth:<\/strong>&nbsp;If you wish to style particular content element differently, then you can add class name for exact element on your Page or Post by entering it in the \u201cExtra CSS Class name\u201d in the edit window of your element. Important: you can not add CSS code within \u201cExtra CSS class name\u201d field directly \u2013 this field is for class name only. CSS code should be stored in the proper place (your theme css files, custom css field in WPB settings page, etc.)<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Add CSS to Element with WPBakery Page Builder for WordPress\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/3-BW2YPTVZU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Fifth:<\/strong>&nbsp;To override class names that are applied to&nbsp;WPBakery Page Builder content elements you should use WordPress&nbsp;<a href=\"https:\/\/kb.wpbakery.com\/docs\/filters\/vc_shortcodes_css_class\">add_filter(\u201cvc_shortcodes_css_class\u201d)<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>WPBakery Page Builder offers several ways for users to interact with CSS: First:&nbsp;You can access WP Dashboard -&gt;&nbsp;WPBakery Page Builder -&gt; Design Options tab where you change default color and margin\/padding settings for content elements. Second:&nbsp;Under&nbsp;WPBakery Page Builder -&gt; Custom CSS tab you can add your own custom CSS style rules. Third:&nbsp;You can add custom CSS rules for exact Page or Post. In the Page or Post edit window, you will see CSS button on the right top side above&nbsp;WPBakery Page Builder window, click it to open form where you can place custom CSS rules for this particular page or post. Fourth:&nbsp;If you wish to style particular content element differently, then you can add class name for exact element on your Page or Post by entering it in the \u201cExtra CSS Class name\u201d in the edit window of your element. Important: you can not add CSS code within \u201cExtra CSS class name\u201d field directly \u2013 this field is for class name only. CSS code should be stored in the proper place (your theme css files, custom css field in WPB settings page, etc.) Fifth:&nbsp;To override class names that are applied to&nbsp;WPBakery Page Builder content elements you should use WordPress&nbsp;add_filter(\u201cvc_shortcodes_css_class\u201d).<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_category":[274],"doc_tag":[],"class_list":["post-5513","docs","type-docs","status-publish","hentry","doc_category-page-builder"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Custom CSS - Citra Group<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom CSS\" \/>\n<meta property=\"og:description\" content=\"WPBakery Page Builder offers several ways for users to interact with CSS: First:&nbsp;You can access WP Dashboard -&gt;&nbsp;WPBakery Page Builder -&gt; Design Options tab where you change default color and margin\/padding settings for content elements. Second:&nbsp;Under&nbsp;WPBakery Page Builder -&gt; Custom CSS tab you can add your own custom CSS style rules. Third:&nbsp;You can add custom CSS rules for exact Page or Post. In the Page or Post edit window, you will see CSS button on the right top side above&nbsp;WPBakery Page Builder window, click it to open form where you can place custom CSS rules for this particular page or post. Fourth:&nbsp;If you wish to style particular content element differently, then you can add class name for exact element on your Page or Post by entering it in the \u201cExtra CSS Class name\u201d in the edit window of your element. Important: you can not add CSS code within \u201cExtra CSS class name\u201d field directly \u2013 this field is for class name only. CSS code should be stored in the proper place (your theme css files, custom css field in WPB settings page, etc.) Fifth:&nbsp;To override class names that are applied to&nbsp;WPBakery Page Builder content elements you should use WordPress&nbsp;add_filter(\u201cvc_shortcodes_css_class\u201d).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecitragroup.com\/id\/help\/custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Citra Group\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/thecitragroup\/\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-11T14:34:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecitragroup.com\/wp-content\/uploads\/2021\/06\/COVER_ARTIKEL_-_Air_Comp_Hitachi-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@thecitragroup\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/help\\\/custom-css\\\/\",\"url\":\"https:\\\/\\\/thecitragroup.com\\\/help\\\/custom-css\\\/\",\"name\":\"Custom CSS - Citra Group\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/#website\"},\"datePublished\":\"2021-04-11T14:33:47+00:00\",\"dateModified\":\"2021-04-11T14:34:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/help\\\/custom-css\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecitragroup.com\\\/help\\\/custom-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/help\\\/custom-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecitragroup.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/#website\",\"url\":\"https:\\\/\\\/thecitragroup.com\\\/\",\"name\":\"Citra Group\",\"description\":\"Your Trusted Partner in Industrial Solution Requirements\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecitragroup.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/#organization\",\"name\":\"Citra Group\",\"url\":\"https:\\\/\\\/thecitragroup.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Citra Group\"},\"image\":{\"@id\":\"https:\\\/\\\/thecitragroup.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/thecitragroup\\\/\",\"https:\\\/\\\/x.com\\\/thecitragroup\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Custom CSS - Citra Group","robots":{"index":"noindex","follow":"follow"},"og_locale":"id_ID","og_type":"article","og_title":"Custom CSS","og_description":"WPBakery Page Builder offers several ways for users to interact with CSS: First:&nbsp;You can access WP Dashboard -&gt;&nbsp;WPBakery Page Builder -&gt; Design Options tab where you change default color and margin\/padding settings for content elements. Second:&nbsp;Under&nbsp;WPBakery Page Builder -&gt; Custom CSS tab you can add your own custom CSS style rules. Third:&nbsp;You can add custom CSS rules for exact Page or Post. In the Page or Post edit window, you will see CSS button on the right top side above&nbsp;WPBakery Page Builder window, click it to open form where you can place custom CSS rules for this particular page or post. Fourth:&nbsp;If you wish to style particular content element differently, then you can add class name for exact element on your Page or Post by entering it in the \u201cExtra CSS Class name\u201d in the edit window of your element. Important: you can not add CSS code within \u201cExtra CSS class name\u201d field directly \u2013 this field is for class name only. CSS code should be stored in the proper place (your theme css files, custom css field in WPB settings page, etc.) Fifth:&nbsp;To override class names that are applied to&nbsp;WPBakery Page Builder content elements you should use WordPress&nbsp;add_filter(\u201cvc_shortcodes_css_class\u201d).","og_url":"https:\/\/thecitragroup.com\/id\/help\/custom-css\/","og_site_name":"Citra Group","article_publisher":"https:\/\/facebook.com\/thecitragroup\/","article_modified_time":"2021-04-11T14:34:20+00:00","og_image":[{"width":2048,"height":1448,"url":"https:\/\/thecitragroup.com\/wp-content\/uploads\/2021\/06\/COVER_ARTIKEL_-_Air_Comp_Hitachi-scaled.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@thecitragroup","twitter_misc":{"Est. reading time":"1 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thecitragroup.com\/help\/custom-css\/","url":"https:\/\/thecitragroup.com\/help\/custom-css\/","name":"Custom CSS - Citra Group","isPartOf":{"@id":"https:\/\/thecitragroup.com\/#website"},"datePublished":"2021-04-11T14:33:47+00:00","dateModified":"2021-04-11T14:34:20+00:00","breadcrumb":{"@id":"https:\/\/thecitragroup.com\/help\/custom-css\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecitragroup.com\/help\/custom-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/thecitragroup.com\/help\/custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecitragroup.com\/"},{"@type":"ListItem","position":2,"name":"Custom CSS"}]},{"@type":"WebSite","@id":"https:\/\/thecitragroup.com\/#website","url":"https:\/\/thecitragroup.com\/","name":"Citra Group","description":"Mitra Terpercaya dalam Solusi Perlengkapan Industri Anda","publisher":{"@id":"https:\/\/thecitragroup.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecitragroup.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/thecitragroup.com\/#organization","name":"Citra Group","url":"https:\/\/thecitragroup.com\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/thecitragroup.com\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Citra Group"},"image":{"@id":"https:\/\/thecitragroup.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/thecitragroup\/","https:\/\/x.com\/thecitragroup"]}]}},"_links":{"self":[{"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/docs\/5513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/comments?post=5513"}],"version-history":[{"count":1,"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/docs\/5513\/revisions"}],"predecessor-version":[{"id":5519,"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/docs\/5513\/revisions\/5519"}],"wp:attachment":[{"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/media?parent=5513"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/doc_category?post=5513"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/thecitragroup.com\/id\/wp-json\/wp\/v2\/doc_tag?post=5513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}