{"id":2280,"date":"2019-09-09T17:19:42","date_gmt":"2019-09-09T17:19:42","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=2280"},"modified":"2021-08-30T21:28:57","modified_gmt":"2021-08-30T21:28:57","slug":"practice-creating-a-custom-layout-and-buttons","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2019\/09\/09\/practice-creating-a-custom-layout-and-buttons\/","title":{"rendered":"Basic Training: How to Create a Custom Layout and Buttons"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3515\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/06\/Basic-Training-Tag-V3.png\" alt=\"\" width=\"110\" height=\"25\">&nbsp;&nbsp;<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3519\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/06\/html-V2.png\" alt=\"\" width=\"91\" height=\"25\"><\/p>\n<ul>\n<li>The purpose of these instructions is to show you how to create buttons within the cascade site by editing the code. Make sure that the edits you make are still related to the theme you have been using so far with cascade practices.<\/li>\n<li><strong>You are going to have three sections in the page.<\/strong>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Top: Headline and Banner 870&#215;300 pixels (It is smaller for subpages make sure the file is sized appropriately.)<\/li>\n<li>Middle: Sub header (Font Heading 3), email button with contact info to the right, and a horizontal line.<\/li>\n<li>Bottom: An icon (make your own psd), section header (Font Heading 4) with text and a rounded button (pick your own color).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-0.1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2281\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-0.1-300x282.png\" alt=\"\" width=\"509\" height=\"478\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-0.1-300x282.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-0.1-768x723.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-0.1-1024x964.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-0.1.png 1265w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><\/p>\n<ul>\n<li>I recommend making your own banner and icons and uploading them to Cascade before starting on coding\/layout. Just so the process of putting it together is easier. Refer to Step Four on how to make your Icon.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><b>Step One: Creating a Page<\/b><\/h3>\n<ul>\n<li>Add a new page to your STA test site to practice creating your own layout and buttons.<span class=\"Apple-converted-space\">&nbsp;<\/span><\/li>\n<li>Test Site &gt; Click \u201cAdd Content\u201d &gt; Make New Page (make sure it is visible in the navigation\u201d<\/li>\n<\/ul>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2282\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.1-212x300.png\" alt=\"\" width=\"212\" height=\"300\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.1-212x300.png 212w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.1.png 298w\" sizes=\"auto, (max-width: 212px) 100vw, 212px\" \/><\/a> <a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2283\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.2-300x105.png\" alt=\"\" width=\"300\" height=\"105\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.2-300x105.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.2-768x270.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-1.2.png 869w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<ul>\n<li>Name the Page According to the theme of your page.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><b>Step Two: Adding Buttons<\/b><\/h3>\n<ul>\n<li>Use this page as reference for the coding you do and the layout of the buttons. Do not make any edits to this page at all. <a href=\"https:\/\/cms.la.utexas.edu\/entity\/open.act?id=aa305bd7ac1148aa6d2e151b60189a21&amp;type=page\">https:\/\/cms.la.utexas.edu\/entity\/open.act?id=aa305bd7ac1148aa6d2e151b60189a21&amp;type=page<\/a><\/li>\n<li>To add buttons to a page in Cascade you have to find the CSS for the existing buttons and copy it to your own page. On the reference page go to edit &gt; main-content &gt; tools &gt; source code<\/li>\n<li>In red is the code for the contact button (Always leave orange). In green is the code for the body buttons.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-2.1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2284\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-2.1-300x297.png\" alt=\"\" width=\"412\" height=\"408\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-2.1-300x297.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-2.1-150x150.png 150w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-2.1.png 640w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<p>The link in the step above is to this page. You are expected to edit your page to have the same formating with minimum of three buttons, icons, text, hyperlinks, and page breaks.<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/Screen-Shot-2020-07-28-at-1.52.18-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3955\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/Screen-Shot-2020-07-28-at-1.52.18-PM.png\" alt=\"\" width=\"624\" height=\"1428\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/Screen-Shot-2020-07-28-at-1.52.18-PM.png 624w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/Screen-Shot-2020-07-28-at-1.52.18-PM-131x300.png 131w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/Screen-Shot-2020-07-28-at-1.52.18-PM-447x1024.png 447w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Step Three: Customizing Buttons<\/b><\/h3>\n<ul>\n<li>Find the code for the buttons and the style code so you can change the color of the rounded button. All three of the buttons you make will be the same color.<\/li>\n<li>Alter the code to customize the,\u2014change the green links, the text\u2026right now the rounded button is orange because it says id=bottom\u201d, but you can make it another color by changing the id.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-3.1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2285\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-3.1-300x19.png\" alt=\"\" width=\"537\" height=\"34\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-3.1-300x19.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-3.1.png 616w\" sizes=\"auto, (max-width: 537px) 100vw, 537px\" \/><\/a> <a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/Step-3.2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2286\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/Step-3.2.png\" alt=\"\" width=\"298\" height=\"228\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Step Four: Making an Icon<\/b><\/h3>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-4.1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2287\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-4.1-300x139.png\" alt=\"\" width=\"505\" height=\"234\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-4.1-300x139.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/09\/step-4.1.png 625w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/a><\/p>\n<ul>\n<li>Make your icon (150 x 100px) and relate it to your theme. Do not use the pen tool only the shape tool (keep the design simple and bold).<span class=\"Apple-converted-space\">&nbsp;<\/span><\/li>\n<li>Use the following STA volume folder for reference on the photoshop files: smb:\/\/file.laits.utexas.edu\/sta\/Bridget-Kessler\/audio\/video pages<\/li>\n<\/ul>\n<p>YOUR ICONS MUST:<\/p>\n<ol>\n<li>Be all one single color<\/li>\n<li>Contain a different image for each icon<\/li>\n<li>Have a minimum of three created<\/li>\n<li>Include the rounded rectangle border as shown in the example above.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3><b>Step Five: Finished<\/b><\/h3>\n<ul>\n<li>Save everything and check to see if it is live on the web.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Troubleshooting Tip:<\/strong><\/p>\n<p>You may run into an issue where you receive an error code after pasting code into the Cascade editor. If this happens, just close out the editor and log out of Cascade before trying again.<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3530\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps.png\" alt=\"\" width=\"3000\" height=\"1000\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps.png 3000w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps-768x256.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2019\/02\/basic-training-last-steps-1024x341.png 1024w\" sizes=\"auto, (max-width: 3000px) 100vw, 3000px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;&nbsp; The purpose of these instructions is to show you how to create buttons within the cascade site by editing the code. Make sure that the edits you make are still related to the theme you have been using so &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2019\/09\/09\/practice-creating-a-custom-layout-and-buttons\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":703,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200711,227824],"tags":[],"class_list":["post-2280","post","type-post","status-publish","format-standard","hentry","category-basic-trainings","category-cascade"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/703"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=2280"}],"version-history":[{"count":13,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2280\/revisions"}],"predecessor-version":[{"id":7392,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2280\/revisions\/7392"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=2280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=2280"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=2280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}