{"id":790,"date":"2026-10-20T09:04:40","date_gmt":"2026-10-20T08:04:40","guid":{"rendered":"https:\/\/userswp.io\/documentation\/article\/change-bootstrap-colours\/"},"modified":"2026-10-20T09:04:40","modified_gmt":"2026-10-20T08:04:40","slug":"change-bootstrap-colours","status":"publish","type":"gd_place","link":"https:\/\/userswp.io\/documentation\/article\/how-tos\/change-bootstrap-colours\/","title":{"rendered":"How to change the button colours in the UsersWP Bootstrap design"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">UsersWP uses AyeCode UI, our Bootstrap based styling, and you can change its main colours in the WordPress Customizer. No extra add-on is needed.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Appearance &gt; Customize.<\/li>\n\n\n\n<li>Open the AyeCode UI section.<\/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<p class=\"wp-block-paragraph\">Primary is used for main buttons, links and active tabs on UsersWP forms and profiles. Secondary is used for less important buttons. The same colours apply to other AyeCode plugins on the site, such as GeoDirectory and GetPaid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Block themes hide the Customize menu item, but the Customizer still works. Go to <code>\/wp-admin\/customize.php<\/code> on your site to open it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other colours and details<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For anything the two colour settings do not cover, add custom CSS in Appearance &gt; Customize &gt; Additional CSS or your child theme. AyeCode UI styles sit inside a <code>.bsui<\/code> wrapper, so start your selectors with it:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.bsui .btn-primary {\n\tbackground-color: #0b6e4f;\n\tborder-color: #0b6e4f;\n}\n.bsui .btn-primary:hover {\n\tbackground-color: #08523b;\n\tborder-color: #08523b;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Settings &gt; AyeCode UI has the other options, such as the Bootstrap version and where the styles load. More background is in <a href=\"https:\/\/userswp.io\/documentation\/article\/first-steps\/ayecode-user-interface-aui\/\">AyeCode User Interface (AUI)<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UsersWP uses AyeCode UI, our Bootstrap based styling, and you can change its main colours in the WordPress Customizer. No extra add-on is needed. Primary is used for main buttons, links and active tabs on UsersWP forms and profiles. Secondary is used for less important buttons. The same colours apply to other AyeCode plugins on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[41,7],"class_list":["post-790","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-how-tos","gd_placecategory-tips-tricks-more"],"_links":{"self":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/comments?post=790"}],"version-history":[{"count":0,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/790\/revisions"}],"wp:attachment":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/media?parent=790"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/tags?post=790"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/categories?post=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}