{"id":1681,"date":"2023-02-19T23:23:11","date_gmt":"2023-02-20T04:23:11","guid":{"rendered":"https:\/\/karmismusingstech.com\/?p=1681"},"modified":"2025-08-10T23:43:04","modified_gmt":"2025-08-11T03:43:04","slug":"using-chatgpt-to-create-wordpress-additional-css-code-to-customize-blogs-appearance","status":"publish","type":"post","link":"https:\/\/karmismusingstech.com\/index.php\/2023\/02\/19\/using-chatgpt-to-create-wordpress-additional-css-code-to-customize-blogs-appearance\/","title":{"rendered":"Using ChatGPT to create WordPress &#8220;Additional CSS&#8221; code to customize Blog&#8217;s &#8220;Appearance&#8221;"},"content":{"rendered":"<p><img decoding=\"async\" class=\"aligncenter wp-image-1683 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/ChatGPT-a.jpg\" alt=\"\" width=\"861\" height=\"439\" srcset=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/ChatGPT-a.jpg 861w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/ChatGPT-a-500x255.jpg 500w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/ChatGPT-a-768x392.jpg 768w\" sizes=\"(max-width: 861px) 100vw, 861px\" \/><\/p>\n<p>If you haven&#8217;t tried <a href=\"https:\/\/en.wikipedia.org\/wiki\/ChatGPT\" target=\"_blank\" rel=\"noopener\"><b>ChatGPT<\/b><\/a> yet then you are falling behind. If you have tried it then give it a second or even third try, and then fall behind if you still don&#8217;t understand what it can do or <i>simply don&#8217;t like it<\/i>.<\/p>\n<p>If you&#8217;re using a WordPress <a href=\"https:\/\/wordpress.com\/support\/plan-features\/\" target=\"_blank\" rel=\"noopener\">Premium<\/a> plan (<i>or higher<\/i>) then you have the ability to add Custom CSS code (<i><u>created wid ChatGPT<\/u><\/i>) under Dashboard&#8217;s <b>Appearance &gt; Additional CSS<\/b> customizing option. Some people have even created a &#8216;<a href=\"https:\/\/wptavern.com\/chatgpt-creates-a-working-wordpress-plugin-on-the-first-try\" target=\"_blank\" rel=\"noopener\"><i>Working WordPress Plugin<\/i><\/a>&#8216; for their blog.<\/p>\n<p>I&#8217;m running a <a href=\"https:\/\/www.hostinger.com\/recommended\/techradar-premium?utm_medium=affiliate&amp;utm_source=aff1631&amp;utm_campaign=61&amp;session=102f0a4a2884e8db4a6977decd32ad\" target=\"_blank\" rel=\"noopener\">Hostinger<\/a> self-hosted WordPress blog, the <a href=\"https:\/\/karmismusingstech.com\/\"><i>Karmi&#8217;s Musings &amp; Tech<\/i><\/a> blog, using the <a href=\"https:\/\/wordpress.org\/themes\/multipurpose-blog\/\" target=\"_blank\" rel=\"noopener\">Multipurpose Blog<\/a> premium <a href=\"https:\/\/www.buywptemplates.com\/themes\/multipurpose-blog-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\"><b>$39<\/b><\/a> theme. Started the blog on <a href=\"https:\/\/karmismusingstech.com\/index.php\/2022\/11\/page\/4\/\"><i>11\/3\/2022<\/i><\/a> &#8216;n have been <i><u>slowly finding<\/u><\/i> what I&#8217;ve needed for continued customizing. Self-hosting a blog takes some addition work, and WordPress themes that work at WordPress.com may need customizing if you go wid a hosting services. That&#8217;s when knowing some CSS code (<i><u>or knowing how to find it<\/u><\/i>) comes in handy. Today I asked ChatGPT to write a <a href=\"https:\/\/www.wpbeginner.com\/wp-themes\/how-to-customize-blockquotes-style-in-wordpress-themes\/\" target=\"_blank\" rel=\"noopener\"><b>Blockquotes Style<\/b><\/a> CSS script for me.<\/p>\n<p><!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/karmismusingstech.com\/index.php\/2023\/02\/19\/using-chatgpt-to-create-wordpress-additional-css-code-to-customize-blogs-appearance\/#ChatGPT_creates_a_Blockquotes_Style_CSS_code\" >ChatGPT creates a Blockquotes Style CSS code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/karmismusingstech.com\/index.php\/2023\/02\/19\/using-chatgpt-to-create-wordpress-additional-css-code-to-customize-blogs-appearance\/#ChatGPT_Karmi_become_%E2%80%98Pardners%E2%80%98\" >ChatGPT &amp; Karmi become &#8216;Pardners&#8216;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/karmismusingstech.com\/index.php\/2023\/02\/19\/using-chatgpt-to-create-wordpress-additional-css-code-to-customize-blogs-appearance\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"ChatGPT_creates_a_Blockquotes_Style_CSS_code\"><\/span>ChatGPT creates a Blockquotes Style CSS code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"color: #ff0000;\"><b>Me<\/b>: create a WordPress Classic CSS Blockquote<\/span><\/p>\n<p><span style=\"color: #ff0000;\"><b>ChatGPT<\/b>: Sure, here&#8217;s an example of how you can create a classic CSS blockquote in WordPress:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1687 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-1.jpg\" alt=\"\" width=\"605\" height=\"747\" srcset=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-1.jpg 605w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-1-405x500.jpg 405w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/p>\n<p>I was shocked that it worked so easy &#8216;n quick!? \ud83d\ude2e <i>Now<\/i>, I have recently used a CSS script from WPBeginner&#8217;s <a href=\"https:\/\/www.wpbeginner.com\/wp-themes\/how-to-customize-blockquotes-style-in-wordpress-themes\/\" target=\"_blank\" rel=\"noopener\"><i><b>6. Round Corner Blockquote<\/b><\/i><\/a><i><b> <\/b><\/i>option, but it seemed stuck on the left side, and I had wanted it in the center.<\/p>\n<p><span style=\"color: #ff0000;\"><b>Me<\/b>: center it<\/span><\/p>\n<p><span style=\"color: #ff0000;\"><b>ChatGPT<\/b>: To center the blockquote, you can add the following CSS properties to the &#8220;blockquote&#8221; selector:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1689 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-2.jpg\" alt=\"\" width=\"586\" height=\"496\" srcset=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-2.jpg 586w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-2-500x423.jpg 500w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><\/p>\n<p>The &#8220;margin: 0 auto&#8221; was the key to centering the blockquote, and I have saved that tip since it also solved the <i>6. Round Corner Blockquote<\/i> issue being stuck on the left side.<\/p>\n<p style=\"text-align: center;\"><b>\\o\/ \u2018<i>Hippity hip Hoorah<\/i>\u2018 \\o\/<\/b><\/p>\n<p>Another issue I was having wid the <i>6. Round Corner Blockquote<\/i> CSS code was one side wasn&#8217;t right, i.e., the left side of the Round Corner quote seemed to be missing a continuation of the line:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1708 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/sophie-CSS-original.jpg\" alt=\"\" width=\"591\" height=\"328\" srcset=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/sophie-CSS-original.jpg 591w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/sophie-CSS-original-500x277.jpg 500w\" sizes=\"(max-width: 591px) 100vw, 591px\" \/><\/p>\n<p>See how the line is missing on the left side? That is also a pic of the blockquote hugging the left side, i.e., before I added the &#8220;margin: 0 auto&#8221; tip. With a line missing in that script, I needed to create a new script with round corners.<\/p>\n<p><em>Thusly<\/em>, I started a new chat &#8211; &#8216;<span style=\"color: #ff0000;\"><i>WordPress CSS script for blockquote<\/i><\/span>&#8216;. About a third of the way into that chat, I wanted to make changes to the script.<\/p>\n<p><span style=\"color: #ff0000;\"><b>Me<\/b>: make it light gray with round corners <\/span><\/p>\n<p><span style=\"color: #ff0000;\"><b>ChatGPT<\/b>: To make the blockquote light gray with rounded corners, you can modify the CSS script as follows:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1692 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-3.jpg\" alt=\"\" width=\"574\" height=\"583\" srcset=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-3.jpg 574w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-3-492x500.jpg 492w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/p>\n<p>It was working, but I needed more at this point, i.e., &#8216;<i>We<\/i>&#8216; needed to work <i>closer<\/i> together&#8230;so to speak.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"ChatGPT_Karmi_become_%E2%80%98Pardners%E2%80%98\"><\/span>ChatGPT &amp; Karmi become &#8216;<i>Pardners<\/i>&#8216;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ChatGPT works &#8216;n replies a lot faster than humble me can, <i>which is fine by me<\/i>, because &#8216;<i>We<\/i>&#8216; solved some issues today. <i>However<\/i>, like humans have communication problems all the time, the same is apparently true wid humans &#8216;n AI&#8217;s like ChatGPT. For example, the blockquote background gray color was a little too light&#8230;<\/p>\n<p><span style=\"color: #ff0000;\"><b>Me<\/b>: a little darker gray<\/span><\/p>\n<p><span style=\"color: #ff0000;\"><b>ChatGPT<\/b>: Sure! To make the blockquote a little darker gray, you can adjust the color, border-left, and background-color properties in the CSS script, like this:<\/span><\/p>\n<p>Well, ChatGPT obviously didn&#8217;t understand the &#8220;little&#8221; part of my meaning because <a href=\"https:\/\/www.colorhexa.com\/777777\" target=\"_blank\" rel=\"noopener\"><b>#777777<\/b><\/a> was way too dark of a gray:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1695 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/Dark-Gray.jpg\" alt=\"\" width=\"871\" height=\"568\" srcset=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/Dark-Gray.jpg 871w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/Dark-Gray-500x326.jpg 500w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/Dark-Gray-768x501.jpg 768w\" sizes=\"(max-width: 871px) 100vw, 871px\" \/><\/p>\n<p><i>It&#8217;s OK tho<\/i>, since ChatGPT &#8216;n me are now &#8216;<i>Pardners<\/i>&#8216;, and &#8216;<i>Pardners<\/i>&#8216; always cover for each other. \ud83d\ude09 What I have now done, <i><u>wid ChatGPT&#8217;s great help<\/u><\/i>, is tweak &#8216;n combine some CSS codes to come up wid this one:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1697 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-sophie.jpg\" alt=\"\" width=\"597\" height=\"359\" srcset=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-sophie.jpg 597w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-sophie-500x301.jpg 500w, https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/CSS-sophie-240x145.jpg 240w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/p>\n<p>The downward pointing Red Arrow highlights the results so far. It&#8217;s a combination of two different Blockquotes Style&#8217;s CSS codes, plus color changes of text &amp; background, etc. The <a href=\"https:\/\/www.colorhexa.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Color Hex<\/strong><\/a> site was very useful.<\/p>\n<p>Here&#8217;s the actual code:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1698 size-full\" src=\"https:\/\/karmismusingstech.com\/wp-content\/uploads\/2023\/02\/new-CSS-code.jpg\" alt=\"\" width=\"289\" height=\"345\" \/><\/p>\n<p>I also wanted to try getting the blockquote&#8217;s text to Align Left instead of Align Center, but haven&#8217;t managed to do it yet. \ud83e\udd14 Might have something to do wid my theme, but CSS code can be tricky for newbies like me.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I&#8217;ve only been piddling wid ChatGPT for a few days now, and it is quite impressive!!! It can write code for you &#8211; <b>WOW!!!<\/b><\/p>\n<p>Better communicator than all of my former <a href=\"https:\/\/linuxnewbiesince1996.wordpress.com\/2019\/06\/23\/13-wives-14-divorces-and-retiring-old-computers\/\" target=\"_blank\" rel=\"noopener\"><i><b>13 Wives<\/b><\/i><\/a> combined &#8211; Ditto on &#8216;<i>Da<\/i> <b>WOW!!! \ud83d\ude09<br \/>\n<\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you haven&#8217;t tried ChatGPT yet then you are falling behind. If you have tried it then give it a second or even third try, and then fall behind if you still don&#8217;t understand what it can do or simply don&#8217;t like it. If you&#8217;re using a WordPress Premium plan (or higher) then you have &#8230; <a title=\"Using ChatGPT to create WordPress &#8220;Additional CSS&#8221; code to customize Blog&#8217;s &#8220;Appearance&#8221;\" class=\"read-more\" href=\"https:\/\/karmismusingstech.com\/index.php\/2023\/02\/19\/using-chatgpt-to-create-wordpress-additional-css-code-to-customize-blogs-appearance\/\" aria-label=\"Read more about Using ChatGPT to create WordPress &#8220;Additional CSS&#8221; code to customize Blog&#8217;s &#8220;Appearance&#8221;\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":10,"footnotes":""},"categories":[192,30,99,40,97,201,32,202,11,103,27,80,31],"tags":[29,98,28],"class_list":["post-1681","post","type-post","status-publish","format-standard","hentry","category-bing-ai","category-blogging","category-blogging-tips","category-blogs","category-chatgpt","category-copilot","category-hostinger","category-html-code","category-linux","category-microsoft","category-testing","category-twitter","category-wordpress","tag-blogging","tag-chatgpt","tag-technology"],"_links":{"self":[{"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/posts\/1681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/comments?post=1681"}],"version-history":[{"count":22,"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/posts\/1681\/revisions"}],"predecessor-version":[{"id":1715,"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/posts\/1681\/revisions\/1715"}],"wp:attachment":[{"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/media?parent=1681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/categories?post=1681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/karmismusingstech.com\/index.php\/wp-json\/wp\/v2\/tags?post=1681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}