{"id":2743,"date":"2026-10-20T08:36:22","date_gmt":"2026-10-20T07:36:22","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/how-to-change-button-colours\/"},"modified":"2026-10-20T08:39:00","modified_gmt":"2026-10-20T07:39:00","slug":"how-to-change-button-colours","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/how-tos\/how-to-change-button-colours\/","title":{"rendered":"How to change button colours in GeoDirectory"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">GeoDirectory buttons use AyeCode UI, which is based on Bootstrap. Most of them take their colour from the AyeCode UI primary and secondary colours, so changing those two colours changes the buttons across GeoDirectory, UsersWP and GetPaid at once.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Classic themes<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Appearance &gt; Customize &gt; AyeCode UI.<\/li>\n\n\n\n<li>Set Primary Color and Secondary Color.<\/li>\n\n\n\n<li>Click Publish.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">BlockStrap block themes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If your theme is BlockStrap or a child theme of it, AyeCode UI takes the primary and secondary colours from the theme&#8217;s colour palette. Change them in the Site Editor under Appearance &gt; Editor &gt; Styles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Badges<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Some buttons are badges, for example those added with GD &gt; Post Badge. They have their own Badge Color setting, or background and text colour pickers when no badge colour is chosen. Edit the block or shortcode to change them. See <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/gd-post-badge\/\">GD &gt; Post Badge<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">One-off changes with CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For a single button, a hover colour or a theme that overrides the colours, use CSS in Appearance &gt; Customize &gt; Additional CSS. Right-click the button and choose Inspect to find its classes. This example changes all primary buttons:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.bsui .btn-primary {\n\tbackground-color: #157b48;\n\tborder-color: #157b48;\n}\n.bsui .btn-primary:hover,\n.bsui .btn-primary:focus {\n\tbackground-color: #0f5a35;\n\tborder-color: #0f5a35;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">More examples are in <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/code-snippets\/geodirectory-frequently-asked-css-customizations\/\">GeoDirectory Frequently Asked CSS customizations<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>GeoDirectory buttons use AyeCode UI, which is based on Bootstrap. Most of them take their colour from the AyeCode UI primary and secondary colours, so changing those two colours changes the buttons across GeoDirectory, UsersWP and GetPaid at once. Classic themes BlockStrap block themes If your theme is BlockStrap or a child theme of it, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[211,432],"class_list":["post-2743","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-tips-tricks-more","gd_placecategory-how-tos"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=2743"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2743\/revisions"}],"predecessor-version":[{"id":2853,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2743\/revisions\/2853"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=2743"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=2743"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=2743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}