[{"id":901,"date":"2024-05-06T09:39:00","date_gmt":"2024-05-06T13:39:00","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brand-center\/?page_id=901"},"modified":"2024-05-06T09:39:00","modified_gmt":"2024-05-06T13:39:00","slug":"url-redirect-request","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/url-redirect-request\/","title":{"rendered":"URL Redirect Request"},"content":{"rendered":"<div id='wufoo-z1cl8f190nwc044'>\nFill out my <a href='https:\/\/alleghenycollege.wufoo.com\/forms\/z1cl8f190nwc044'>online form<\/a>.\n<\/div>\n<script type='text\/javascript'>var z1cl8f190nwc044;(function(d, t) {\nvar s = d.createElement(t), options = {\n'userName'      : 'alleghenycollege',    \n'formHash'      : 'z1cl8f190nwc044',    \n'autoResize'    :  true,   \n'height'        : '1147',      \n'async'         :  true,          \n'header'        : 'hide',      \n'host'          : 'wufoo.com',    \n'entSource'     : 'wordpress',   \n'defaultValues' : ''     \n,'ssl'          :  1           };\ns.src = ('https:' == d.location.protocol ? 'https:\/\/' : 'http:\/\/') + 'secure.wufoo.com\/scripts\/embed\/form.js';\ns.onload = s.onreadystatechange = function() {\nvar rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;\ntry { z1cl8f190nwc044 = new WufooForm();z1cl8f190nwc044.initialize(options);z1cl8f190nwc044.display(); } catch (e) {}}\nvar scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);\n})(document, 'script');<\/script> <noscript> <iframe height=\"1147\" allowTransparency=\"true\" sandbox=\"allow-top-navigation allow-scripts allow-popups allow-forms allow-same-origin allow-popups-to-escape-sandbox\" frameborder=\"0\" scrolling=\"no\" style=\"width:100%;border:none;\"src=\"https:\/\/alleghenycollege.wufoo.com\/embed\/z1cl8f190nwc044?entsource=wordpress\"><a href=\"https:\/\/alleghenycollege.wufoo.com\/forms\/z1cl8f190nwc044?entsource=wordpress\" rel=\"nofollow\">Fill out my Wufoo form!<\/a><\/iframe> <\/noscript>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":546,"featured_media":0,"parent":813,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-901","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=901"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/901\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/813"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":895,"date":"2024-04-12T09:39:41","date_gmt":"2024-04-12T13:39:41","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=895"},"modified":"2024-04-12T09:39:41","modified_gmt":"2024-04-12T13:39:41","slug":"status","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/status\/","title":{"rendered":"Status"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":546,"featured_media":0,"parent":813,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-895","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=895"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/895\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/813"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":891,"date":"2024-04-11T07:57:38","date_gmt":"2024-04-11T11:57:38","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=891"},"modified":"2024-04-11T07:57:38","modified_gmt":"2024-04-11T11:57:38","slug":"accessibility","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/accessibility\/","title":{"rendered":"Accessibility"},"content":{"rendered":"<h3>Introduction<\/h3>\n<p>Allegheny College is committed to providing an accessible experience to our online visitors. Please email <a href=\"mailto:web@allegheny.edu?subject=Accessibility\">web@allegheny.edu<\/a> for any questions or concerns related to online accessibility support services at Allegheny College.<\/p>\n<h3>Reasonable Accommodations<\/h3>\n<p>Individuals who need to request reasonable accommodations not inherent to online properties relating to accessing websites and web-services should email <a href=\"mailto:web@allegheny.edu?subject=Accessibility\">web@allegheny.edu<\/a>. Please make sure to include contact information such as an email address or telephone number at which they can be reached.<\/p>\n<h3>Online Accessibility<\/h3>\n<p>We strive to provide an accessible online experience for our visitors. In the event that any user experiences accessibility issues with our website or other online properties, please notify us by sending an email to <a href=\"mailto:web@allegheny.edu?subject=Accessibility\">web@allegheny.edu<\/a>. Please include any possible details related to the accessibility difficulty that you feel will help assist us in identifying and remedying the issue.<\/p>\n<h3>Third-Party Websites<\/h3>\n<p>Allegheny College on occasion contracts out with other secure 3rd party websites to provide additional online tools and services. These 3rd party sites are also held to the highest accessibility requirements. Any issues reported related to a 3rd party site will be diligently followed up to ensure a positive resolution.<\/p>\n<h3>Feedback<\/h3>\n<p>We are always working to ensure that our products and services are accessible to all visitors. If you have an suggestions or questions about online accessibility support efforts, please contact <a href=\"mailto:web@allegheny.edu?subject=Accessibility\">web@allegheny.edu<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Allegheny College is committed to providing an accessible experience to our online visitors. Please email web@allegheny.edu for any questions or concerns related to online accessibility support services at Allegheny College. Reasonable Accommodations Individuals who need to request reasonable accommodations not inherent to online properties relating to accessing websites and web-services should email web@allegheny.edu. Please [&#8230;]<\/p>\n<p><a class=\"mt-5\" href=\"https:\/\/sites.allegheny.edu\/brand-center\/web\/accessibility\/\">Continue Reading &#8220;Accessibility&#8221;<\/a><\/p>\n","protected":false},"author":546,"featured_media":0,"parent":813,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-891","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=891"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/891\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/813"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":873,"date":"2024-04-11T07:44:07","date_gmt":"2024-04-11T11:44:07","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=873"},"modified":"2024-04-12T09:42:37","modified_gmt":"2024-04-12T13:42:37","slug":"basics-of-html","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/basics-of-html\/","title":{"rendered":"Basics of HTML"},"content":{"rendered":"<ul>\n<li><a href=\"#1\">What is HTML?<\/a><\/li>\n<li><a href=\"#2\">What-you-see-is-what-you-get<\/a><\/li>\n<li><a href=\"#3\">Simple HTML guide<\/a><\/li>\n<\/ul>\n<h3 id=\"1\" class=\"alt\">What is HTML?<\/h3>\n<p>HTML is the basic building blocks of WordPress, or any other website. When you view a website, the information seen is almost always coded using HTML on the back end.<\/p>\n<h4>Why should I learn HTML?<\/h4>\n<p>One purpose of this section is to give editors the ability to use widgets, since widgets are edited using HTML and lack the visual editor like pages do. Also, the Visual Editor creates HTML, and knowing how that HTML works will give you much greater control of your website. WordPress editors that have basic knowledge of HTML will be much more effective.<\/p>\n<h4>This guide:<\/h4>\n<p>This guide is not a comprehensive guide to HTML, but a simple guide to allow editors to be better equipped when running a site and making changes to their widgets. This guide only scratches the surface of HTML.<\/p>\n<h3 id=\"2\" class=\"alt\">What-you-see-is-what-you-get<\/h3>\n<p>When editors create content for a website, they are using what is called a WYSIWYG (what you see is what you get). What the WYSIWYG does is give the user simple word processing tools, that is converted to HTML, so anyone is able to create content for their site. To see examples of this, after you make a change in the editor, change the tab from &#8220;Visual&#8221; to &#8220;Text&#8221; to see the corresponding changes made in HTML.<\/p>\n<p><a href=\"https:\/\/sitesmedia.s3.amazonaws.com\/web\/files\/2013\/09\/Screen-Shot-2013-09-09-at-2.19.22-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-687\" src=\"https:\/\/sitesmedia.s3.amazonaws.com\/web\/files\/2013\/09\/Screen-Shot-2013-09-09-at-2.19.22-PM.png\" alt=\"Screen Shot 2013-09-09 at 2.19.22 PM\" width=\"141\" height=\"50\" \/><\/a><\/p>\n<h3 id=\"3\" class=\"alt\">Simple HTML:<\/h3>\n<p>The following is mostly going to be a side-by-side comparison between the WYSIWYG that we are used to, and HTML. But before we get into that, here&#8217;s a few simple concepts that need to be covered first:<\/p>\n<ul>\n<li>All text in HTML is contained within tags, like &lt;p&gt;.<\/li>\n<li>Whenever there is an opened html tag, like &lt;p&gt;, there must also be a closing tag, like &lt;\/p&gt;.<\/li>\n<li>More important information:<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/sitesmedia.s3.amazonaws.com\/testblog\/files\/2012\/01\/wysiwyg-html.jpg\"><img decoding=\"async\" class=\"aligncenter\" title=\"wysiwyg-html\" src=\"https:\/\/sitesmedia.s3.amazonaws.com\/testblog\/files\/2012\/01\/wysiwyg-html.jpg\" alt=\"wysiwyg vs html\" \/><\/a><\/p>\n<ol>\n<li><strong>Heading 3 tag:<\/strong> Headings are used as titles for a section of text. Heading 3&#8217;s are more important than heading 4&#8217;s.<\/li>\n<li><strong>Paragraph tags:<\/strong> Paragraph tags are the default text type. Paragraph tags are needed for widgets, but for pages, paragraph tags are added automatically and are hidden.<\/li>\n<li><strong>Link tags:<\/strong> Text in link tags become a hyperlink, which leads to another location specified if clicked on. The web address is placed in the href attribute: href=&#8221;https:\/\/yahoo.com&#8221;.<\/li>\n<li><strong>Heading 4 tag:<\/strong> Heading 4 is a heading tag that is for information less important than heading 3&#8217;s, or a sub-title to heading 3&#8217;s.<\/li>\n<li><strong>Img tag:<\/strong>Img tags, or image tags, are what allows images to be displayed in a website. The above example is an img tag in its simplest form, with just source attribute to give an address to the image. Within the context of WordPress, the image source can be found after upload in the properties under link URL. Not that img do no have closing tags, and end with \/&gt;.There are other attributes that can (and should) be used in image tags. There is the alt tag, which is discussed more in the <a href=\"https:\/\/sites.allegheny.edu\/web\/image-properties\/\">image properties<\/a> section of this guide. An example of an alt tag attribute: alt=&#8221;building image&#8221;.You can also set width and height, or a class. For example, classes are set automatically whenever you set an alignment in the image properties. Example of class: alignleft, alignright, and aligncenter. An example of an image with the width and height set, and an alignment class: &lt;img src=&#8221;#&#8221; width =&#8221;400px&#8221; height=&#8221;300px&#8221; class=&#8221;alignleft&#8221; \/&gt;.<\/li>\n<li><strong>Unordered list:<\/strong> Creates lists with using bullets. The li tags have to be located within ul open and close tag.<\/li>\n<li><strong>Ordered list:<\/strong> Creates lists with ordered numbers. The li open and close tags have to be located within ol open and close tags.<\/li>\n<\/ol>\n<p>There is much more to HTML, but this is all that needs to be known in order to be able to edit widgets, or to give a greater understanding of HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is HTML? What-you-see-is-what-you-get Simple HTML guide What is HTML? HTML is the basic building blocks of WordPress, or any other website. When you view a website, the information seen is almost always coded using HTML on the back end. Why should I learn HTML? One purpose of this section is to give editors the [&#8230;]<\/p>\n<p><a class=\"mt-5\" href=\"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/basics-of-html\/\">Continue Reading &#8220;Basics of HTML&#8221;<\/a><\/p>\n","protected":false},"author":546,"featured_media":0,"parent":836,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-873","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=873"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/873\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/836"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":871,"date":"2024-04-11T07:43:42","date_gmt":"2024-04-11T11:43:42","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=871"},"modified":"2024-04-12T09:43:54","modified_gmt":"2024-04-12T13:43:54","slug":"widgets","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/widgets\/","title":{"rendered":"Widgets"},"content":{"rendered":"<p>A widget is an external application that can be run on the website to increase ease of navigation for users. The main widgets that Allegheny uses are as follows:<\/p>\n<h4>Text:<\/h4>\n<p>A text widget is simply a text box to be placed on the sidebar of the site.<\/p>\n<h4>Search:<\/h4>\n<p>Creates a search bar with a custom search of the Allegheny site.<\/p>\n<h4>Recent Posts:<\/h4>\n<p>Automatically displays the last several posts on the site.<\/p>\n<h4>Contact:<\/h4>\n<p>The most used widget, this is important for allowing users to contact the department directly, and is a primary method for finding contact information, along with the directory. Information in the field includes geographic location, phone, fax, and email addresses, as well as social media links.<\/p>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>\n<p>&lt;ul class=&#8221;icons&#8221;&gt;<br \/>\n&lt;li&gt;&lt;i class=&#8221;fa fa-map-marker&#8221;&gt;&lt;\/i&gt;454 House&lt;\/li&gt;<br \/>\n&lt;li&gt;&lt;i class=&#8221;fa fa-phone&#8221;&gt;&lt;\/i&gt;814-867-309 &lt;\/li&gt;<br \/>\n&lt;li&gt;&lt;i class=&#8221;fa fa-fax&#8221;&gt;&lt;\/i&gt;555-555-5555 &lt;\/li&gt;<br \/>\n&lt;li&gt;&lt;i class=&#8221;fa fa-envelope&#8221;&gt;&lt;\/i&gt;&lt;a href=&#8221;mailto:name@allegheny.edu&#8221;&gt; name@allegheny.edu&lt;\/a&gt;&lt;\/li&gt;<br \/>\n&lt;li&gt;&lt;i class=&#8221;fa fa-facebook&#8221;&gt;&lt;\/i&gt;&lt;a href=&#8221;https:\/\/www.facebook.com\/alleghenycollege\/&#8221;&gt;Like us on Facebook&lt;\/a&gt;&lt;\/li&gt;<br \/>\n&lt;\/ul&gt;<\/p>\n<\/div>\n<p>In the Contact widget, full html code must be used, without the short code that is used on the rest of the site. Additionally, any icons used must use the full &#8220;fa fa-ICON&#8221; syntax.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A widget is an external application that can be run on the website to increase ease of navigation for users. The main widgets that Allegheny uses are as follows: Text: A text widget is simply a text box to be placed on the sidebar of the site. Search: Creates a search bar with a custom [&#8230;]<\/p>\n<p><a class=\"mt-5\" href=\"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/widgets\/\">Continue Reading &#8220;Widgets&#8221;<\/a><\/p>\n","protected":false},"author":546,"featured_media":0,"parent":836,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-871","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=871"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/871\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/836"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":869,"date":"2024-04-11T07:43:16","date_gmt":"2024-04-11T11:43:16","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=869"},"modified":"2024-04-12T09:43:48","modified_gmt":"2024-04-12T13:43:48","slug":"youtube","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/youtube\/","title":{"rendered":"YouTube"},"content":{"rendered":"<p>YouTube videos can be embedded into sites. Below are an example and an explanation of how to add a YouTube video to your own sites and posts.<\/p>\n<hr>\n<h3>Code \/ Usage Example<\/h3>\n<h4>Shortcode Example:<\/h4>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>\n<p>[youtube title=\"Video: The Allegheny College Experience\" id=\"JpaZRYhXmO4\"]<\/p>\n<\/div>\n<div class=\"box box-blue box-align-\"><div class=\"h4-title\"><span>Attributes<\/span><\/div><p>\n<ul>\n<li><strong>Id:<\/strong> Take the &#8220;id&#8221; from the URL of the video, for example: youtube.com\/watch?v=<strong>JpaZRYhXmO4<\/strong>. In the previous example &#8220;<strong>JpaZRYhXmO4<\/strong>&#8221; is the id.<\/li>\n<li><strong>Title:\u00a0<\/strong>The title is important for accessibility reasons, so a description of the video is read to those with certain disabilities.<\/li>\n<\/ul>\n<\/div>\n<h4>Usage Example:<\/h4>\n<div class=\"ac-video-wrapper\"><iframe loading=\"lazy\" width=\"100%\" height=\"100%\" src=\"https:\/\/youtube.com\/embed\/JpaZRYhXmO4\" title=\"The Allegheny College Experience\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>YouTube videos can be embedded into sites. Below are an example and an explanation of how to add a YouTube video to your own sites and posts. Code \/ Usage Example Shortcode Example: Usage Example:<\/p>\n","protected":false},"author":546,"featured_media":0,"parent":836,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-869","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=869"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/869\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/836"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":867,"date":"2024-04-11T07:42:47","date_gmt":"2024-04-11T11:42:47","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=867"},"modified":"2024-04-12T09:43:43","modified_gmt":"2024-04-12T13:43:43","slug":"tables","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"<ul>\n<li><a href=\"#1\">What are tables<\/a><\/li>\n<li><a href=\"#2\">Editing your tables<\/a><\/li>\n<li><a href=\"#3\">Table container<\/a><\/li>\n<\/ul>\n<h3 class=\"alt\" id=\"1\">What are tables?<\/h3>\n<p><strong>Tables, like Excel Spreadsheets, are divided into rows and columns, and are great for organizing data, images, and other information.<\/strong> Tables are not good for controlling the layout of a website.<\/p>\n<table>\n<thead>\n<tr align=\"center\">\n<td style=\"text-align: center;\" colspan=\"2\">Fruit<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr align=\"center\">\n<td style=\"text-align: center;\" align=\"center\">Apples<\/td>\n<td style=\"text-align: center;\" align=\"center\">Oranges<\/td>\n<\/tr>\n<tr align=\"center\">\n<td style=\"text-align: center;\" align=\"center\">Kiwis<\/td>\n<td style=\"text-align: center;\" align=\"center\">Bananas<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>To create a table, click on the Insert New Table button on the third row far left of the Editor Toolbar.<\/strong>\u00a0Once you add the table to your site, a screen entitled &#8220;insert\/edit table&#8221; will appear. Here you will be able to change settings to set up your table. You can change the amount of columns or rows, or change text alignment, but most of the other settings will have no effect on the table within WordPress. Click insert, and the table will appear in the editor.<\/p>\n<div class=\"box box-tip box-align-\"><div class=\"h4-title\"><i class=\"fa fa-star\"><\/i><span>Tip<\/span><\/div>There are a lot of settings when creating a table, but most of the settings are disabled for out website. Columns and rows are the minimum requirement to create a table<\/div>\n<p>Add data and text into the tables, and you will have a working table on your page.<\/p>\n<h3 class=\"alt\" id=\"2\">Editing your table:<\/h3>\n<figure id=\"attachment_493\" aria-describedby=\"caption-attachment-493\" style=\"width: 396px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sitesmedia.s3.amazonaws.com\/testblog\/files\/2012\/01\/Screen-Shot-2012-01-23-at-3.58.47-PM1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-493 \" title=\"Screen Shot 2012-01-23 at 3.58.47 PM\" alt=\"Tables menu\" src=\"https:\/\/sitesmedia.s3.amazonaws.com\/testblog\/files\/2012\/01\/Screen-Shot-2012-01-23-at-3.58.47-PM1.png\" width=\"396\" height=\"33\" \/><\/a><figcaption id=\"caption-attachment-493\" class=\"wp-caption-text\">Tables menu<\/figcaption><\/figure>\n<p>A list of the buttons and their function, from left to right:<\/p>\n<p><strong>Table row properties:<\/strong> This button allows you to make changes to an entire row, including changing the row type, changing alignment, changing rows height, etc. Note the drop down menu that allows you to make changes to odd, even, or all rows, rather than just the row selected.<\/p>\n<div class=\"box box-green box-align-\"><p>Try making the top row of a table a header row!<\/p><\/div>\n<p><strong>Table cell properties:<\/strong>\u00a0Not available<\/p>\n<p><strong>Insert row before:\u00a0 <\/strong>Insert row before current row containing the cursor.<\/p>\n<p><strong>Insert row after:<\/strong> Insert row after current row containing cursor.<\/p>\n<p><strong>Delete row: <\/strong>Delete row currently containing cursor.<\/p>\n<p><strong>Insert column before: <\/strong>Insert column before column containing cursor.<\/p>\n<p><strong>Insert column after: <\/strong>Insert column after column containing cursor.<\/p>\n<p><strong>Delete column:<\/strong> Delete current column that is containing cursor.<\/p>\n<p><strong>Split merged cells:<\/strong>\u00a0This will undo a merging of cells, and re-split.<\/p>\n<p><strong>Merge table cells: <\/strong>After selecting multiple columns in a row, this button will merge the columns into one row. This can be useful for the top row header.<\/p>\n<h3 class=\"alt\" id=\"3\">Table Containers<\/h3>\n<p>All Allegheny College websites are &#8220;mobile friendly,&#8221; which means the website scales with device widths (narrow your browser window to see what this means!) This presents a challenge for wide tables with a lot of columns. <strong>How do we fit wide tables on a narrow screen?<\/strong><br \/>\nA short code was created to solve this issue called table container. &#091;tcontainer&#093;TABLE HTML&#091;\/tcontainer&#093; Place this short code (open and closing tags) around your table to make wide tables scale well on mobile devices.<\/p>\n<h4>Example HTML<\/h4>\n<p>&#091;tcontainer&#093;<\/p>\n<p>&lt;table&gt;<br \/>\n&lt;tbody&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Row &lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Row 2&lt;\/td&gt;<br \/>\n&lt;td&gt;Column&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/tbody&gt;<br \/>\n&lt;\/table&gt;<\/p>\n<p>&#091;\/tcontainer&#093;<\/p>\n<h4>Table container in action<\/h4>\n<div class=\"table-container\">\n<table>\n<tbody>\n<tr>\n<td>Row 1<\/td>\n<td>Column 1<\/td>\n<td>Column 2<\/td>\n<td>Column 3<\/td>\n<td>Column 4<\/td>\n<td>Column 5<\/td>\n<td>Column 6<\/td>\n<td>Column 7<\/td>\n<td>Column 8<\/td>\n<td>Column 9<\/td>\n<td>Column 10<\/td>\n<td>Column 11<\/td>\n<td>Column 12<\/td>\n<td>Column 13<\/td>\n<td>Column 14<\/td>\n<td>Column 15<\/td>\n<td>Column 16<\/td>\n<td>Column 17<\/td>\n<td>Column 18<\/td>\n<td>Column 19<\/td>\n<\/tr>\n<tr>\n<td>Row 1<\/td>\n<td>Column 1<\/td>\n<td>Column 2<\/td>\n<td>Column 3<\/td>\n<td>Column 4<\/td>\n<td>Column 5<\/td>\n<td>Column 6<\/td>\n<td>Column 7<\/td>\n<td>Column 8<\/td>\n<td>Column 9<\/td>\n<td>Column 10<\/td>\n<td>Column 11<\/td>\n<td>Column 12<\/td>\n<td>Column 13<\/td>\n<td>Column 14<\/td>\n<td>Column 15<\/td>\n<td>Column 16<\/td>\n<td>Column 17<\/td>\n<td>Column 18<\/td>\n<td>Column 19<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Note that the website is designed to be able to scale down to a minimum of 320px. Any table with explicitly stated widths wider than 320px will require a tcontainer.<\/p>\n<p>Any table without a set width, and without a lot of columns or content usually do not require a tcontainer. Tables are usually mobile friendly right &#8220;out of the box&#8221;. But the best way to tell if a tcontainer is required is by resizing the browser window to see if the table or website breaks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What are tables Editing your tables Table container What are tables? Tables, like Excel Spreadsheets, are divided into rows and columns, and are great for organizing data, images, and other information. Tables are not good for controlling the layout of a website. Fruit Apples Oranges Kiwis Bananas To create a table, click on the Insert [&#8230;]<\/p>\n<p><a class=\"mt-5\" href=\"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/tables\/\">Continue Reading &#8220;Tables&#8221;<\/a><\/p>\n","protected":false},"author":546,"featured_media":0,"parent":836,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-867","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=867"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/867\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/836"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":865,"date":"2024-04-11T07:42:17","date_gmt":"2024-04-11T11:42:17","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=865"},"modified":"2024-04-12T09:43:37","modified_gmt":"2024-04-12T13:43:37","slug":"staff-lists","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/staff-lists\/","title":{"rendered":"Staff Lists"},"content":{"rendered":"<p>The staff shortcode is a quick way to automatically gather specific staff from the directory and display it on your site. Below are an explanation and demonstration of how to use the shortcode.<\/p>\n<h3>Code \/ Usage Example<\/h3>\n<h4>Shortcode Example:<\/h4>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>\n<p>[staff department=\"International Education\" include=\"326\"]<br \/>\n[staff department=\"International Education\" exclude=\"326\"]<\/p>\n<\/div>\n<div class=\"box box-blue box-align-\"><div class=\"h4-title\"><span>Attributes<\/span><\/div><p>\n<ul>\n<li><strong>Staff Department:<\/strong> This fetches the staff from a specified department via the staff directory. <a href=\"https:\/\/sites.allegheny.edu\/directory\/\">https:\/\/sites.allegheny.edu\/directory\/<\/a><\/li>\n<li><strong>Include:<\/strong> This will fetch one specific staff member based on their id number. This can be found in the WordPress URL that corresponds to the staff member in the directory (ie https:\/\/sites.allegheny.edu\/directory\/wp-admin\/post.php?post=<strong>345<\/strong>&amp;action=edit). This can be used to help structure the staff site as desired.<\/li>\n<li><strong>Exclude:<\/strong> This will fetch every staff member except for the specified member based on the id given.<\/li>\n<li><strong>Style:<\/strong> There are two styles available. Default, where no style has to be specified, which creates a list of staff. Alt, where style must be specified (style=&#8221;alt&#8221;), which creates tiles that have information for each staff member.<\/li>\n<\/ul>\n<\/div>\n<h4>Usage Example: Default<\/h4>\n<p>Department does not exist, or there is no one in this department.<br \/>\nDepartment does not exist, or there is no one in this department.<\/p>\n<h4>Usage Example: Alt<\/h4>\nDepartment does not exist, or there is no one in this department.\n","protected":false},"excerpt":{"rendered":"<p>The staff shortcode is a quick way to automatically gather specific staff from the directory and display it on your site. Below are an explanation and demonstration of how to use the shortcode. Code \/ Usage Example Shortcode Example: Usage Example: Default Usage Example: Alt<\/p>\n","protected":false},"author":546,"featured_media":0,"parent":836,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-865","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=865"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/865\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/836"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":863,"date":"2024-04-11T07:41:53","date_gmt":"2024-04-11T11:41:53","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=863"},"modified":"2024-04-12T09:43:31","modified_gmt":"2024-04-12T13:43:31","slug":"iframe","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/iframe\/","title":{"rendered":"Iframe"},"content":{"rendered":"<p>iframes can be used to embed videos in pages with these videos not limited to YouTube (ie Facebook videos). Below is an explanation of how to add an iframe to your site.<\/p>\n<hr>\n<h3>Code \/ Usage Example<\/h3>\n<h4>Shortcode Example:<\/h4>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>\n<p>[iframe src=\"https:\/\/www.facebook.com\/plugins\/video.php?href=https%3A%2F%2Fwww.facebook.com%2F119808651391996%2Fvideos%2F2392486974312498%2F&amp;show_text=0&amp;width=560\" title=\"Video: Urinetown the Musical Preview\"]<\/p>\n<\/div>\n<div class=\"box box-blue box-align-\"><div class=\"h4-title\"><span>Attributes<\/span><\/div><p>\n<ul>\n<li><strong>src:<\/strong> Take the entire URL for the desired video.<\/li>\n<li><strong>Title:\u00a0<\/strong>The title is important for accessibility reasons, so a description of the video is read to those with certain disabilities.<\/li>\n<\/ul>\n<\/div>\n<h4>Usage Example:<\/h4>\n<div class=\"ac-video-wrapper\"><iframe loading=\"lazy\" width=\"100%\" height=\"100%\" src=\"https:\/\/www.facebook.com\/plugins\/video.php?href=https%3A%2F%2Fwww.facebook.com%2F119808651391996%2Fvideos%2F2392486974312498%2F&amp;show_text=0&amp;width=560\" title=\"Video: Urinetown the Musical Preview\"><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>iframes can be used to embed videos in pages with these videos not limited to YouTube (ie Facebook videos). Below is an explanation of how to add an iframe to your site. Code \/ Usage Example Shortcode Example: Usage Example:<\/p>\n","protected":false},"author":546,"featured_media":0,"parent":836,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-863","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=863"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/863\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/836"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":861,"date":"2024-04-11T07:41:15","date_gmt":"2024-04-11T11:41:15","guid":{"rendered":"https:\/\/sites.allegheny.edu\/brandcenter\/?page_id=861"},"modified":"2024-04-12T09:43:26","modified_gmt":"2024-04-12T13:43:26","slug":"icons","status":"publish","type":"page","link":"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/icons\/","title":{"rendered":"Icons"},"content":{"rendered":"<ul>\n<li><a href=\"#icon\">Using the icon HTML code<\/a><\/li>\n<li><a href=\"#button\">Using icons in buttons<\/a><\/li>\n<\/ul>\n<p>The website has enabled a large network of icons called FontAwesome, which can be used on their own or in buttons, and include a wide variety of options.<\/p>\n<p><b>A few examples:<\/b> <i class=\"fa fa-car\" aria-hidden=\"true\"><\/i> <i class=\"fa fa-university\" aria-hidden=\"true\"><\/i> <i class=\"fa fa-book fa-lg\" aria-hidden=\"true\"><\/i><\/p>\n<a target=\"_self\" class=\"button icon button-medium normal  yellow\" href=\"#\"><i class=\"fa fa-star  pull-left\"><\/i>Button with star icon.<\/a>\n<h3 id=\"icon\" class=\"alt\">Using the Icon HTML Code<\/h3>\n<p>The basic form of the code produces a black, regular sized icon. Just use the name attribute to choose which icon you&#8217;d like to display and add aria-hidden=&#8221;true&#8221; to have screen readers ignore the icon:<\/p>\n<p><div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>\n&lt;i class=&#8221;fa fa-institution&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;<\/p>\n<\/div><br \/>\nThis HTML code produces: <i class=\"fa fa-institution\" aria-hidden=\"true\"><\/i><\/p>\n<div class=\"box box-notice box-align-\"><div class=\"h4-title\"><i class=\"fa fa-exclamation\"><\/i><span>Notice<\/span><\/div>\nYou can view the full list of available icons at <a target=\"_self\" class=\"button button-medium normal yellow \" href=\"https:\/\/fontawesome.com\/v4.7.0\/icons\/\">Font Awesome<\/a><\/p>\n<p><b>Remember!<\/b> the &#8220;fa-&#8221; from the name must be included for use of Awesome Font on Allegheny&#8217;s website.<br \/>\n<\/div>\n<h3>Larger icons<\/h3>\n<p>To increase the size of an icon, add <b>&#8220;fa-lg&#8221;<\/b>, <b>&#8220;fa-2x&#8221;<\/b>, <b>&#8220;fa-3x&#8221;<\/b>, <b>&#8220;fa-4x&#8221;<\/b>, or <b>&#8220;fa-5x&#8221;<\/b> as part of the class.<\/p>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>&lt;i class=&#8221;fa fa-space-shuttle fa-3x&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;<\/p><\/div>\n<h4>You can use the following options in the size attribute<\/h4>\n<p><em>No size specified<\/em>: <i class=\"fa fa-space-shuttle\" aria-hidden=\"true\"><\/i><br \/>\n<b>Large:<\/b> <i class=\"fa fa-space-shuttle fa-lg\" aria-hidden=\"true\"><\/i><br \/>\n<b>2x:<\/b> <i class=\"fa fa-space-shuttle fa-2x\" aria-hidden=\"true\"><\/i><br \/>\n<b>3x:<\/b> <i class=\"fa fa-space-shuttle fa-3x\" aria-hidden=\"true\"><\/i><br \/>\n<b>4x:<\/b> <i class=\"fa fa-space-shuttle fa-4x\" aria-hidden=\"true\"><\/i><br \/>\n<b>5x:<\/b> <i class=\"fa fa-space-shuttle fa-5x\" aria-hidden=\"true\"><\/i><\/p>\n<h3>Alignment<\/h3>\n<p>You can use icons as an image featured in the flow of regular text by adding a <b>fa-pull<\/b> to the class. The options are <b>fa-pull-left<\/b> or <b>fa-pull-right<\/b>.<\/p>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>&lt;i class=&#8221;fa fa-quote-left fa-pull-left&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;<\/p><\/div>\n<div class=\"box box-yellow box-align-\"><p><i class=\"fa fa-quote-left fa-5x fa-pull-left\" aria-hidden=\"true\"><\/i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum quam vitae tortor ornare egestas. Nunc gravida hendrerit nisl et dictum. Quisque augue nunc, sodales in pulvinar non, ultricies vel quam. Nunc consequat urna non mollis varius. Sed hendrerit urna tempus convallis vestibulum. Mauris sagittis, nisl id eleifend pharetra, odio metus eleifend purus, id tincidunt nisl nibh nec dui. Phasellus mollis lobortis purus, et iaculis leo ornare ut. Ut pulvinar mollis purus. Sed rhoncus purus neque, vel tempor lectus egestas vel. In a aliquam ligula. Morbi euismod velit non molestie euismod. Morbi id iaculis libero, eget faucibus tortor.<\/p><\/div>\n<h3>Color<\/h3>\n<p>You can also change the color of an icon by adding color to the class.<\/p>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>&lt;i class=&#8221;fa fa-umbrella fa-2x ltblue&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;<\/p><\/div>\n<p>Example: <i class=\"fa fa-umbrella fa-2x ltblue\" aria-hidden=\"true\"><\/i><\/p>\n<p>Available colors include: <b>blue, ltblue, gold (or yellow), orange, pink, green, silver, copper, black, red,<\/b> and <b>drkblue<\/b>.<\/p>\n<h3>Other attributes<\/h3>\n<p>There are several other options that can be added to icons by adding the attribute to the class.<\/p>\n<h4>Available attributes<\/h4>\n<p><b>fa-border<\/b> creates bordered icons <div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>&lt;i class=&#8221;fa fa-tachometer fa-2x fa-border&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;<\/p><\/div><br \/>\nExample: <i class=\"fa fa-tachometer fa-2x fa-border\" aria-hidden=\"true\"><\/i><\/p>\n<p>Use the\u00a0<strong>fa-rotate-*<\/strong> \u00a0and\u00a0<strong>fa-flip-*<\/strong> classes to arbitrarily rotate and flip icons.<\/p>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>\n<p>&lt;i class=&#8221;fa fa-bold fa-2x fa-rotate-90&#8243; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;<\/p>\n<p>&lt;i class=&#8221;fa fa-bold fa-2x fa-flip-horizontal&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;<\/p>\n<\/div>\n<p>Example:<br \/>\n<i class=\"fa fa-bold fa-2x fa-rotate-90\" aria-hidden=\"true\"><\/i><\/p>\n<p><\/p>\n<p>Other variations are: <b>rotate-180<\/b>, <b>rotate-270<\/b>, <b>flip-verticle<\/b><\/p>\n<div class=\"box box-tip box-align-\"><div class=\"h4-title\"><i class=\"fa fa-star\"><\/i><span>Tip<\/span><\/div>More options included with Font Awesome can be found <a href=\"https:\/\/fontawesome.com\/v4.7.0\/examples\/\">on the Font Awesome website<\/a>.<\/div>\n<h3>Stacking<\/h3>\n<p>You can stack icons for more variety by enclosing multiple icons in the stacking code.<\/p>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>\n&lt;span class=&#8221;fa-stack fa-lg&#8221;&gt;<br \/>\n&lt;i class=&#8221;fa fa-circle fa-stack-2x yellow&#8221;&gt;&lt;\/i&gt;<br \/>\n&lt;i class=&#8221;fa fa-camera fa-stack-1x&#8221;&gt;&lt;\/i&gt;<br \/>\n&lt;\/span&gt;<\/p>\n<\/div>\n<p>The previous code produces the camera icon on top of a circle:<\/p>\n<p><span class=\"fa-stack fa-lg\"><br \/>\n<i class=\"fa fa-circle fa-stack-2x yellow\"><\/i><br \/>\n<i class=\"fa fa-camera fa-stack-1x\"><\/i><br \/>\n<\/span><\/p>\n<p><div class=\"clear-floats\"><\/div><br \/>\nA few things to pay attention to:<\/p>\n<ul>\n<li>Generally, when stacking icons, one has to be larger than the other (for example, so an icon can fit inside of a circle). Use <strong>fa-stack-1x <\/strong>for the regularly sized icon, and <strong>fa-stack-2x<\/strong>\u00a0for the larger icon.<\/li>\n<li>You control the size of the stacked icons by adding the size attribute to the stack span class: <strong>fa-lg<\/strong>, <strong>fa-2x<\/strong>, etc.<\/li>\n<\/ul>\n<p>Other than these stipulations, icons behave the same way as before.<br \/>\n<h3 class=\"alt\">Icons in buttons<\/h3><br \/>\nYou can add icons to buttons by adding the icon attribute. You can view how to use buttons <a href=\"https:\/\/sites.allegheny.edu\/web\/buttons\/\">on our subsite for buttons<\/a>.<\/p>\n<div class=\"box box-code box-align-\"><h4><i class=\"fa fa-code\"><\/i><span>Code<\/span><\/h4><p>[button icon=\"angle-right\"]Button Text[\/button]<\/p><\/div>\n<p>Previous code produces <a target=\"_self\" class=\"button icon button-medium normal  yellow\" href=\"#\"><i class=\"fa fa-angle-right  pull-left\"><\/i>Button Text<\/a><\/p>\n<p><div class=\"box box-tip box-align-\"><div class=\"h4-title\"><i class=\"fa fa-star\"><\/i><span>Tip<\/span><\/div>You can have the icon appear on the right by using <b>ialign=&#8221;right&#8221;<\/b><\/div><br \/>\n<div class=\"box box-tip box-align-\"><div class=\"h4-title\"><i class=\"fa fa-star\"><\/i><span>Tip<\/span><\/div>You can add the other standard attributes by using <b>iatt=&#8221;&#8221;<\/b>. Note that many attributes might not work correctly in buttons.<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using the icon HTML code Using icons in buttons The website has enabled a large network of icons called FontAwesome, which can be used on their own or in buttons, and include a wide variety of options. A few examples: Using the Icon HTML Code The basic form of the code produces a black, regular [&#8230;]<\/p>\n<p><a class=\"mt-5\" href=\"https:\/\/sites.allegheny.edu\/brand-center\/web\/advanced-wordpress-guides\/icons\/\">Continue Reading &#8220;Icons&#8221;<\/a><\/p>\n","protected":false},"author":546,"featured_media":0,"parent":836,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-861","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/comments?post=861"}],"version-history":[{"count":0,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/861\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/pages\/836"}],"wp:attachment":[{"href":"https:\/\/sites.allegheny.edu\/brand-center\/wp-json\/wp\/v2\/media?parent=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}]