{"id":3549,"date":"2017-06-16T11:53:46","date_gmt":"2017-06-16T15:53:46","guid":{"rendered":"http:\/\/itg.emerson.edu\/word\/?p=3549"},"modified":"2017-06-16T11:53:46","modified_gmt":"2017-06-16T15:53:46","slug":"customizing-your-word-emerson-site-with-css","status":"publish","type":"post","link":"https:\/\/websites.emerson.edu\/itg\/customizing-your-word-emerson-site-with-css\/","title":{"rendered":"Customizing your word.emerson site with CSS"},"content":{"rendered":"<p><span style=\"font-weight: 400\">When using a WordPress blog (either on <a href=\"http:\/\/word.emerson.edu\" target=\"_blank\" rel=\"noopener\">word.emerson.edu<\/a> or <a href=\"http:\/\/emerson.build\" target=\"_blank\" rel=\"noopener\">emerson.build<\/a>) for a course, the theme you choose will provide certain options for customization. To make style changes beyond those options, you will need to dip into the site\u2019s CSS. <\/span><b>Note:<\/b><span style=\"font-weight: 400\"> If you choose to use CSS to customize your site beyond the options provided by your theme, you will be responsible for writing and troubleshooting your own code. ITG will respond to any requests for help that come in from members of the Emerson community, but our support of custom CSS is limited. <\/span><\/p>\n<p><span style=\"font-weight: 400\">CSS (Cascading Stylesheets) code is what tells your browser how the content on the current page should look. It\u2019s a powerful tool to have in your belt if you\u2019re going to be publishing content on the web. To get started with CSS, I recommend taking some time to do one (or more) of the tutorials available on the web. Here are a couple of ones I\u2019ve seen to get you started:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><a href=\"http:\/\/www.htmldog.com\/guides\/css\/beginner\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">HTML Dog\u2019s CSS Beginner Tutorial<\/span><\/a><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">W3 Schools CSS Tutorial<\/span><\/a><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400\">Making new styles for your site<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Once you have some general CSS knowledge, it\u2019s time to use that to customize your site! <\/span><\/p>\n<p><span style=\"font-weight: 400\">If you\u2019re planning to use CSS to change the colors of any elements on your site, you should ensure that the colors you\u2019re choosing have enough contrast to help all viewers of your site read your content. Sites like <a href=\"http:\/\/colorsafe.co\/\" target=\"_blank\" rel=\"noopener\">Color Safe &#8211; accessible web color combinations<\/a>\u00a0<\/span><span style=\"font-weight: 400\">and the <a href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAIM Color Contrast Checker<\/a> <\/span><span style=\"font-weight: 400\">can help with this.<\/span><\/p>\n<p><span style=\"font-weight: 400\">(Note: The following part of the post assumes you\u2019re using Google\u2019s Chrome browser. If you\u2019re using a different browser, take a look at the information on WordPress.com\u2019s Support site for <a href=\"https:\/\/en.support.wordpress.com\/custom-design\/how-to-find-your-themes-css\/\" target=\"_blank\" rel=\"noopener\">how to access the developer tools for your browser<\/a><\/span><span style=\"font-weight: 400\">.) <\/span><\/p>\n<p><span style=\"font-weight: 400\">Access your site\u2019s homepage (for word.emerson blogs, that\u2019ll be something like \u201cword.emerson.edu\/YOURSITE\u201d). Right-click (or Ctrl + click if your mouse isn\u2019t set up for right-clicking) on the part of the page you want to style. Choose \u201cInspect\u201d from the menu that opens. This will open a new window showing the HTML structure of the page. The element you want should already be highlighted in the Inspect \/ Developer Tools window. If not, you\u2019ll have to look through the elements to find it. <\/span><\/p>\n<p><span style=\"font-weight: 400\">When you hover over an element in the Inspect window, the corresponding part of the website will be highlighted. This will also show you if the item has an id or a class associated with it. In the screenshot below, the subtitle of the ITG blog site is highlighted in the Inspect window (the right side of the screenshot) and on the blog page (left side). The HTML shows a paragraph with id \u201csite-description\u201d (the \u201cp id=\u201dsite-description\u201d part), which is listed as \u201cp#site-description\u201d on the left side of the screenshot. The \u201cp#site-description\u201d selector is what we would use to apply custom CSS to the blog\u2019s subtitle.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3554\" src=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement_6-13.png\" alt=\"Side by side view of the ITG blog subtitle and the html code for it\" width=\"1162\" height=\"210\" srcset=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement_6-13.png 1162w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement_6-13-300x54.png 300w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement_6-13-1024x185.png 1024w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement_6-13-768x139.png 768w\" sizes=\"auto, (max-width: 1162px) 100vw, 1162px\" \/><\/p>\n<p><span style=\"font-weight: 400\">(Tip: Try to be as specific as possible when using CSS selectors to avoid your style being applied to other, unintended elements.)<\/span><\/p>\n<p><span style=\"font-weight: 400\">In Chrome, the Inspect \/ Developer Tools window allows you to try out styles without making actual changes to the site. <\/span><b>Note: the Inspect\/Developer Tools window does not save changes to the site. Leaving the page or refreshing it will wipe out all the changes you\u2019ve made. <\/b><span style=\"font-weight: 400\">You should always copy the styles you like to another program, like Notepad or Text\/Edit. For this reason, I recommend only working on the styles for one element at a time. <\/span><\/p>\n<p><span style=\"font-weight: 400\">The Dev Tools window has a sidebar with a tab for \u201cStyles\u201d. Click the \u201c+\u201d\/\u201dNew Style Rule\u201d button to create a style for the currently selected item. Click the newly created style to begin typing your CSS code. In this instance, I typed \u201cfont-style: italic;\u201d in order to italicize the subtitle. You should see the change on the original window with your website. You can toggle your new rule on or off by clicking the checkbox to the left of it.<\/span><\/p>\n<p><span style=\"font-weight: 400\">New style on:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3552\" src=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement3_6-13.png\" alt=\"Side by side view of active CSS code and the effect on the page\" width=\"917\" height=\"206\" srcset=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement3_6-13.png 917w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement3_6-13-300x67.png 300w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement3_6-13-768x173.png 768w\" sizes=\"auto, (max-width: 917px) 100vw, 917px\" \/><br \/>\n<span style=\"font-weight: 400\">New style off:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3553\" src=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement4_6-13.png\" alt=\"Side by side view of inactive CSS style and the effect on the page\" width=\"924\" height=\"113\" srcset=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement4_6-13.png 924w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement4_6-13-300x37.png 300w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2017\/06\/CustomCSS_InspectElement4_6-13-768x94.png 768w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Again, these changes are not actually saved on your site yet. <strong>Make sure you have your new styles copied to another program before proceeding.<\/strong><\/span><\/p>\n<h2><span style=\"font-weight: 400\">Saving custom styles to your site<\/span><\/h2>\n<p><span style=\"font-weight: 400\">While logged in, access your site\u2019s homepage if you\u2019re not already there. Click the \u201cCustomize\u201d button in the black bar at the top of the page. Some themes and later versions of WordPress have an option to input Custom CSS built-in by default. You\u2019ll see it listed as something like \u201cCSS\u201d, \u201cAdditional CSS\u201d, etc.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If you don\u2019t see an option under \u201cCustomize\u201d, close the Customizer (by clicking the \u201cX\u201d above \u201cYou are customizing\u201d) and visit your site\u2019s Dashboard instead. Click \u201cPlugins\u201d and search for \u201cCSS\u201d. You should see a listing for \u201cSimple Custom CSS\u201d. Activate that plugin. Once that\u2019s activated, you\u2019ll see a new option under the \u201cAppearance\u201d menu in the Dashboard which is \u201cCustom CSS\u201d. Click that.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Whether you\u2019re using Customize or the Simple Custom CSS plugin, you should see a box to enter in your CSS. Do so and save. The next time you visit your site, you should see the changes you made reflected there.<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Further Reading<\/span><\/h2>\n<p><span style=\"font-weight: 400\">There\u2019s a lot of other information about CSS and styling web pages and WordPress out there. Here are a few sites to do more reading on this subject:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/inspect-styles\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">More on inspecting and editing styles with Chrome<\/span><\/a><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\"><a href=\"https:\/\/en.support.wordpress.com\/custom-design\/editing-css\/#css-help\" target=\"_blank\" rel=\"noopener\">WordPress.com Support page on adding custom CSS<\/a> (some steps may not be applicable to word.emerson blogs)<\/span><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/en.support.wordpress.com\/custom-design\/css-basics\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">WordPress.com Support: CSS Basics<\/span><\/a><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/dailypost.wordpress.com\/2013\/06\/21\/css-intro\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">An Intro to CSS, or How to Make Things Look Like You Like<\/span><\/a><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/dailypost.wordpress.com\/2013\/07\/25\/css-selectors\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">An Intro to CSS: Finding CSS Selectors<\/span><\/a><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/dailypost.wordpress.com\/2013\/08\/29\/css-matched-rule-pane\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Intro to CSS: Previewing Changes with the Matched Rule Pane<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When using a WordPress blog (either on word.emerson.edu or emerson.build) for a course, the theme you choose will provide certain options for customization. To make style changes beyond those options,&#8230;<\/p>\n","protected":false},"author":1895,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[11],"tags":[30,89,91],"class_list":["post-3549","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-css","tag-web-design","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/3549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/users\/1895"}],"replies":[{"embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/comments?post=3549"}],"version-history":[{"count":0,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/3549\/revisions"}],"wp:attachment":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/media?parent=3549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/categories?post=3549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/tags?post=3549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}