{"id":12770,"date":"2023-03-08T15:00:10","date_gmt":"2023-03-08T20:00:10","guid":{"rendered":"https:\/\/buzapps.net\/info\/?post_type=knowledgebase&#038;p=12770"},"modified":"2024-07-25T14:12:34","modified_gmt":"2024-07-25T18:12:34","slug":"add-a-button-as-an-internal-link-on-custom-pages","status":"publish","type":"knowledgebase","link":"https:\/\/buzapps.net\/info\/knowledgebase\/how-to\/add-a-button-as-an-internal-link-on-custom-pages\/","title":{"rendered":"Add a button as an internal link on Custom Pages."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Use the code below to add a button as an internal link on Custom Pages. This change would enable buttons to be used instead of regular text links.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1)<\/strong>&nbsp;Log into your App Manager and&nbsp;<strong>select your app<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2)<\/strong>&nbsp;Click&nbsp;<strong>Colors<\/strong>&nbsp;from the left-hand-side of the screen (or the middle of the screen).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3)<\/strong>&nbsp;Scroll down to the&nbsp;<strong>Advanced SCSS box<\/strong>.&nbsp; If there is already code in the box do not delete it!&nbsp; Simply add this code &#8220;below&#8221; the last character of code in the box.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*** BEGIN: CUSTOM PAGES: ADD BUTTON AS INTERNAL LINK - 240725 ***\/\n\/*Button background color *\/\nion-view&#91;state=\"cms-view\"] ion-content div&#91;sb-cms-text] .item:nth-child(1) a {\nbackground-color:#CF8F30;\nborder-radius:30px;\npadding: 5px 5px 5px 5px;\n};\n\n\n\/* Custom page text color link color fix *\/\nion-view&#91;state=\"cms-view\"] ion-content div&#91;sb-cms-text] .item:nth-child(1) p a,\nion-view&#91;state=\"cms-view\"] ion-content div&#91;sb-cms-text] .item:nth-child(1) a > span {\n  \tcolor: #fff !important;\n  \ttext-decoration: none !important;\n}\n\n\/*Button text color *\/\nion-view&#91;state=\"cms-view\"] ion-content div&#91;sb-cms-text] .item:nth-child(1) p a {\ntext-align:center;\ncolor:#ffffff;\nfont-size:18px;\n};\n\n\/*Button background hover color *\/\nion-view&#91;state=\"cms-view\"] ion-content div&#91;sb-cms-text] .item:nth-child(1) a:hover {\nbackground-color:#7F4C00;\n};\n\/** End custom page css for internal links*\/\n\/*** END: CUSTOM PAGES: ADD BUTTON AS INTERNAL LINK - 240725 ***\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4)&nbsp;<\/strong>Click&nbsp;<strong>Save<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>NOTE:<\/strong> Change the background (background-color:#eb4a62;) and text hex colors (color:#ffffff;) to the colors of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use the code below to add a button as an internal link on Custom Pages. This change would enable buttons to be used instead of regular text links. 1)&nbsp;Log into your App Manager and&nbsp;select your app. 2)&nbsp;Click&nbsp;Colors&nbsp;from the left-hand-side of the screen (or the middle of the screen). 3)&nbsp;Scroll down to the&nbsp;Advanced SCSS box.&nbsp; If there is already code in the box do not delete it!&nbsp; Simply add this code &#8220;below&#8221; the last character of code in the box. 4)&nbsp;Click&nbsp;Save. NOTE: Change the background (background-color:#eb4a62;) and text hex colors (color:#ffffff;) to the colors of your choice.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","knowledgebase_cat":[35],"class_list":["post-12770","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-how-to"],"_links":{"self":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/12770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/comments?post=12770"}],"version-history":[{"count":6,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/12770\/revisions"}],"predecessor-version":[{"id":15536,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/12770\/revisions\/15536"}],"wp:attachment":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/media?parent=12770"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase_cat?post=12770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}