{"id":28734,"date":"2024-05-21T22:04:59","date_gmt":"2024-05-21T16:04:59","guid":{"rendered":"https:\/\/ultimateblocks.com\/?post_type=docs&p=28734"},"modified":"2024-05-23T00:40:19","modified_gmt":"2024-05-22T18:40:19","password":"","slug":"custom-css","status":"publish","type":"docs","link":"https:\/\/ultimateblocks.com\/docs\/custom-css\/","title":{"rendered":"Custom CSS"},"content":{"rendered":"\n

Custom CSS is user-defined stylesheets that allow you to customize the appearance of blocks, elements, and widgets on a website overriding the default settings. This customization can include changes to colors, fonts, layout, spacing, and other design elements.<\/p>\n\n\n\n

Ultimate Blocks allow you to add Custom CSS to all of its blocks. This documentation will show you how to add Custom CSS to the plugin blocks.<\/p>\n\n\n\n

Finding Custom CSS<\/h2>\n\n\n\n

To explain this documentation, we have used the Image Slider block<\/a> and created a slider. Keep the block selected.\u00a0
Go to the Styles tab<\/strong> on the right sidebar. You\u2019ll see the Custom CSS<\/strong> option at the end.<\/p>\n\n\n\n

\"Finding<\/figure>\n\n\n\n

Adding Custom CSS Stylesheets<\/h2>\n\n\n\n

Expand the Custom CSS section by clicking the arrow sign. You\u2019ll get the stylesheet board where you can add your desired Custom CSS codes.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

# How to Write Custom CSS Code<\/h3>\n\n\n\n

If you have knowledge of HTML\/CSS, you can easily write codes Custom CSS code for your web element. But if you are a no-code user, you\u2019ll feel like in trouble.<\/p>\n\n\n\n

But no worries! You can get help from ChatGPT. You just have to write a suitable command on how you want to customize your web element. The AI tool will generate the code which you just have to copy and paste on the stylesheet board.<\/p>\n\n\n\n

Step 01: Find the Class of Web Element<\/h4>\n\n\n\n

First, find the class<\/strong> of the block, widget, or element from the frontend of your page. To do this, right click your mouse<\/strong> on the frontend of your desired page and select Inspect<\/strong>.<\/p>\n\n\n\n

\"Go<\/figure>\n\n\n\n

A new section will open up at the bottom end of the page. Click the Select an Element<\/strong> option.\u00a0<\/p>\n\n\n\n

Take your cursor and hit your desired web element<\/strong>. You\u2019ll get the class of the element in the new section opened below.<\/p>\n\n\n\n

\"Find<\/figure>\n\n\n\n

Step 02: Copy-Paste the Class on ChatGPT and Write Your Command Around It<\/h4>\n\n\n\n

Copy-paste the class of the element on ChatGPT. Write your command around it and click the enter button. The Code will be generated within a few seconds.<\/p>\n\n\n\n

\"Copy-Paste<\/figure>\n\n\n\n

Step 03: Paste the Code on the Stylesheet Board<\/h4>\n\n\n\n

Go to the Custom CSS section next to the Gutenberg editor. Paste the code you have generated just a while ago. You\u2019ll see changes on your widget.<\/p>\n\n\n\n

\"Paste<\/figure>\n\n\n\n

Thus, you can use the Custom CSS extension with the Ultimate Blocks plugin.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

Custom CSS provides the flexibility to implement design changes that aren’t possible with default styles or templates. This enables you to create a more intuitive, visually appealing interface that can enhance usability and accessibility.<\/p>\n\n\n\n

There are many other AI tools online alongside ChatGPT from where you can get help to generate Custom CSS code for your site.<\/p>\n","protected":false},"excerpt":{"rendered":"

Custom CSS is user-defined stylesheets that allow you to customize the appearance of blocks, elements, and widgets on a website overriding the default settings. This customization can include changes to colors, fonts, layout, spacing, and other design elements. Ultimate Blocks allow you to add Custom CSS to all of its blocks. This documentation will show […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_eb_attr":"","footnotes":""},"doc_category":[325],"doc_tag":[],"coauthors":[201],"class_list":["post-28734","docs","type-docs","status-publish","hentry","doc_category-extensions"],"year_month":"2026-06","word_count":446,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Istiak Rayhan","author_nicename":"istiak","author_url":"https:\/\/ultimateblocks.com\/author\/istiak\/"},"doc_category_info":[{"term_name":"Extensions","term_url":"https:\/\/ultimateblocks.com\/docs-category\/extensions\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/docs\/28734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/comments?post=28734"}],"version-history":[{"count":1,"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/docs\/28734\/revisions"}],"predecessor-version":[{"id":28741,"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/docs\/28734\/revisions\/28741"}],"wp:attachment":[{"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/media?parent=28734"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/doc_category?post=28734"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/doc_tag?post=28734"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/ultimateblocks.com\/wp-json\/wp\/v2\/coauthors?post=28734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}