{"id":6713,"date":"2022-11-27T19:02:38","date_gmt":"2022-11-27T13:02:38","guid":{"rendered":"https:\/\/helpdesk.spider-themes.net\/docs\/docy-wordpress-theme\/using-shortcodes\/css-helper-classes\/"},"modified":"2022-11-27T19:02:38","modified_gmt":"2022-11-27T13:02:38","slug":"css-helper-classes","status":"publish","type":"docs","link":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/docs\/docy-wordpress-theme\/using-shortcodes\/css-helper-classes\/","title":{"rendered":"CSS Helper Classes"},"content":{"rendered":"\n<p>Elevate your website design effortlessly with the preset classes available in the Docy theme. Harness the power of pre-defined CSS classes not only to streamline your design process but also to ensure a seamless user experience in both light and dark modes. Discover the art of optimizing your website&#8217;s appearance with Docy today.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Shadow Classes<\/h2>\n\n\n\n<p>Explore a range of shadow examples paired with their corresponding class names. Easily integrate these classes into your design, highlighted in red for quick identification. Elevate your website&#8217;s visual appeal by applying these shadow classes:<\/p>\n\n\n\n<div class=\"bd-example\">\n<div class=\"shadow-none p-3 mb-5 bg-light rounded\"><code>shadow-none<\/code> No shadow<\/div>\n<div class=\"shadow-sm p-3 mb-5 bg-body rounded\"><code>shadow-sm<\/code> Small shadow<\/div>\n<div class=\"shadow p-3 mb-5 bg-body rounded\"><code>shadow<\/code> Regular shadow<\/div>\n<div class=\"shadow-lg p-3 mb-5 bg-body rounded\"><code>shadow-lg<\/code> Larger shadow<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Color Classes<\/h2>\n\n\n\n<p>Effortlessly set background colors with the following classes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>bg-white<\/code>: Automatically applies a white background color.<\/li>\n<\/ul>\n\n\n\n<p>For black background colors, utilize the following classes, each indicating a different level of darkness by the suffix after the class name. Experiment with 13 classes for varying shades of dark colors, where smaller numbers signify lighter shades, and larger numbers indicate deeper darkness:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>black-25<\/code>, <code>black-50<\/code>, <code>black-100<\/code>, <code>black-200<\/code>, <code>black-300<\/code>, <code>black-350<\/code>, <code>black-400<\/code>, <code>black-500<\/code>, <code>black-600<\/code>, <code>black-700<\/code>, <code>black-800<\/code>, <code>black-900<\/code><\/li>\n<\/ul>\n\n\n\n<p>Enhance your design palette by learning how to seamlessly apply these classes to achieve your desired visual effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inline Style Classes<\/h2>\n\n\n\n<p>Integrate the badge class effortlessly into your content for a stylish touch:<\/p>\n\n\n\n<p><code>&lt;span class=\"badge\"&gt; badge &lt;\/span&gt;<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bootstrap Classes<\/h2>\n\n\n\n<p>Discover the seamless integration of <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\" rel=\"noreferrer noopener nofollow\">Bootstrap<\/a> classes, enhancing your website&#8217;s functionality and aesthetics. Follow these steps to incorporate Bootstrap code into your Docy-themed website:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e8149eeec22&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e8149eeec22\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-content\/uploads\/2023\/02\/image.png\" alt=\"Customizing Docy WordPress Documentation Theme with Elementor Icon Box Widget\" class=\"wp-image-7169\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add Bootstrap Classes:<\/strong> Apply Bootstrap classes directly to your HTML elements to leverage the framework&#8217;s features. For example, use the following class to create a responsive container: <code>&lt;div class=\"container\"&gt; &lt;!-- Your content goes here --&gt; &lt;\/div&gt;<\/code><\/li>\n\n\n\n<li><strong>Explore Components:<\/strong> Dive into Bootstrap&#8217;s extensive <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\" data-type=\"link\" data-id=\"https:\/\/getbootstrap.com\/docs\/5.3\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a> to enhance your website further. Utilize classes for navigation bars, cards, forms, and more. <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar navbar-expand-lg navbar-light bg-light\"&gt;\n    &lt;!-- Your navigation bar content --&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"card\" style=\"width: 18rem;\"&gt;\n    &lt;!-- Your card content --&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Combine with Docy Classes:<\/strong> Mix and match Docy classes with Bootstrap to achieve a unique and visually appealing design. Experiment with shadows, colors, and Bootstrap components to create a harmonious and user-friendly website.<\/li>\n<\/ul>\n\n\n\n<p>In conclusion, harness the power of Docy theme&#8217;s preset classes and seamlessly integrate Bootstrap to elevate your website&#8217;s design effortlessly. From shadow and color classes to inline styles and Bootstrap components, the synergy of these tools allows you to craft a visually appealing and user-friendly website. Explore the art of optimization, combining the strengths of Docy and Bootstrap for a truly unique and captivating online presence.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elevate your website effortlessly with Docy theme&#8217;s preset classes. Integrate stunning shadow and color effects, experiment with Bootstrap components, and create a seamless, visually impressive, and user-friendly experience for your visitors.<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":86,"menu_order":21,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-6713","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/6713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/comments?post=6713"}],"version-history":[{"count":0,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/6713\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/86"}],"wp:attachment":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/media?parent=6713"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=6713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}