{"id":355,"date":"2023-02-01T14:52:00","date_gmt":"2023-02-01T14:52:00","guid":{"rendered":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/01\/creating-static-html-content\/"},"modified":"2023-06-18T21:36:59","modified_gmt":"2023-06-18T21:36:59","slug":"creating-static-html-content","status":"publish","type":"post","link":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/01\/creating-static-html-content\/","title":{"rendered":"Creating Static HTML content"},"content":{"rendered":"\n<p class=\"has-text-color\" style=\"color: rgba(120, 119, 116, 1)\">2\/1\/2023<\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<h1 class=\"wp-block-heading\">The Why<\/h1>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">I needed the ability to create a custom text card, I used several text cards and such at first, but the HTML control provided the \u201crichest\u201d experience look. I will be building the card to look like the following. <\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image.png\" alt=\"\"\/><\/figure>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The colors and the shape will be included within the HTML text.<\/p>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The reason an HTML card is used is the lack of radius control on text boxes. Within a button the individual corners can be managed, but not in a text card.  <\/p>\n\n\n<h1 class=\"wp-block-heading\">The How<\/h1>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">In the Power Apps Editor insert a HTML card<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image-1.png\" alt=\"\"\/><\/figure>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">Format the card to suite the setup. Set the Auto Height to True<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image-2.png\" alt=\"\"\/><\/figure>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">Set the \u201cHTML Text\u201d to <\/p>\n\n\n<pre class=\"wp-block-code\"><code>&quot;&lt;div style=&#039;border-radius:12px; width:560px; height:100px; background-color:#4a63c4&#039;&gt;&lt;\/div&gt;\u201d<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image-3-1024x36.png\" alt=\"\"\/><\/figure>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The text box will return the following<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image-4.png\" alt=\"\"\/><\/figure>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">Each corner is addressed from Top-Left, Top-Right, Bottom-Left, Bottom-Right<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&quot;&lt;div style=&#039;border-radius:12px 12px 0px 0px; width:560px; height:100px; background-color:#4a63c4&#039;&gt;&lt;\/div&gt;\u201d<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image-5-1024x376.png\" alt=\"\"\/><\/figure>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<p class=\"has-background\" style=\"background-color: rgb(241, 241, 239)\">&#x1f4a1; Use your favorite way of selecting the HEX code of choice. The following example uses Power Toys Color Picker for simplicity. <\/p>\n\n\n<p class=\"has-background\" style=\"background-color: rgb(241, 241, 239)\">&#x1f4a1; If you ever have issues copying and pasting the HTML code into the workspace, simply delete the last \u201c and then re add it. <\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">Setting the opacity is a set using the <code>opacity<\/code> tag. <\/p>\n\n\n<pre class=\"wp-block-code\"><code>&quot;&lt;div style=&#039;border-radius:12px 12px 0px 0px; width:560px; height:100px; background-color:#E5EFFE; opacity: 0.5&#039;&gt;&lt;\/div&gt;\u201d<\/code><\/pre>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">However for this project opacity will not be used. <\/p>\n\n\n<pre class=\"wp-block-code\"><code>&quot;&lt;div style=&#039;border-radius:12px 12px 0px 0px; width:560px; height:100px; background-color:#E5EFFE&#039;&gt;&lt;\/div&gt;\u201d<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image-6-1024x346.png\" alt=\"\"\/><\/figure>\n\n","protected":false},"excerpt":{"rendered":"<p>2\/1\/2023 The Why I needed the ability to create a custom text card, I used several text cards and such at first, but the HTML control provided the \u201crichest\u201d experience look. I will be building the card to look like the following. The colors and the shape will be included within the HTML text. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":189,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[18],"class_list":["post-355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-app","tag-canvas-app","entry","has-media"],"jetpack_featured_media_url":"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/cover-scaled.jpg","_links":{"self":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/comments?post=355"}],"version-history":[{"count":1,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/355\/revisions"}],"predecessor-version":[{"id":358,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/355\/revisions\/358"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media\/189"}],"wp:attachment":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/categories?post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/tags?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}