{"id":1030,"date":"2024-04-10T10:50:35","date_gmt":"2024-04-10T17:50:35","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/calverta\/?p=1030"},"modified":"2024-09-24T13:12:21","modified_gmt":"2024-09-24T20:12:21","slug":"add-a-little-call-out-box-in-osu-drupal-10-with-css-classes","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/","title":{"rendered":"Add a little call out box in OSU Drupal 10 with CSS classes"},"content":{"rendered":"\n<p>Sometimes it&#8217;s nice to give a visual little call out in the middle of some block of text. Perhaps it&#8217;s a notification or you really just want to make a small section of stuff semantically stay together.<br><br>Here&#8217;s how I use mostly built-in css classes in the madrone theme (and a couple of custom classes using the css-injector) to make some &#8220;cards&#8221; and\/or call outs in a fairly fast way.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-loom wp-block-embed-loom wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How I use css classes to make call outs and cards in OSU Drupal 10\" src=\"https:\/\/www.loom.com\/embed\/037676790f54424aaaa5ca63d9cc6d21\" frameborder=\"0\" width=\"580\" height=\"435\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Custom classes<\/h2>\n\n\n\n<p class=\"has-text-align-center\">The custom classes to add to the css injector are:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code alignwide\"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.shadow-cphhs-01 {\n    box-shadow: 0 3px 8px rgb(228, 229, 234), 0 0 2px rgba(28, 16, 49, 0.12);\n}\n\n.brp5rem {\n    border-radius: 0.5rem !important;\n}\n\n.brp5rem-img img {\n    border-radius: 0.5rem !important;\n}\n\n.brp5em {\n    border-radius: 0.5em !important;\n}\n\n.brp5em-img img {\n    border-radius: 0.5em !important;\n}\n\n.margin-inline-auto {\n    margin-inline: auto !important;\n}\n\n.mw5ch {\n    max-width: 5ch;\n}\n\n.mw10ch {\n    max-width: 10ch;\n}\n\n.mw15ch {\n    max-width: 15ch;\n}\n\n.mw20ch {\n    max-width: 20ch;\n}\n\n.mw25ch {\n    max-width: 25ch;\n}\n\n.mw30ch {\n    max-width: 30ch;\n}\n\n.mw35ch {\n    max-width: 35ch;\n}\n\n.mw40ch {\n    max-width: 40ch;\n}\n\n.mw45ch {\n    max-width: 45ch;\n}\n\n.mw50ch {\n    max-width: 50ch;\n}\n\n.mw55ch {\n    max-width: 55ch;\n}\n\n.mw60ch {\n    max-width: 60ch;\n}\n\n.mw65ch {\n    max-width: 65ch;\n}\n\n.mw70ch {\n    max-width: 70ch;\n}\n\n.mw75ch {\n    max-width: 75ch;\n}\n\n.mw80ch {\n    max-width: 80ch;\n}\n\n.mw85ch {\n    max-width: 85ch;\n}\n\n.mw90ch {\n    max-width: 90ch;\n}\n\n.mw95ch {\n    max-width: 95ch;\n}\n\n.mw100ch {\n    max-width: 100ch;\n}\n\n.mw105ch {\n    max-width: 105ch;\n}\n\n.mw110ch {\n    max-width: 110ch;\n}\n\n.mw115ch {\n    max-width: 115ch;\n}\n\n.mw120ch {\n    max-width: 120ch;\n}\n\n.mw125ch {\n    max-width: 125ch;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Sometimes it\u2019s nice to give a visual little call out in the middle of some block of text. Perhaps it\u2019s a notification or you really just want to make a small section of stuff semantically stay together.<\/p>\n","protected":false},"author":1766,"featured_media":1060,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[161733],"tags":[],"class_list":["post-1030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howto"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Add a little call out box in OSU Drupal 10 with CSS classes | Bad Advice Alan<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a little call out box in OSU Drupal 10 with CSS classes | Bad Advice Alan\" \/>\n<meta property=\"og:description\" content=\"Sometimes it\u2019s nice to give a visual little call out in the middle of some block of text. Perhaps it\u2019s a notification or you really just want to make a small section of stuff semantically stay together.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/\" \/>\n<meta property=\"og:site_name\" content=\"Bad Advice Alan\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-10T17:50:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-24T20:12:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AlanCalvert\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/\"},\"author\":{\"name\":\"Alan\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde\"},\"headline\":\"Add a little call out box in OSU Drupal 10 with CSS classes\",\"datePublished\":\"2024-04-10T17:50:35+00:00\",\"dateModified\":\"2024-09-24T20:12:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/\"},\"wordCount\":122,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"articleSection\":[\"Howto\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/\",\"url\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/\",\"name\":\"Add a little call out box in OSU Drupal 10 with CSS classes | Bad Advice Alan\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"datePublished\":\"2024-04-10T17:50:35+00:00\",\"dateModified\":\"2024-09-24T20:12:21+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.oregonstate.edu\/calverta\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a little call out box in OSU Drupal 10 with CSS classes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#website\",\"url\":\"https:\/\/blogs.oregonstate.edu\/calverta\/\",\"name\":\"Bad Advice Alan\",\"description\":\"How and why I do the things I do in OSU Drupal\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.oregonstate.edu\/calverta\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde\",\"name\":\"Alan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg\",\"caption\":\"Alan\"},\"description\":\"I'm the web coordinator for the College of Health at Oregon State University... I take the occasional photo here and there too. Enjoying the challenge of bringing social and semantic web to a college website while pruning the excess cruft.\",\"sameAs\":[\"https:\/\/alancalvert.carrd.co\/\",\"https:\/\/instagram.com\/alancalvert\",\"https:\/\/x.com\/AlanCalvert\"],\"url\":\"https:\/\/blogs.oregonstate.edu\/calverta\/author\/calverta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add a little call out box in OSU Drupal 10 with CSS classes | Bad Advice Alan","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/","og_locale":"en_US","og_type":"article","og_title":"Add a little call out box in OSU Drupal 10 with CSS classes | Bad Advice Alan","og_description":"Sometimes it\u2019s nice to give a visual little call out in the middle of some block of text. Perhaps it\u2019s a notification or you really just want to make a small section of stuff semantically stay together.","og_url":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/","og_site_name":"Bad Advice Alan","article_published_time":"2024-04-10T17:50:35+00:00","article_modified_time":"2024-09-24T20:12:21+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg","type":"image\/jpeg"}],"author":"Alan","twitter_card":"summary_large_image","twitter_creator":"@AlanCalvert","twitter_misc":{"Written by":"Alan","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#article","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/"},"author":{"name":"Alan","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde"},"headline":"Add a little call out box in OSU Drupal 10 with CSS classes","datePublished":"2024-04-10T17:50:35+00:00","dateModified":"2024-09-24T20:12:21+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/"},"wordCount":122,"commentCount":0,"image":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","articleSection":["Howto"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/","url":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/","name":"Add a little call out box in OSU Drupal 10 with CSS classes | Bad Advice Alan","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage"},"image":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","datePublished":"2024-04-10T17:50:35+00:00","dateModified":"2024-09-24T20:12:21+00:00","author":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde"},"breadcrumb":{"@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#primaryimage","url":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","contentUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/add-a-little-call-out-box-in-osu-drupal-10-with-css-classes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.oregonstate.edu\/calverta\/"},{"@type":"ListItem","position":2,"name":"Add a little call out box in OSU Drupal 10 with CSS classes"}]},{"@type":"WebSite","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#website","url":"https:\/\/blogs.oregonstate.edu\/calverta\/","name":"Bad Advice Alan","description":"How and why I do the things I do in OSU Drupal","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.oregonstate.edu\/calverta\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.oregonstate.edu\/calverta\/#\/schema\/person\/b4e02e8d5dd36413742b99a2c292fcde","name":"Alan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d810a700fe21ae9d716b83f97d7c81bec935e082cf975f7237b0249368c322e9?s=96&r=pg","caption":"Alan"},"description":"I'm the web coordinator for the College of Health at Oregon State University... I take the occasional photo here and there too. Enjoying the challenge of bringing social and semantic web to a college website while pruning the excess cruft.","sameAs":["https:\/\/alancalvert.carrd.co\/","https:\/\/instagram.com\/alancalvert","https:\/\/x.com\/AlanCalvert"],"url":"https:\/\/blogs.oregonstate.edu\/calverta\/author\/calverta\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/call-out-in-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1","jetpack-related-posts":[{"id":1033,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-circle-images-in-osu-drupal-10\/","url_meta":{"origin":1030,"position":0},"title":"How to make circle images in OSU Drupal 10","author":"Alan","date":"2024\/04\/10","format":false,"excerpt":"Making square images into circles is relatively easy with regular html and css. But due to the way OSU Drupal 10's media module creates image code, there are a couple of extra steps to take with both your css classes and the on page html.","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/04\/round-images-OSU-Drupal-10-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1084,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/line-width-in-digital-typography-for-accessibility-and-comprehension\/","url_meta":{"origin":1030,"position":1},"title":"Line Width in Digital Typography for Accessibility and Comprehension","author":"Alan","date":"2025\/12\/09","format":false,"excerpt":"The measure Choosing the right line width (called the \"measure\") for a website is a balance. It involves how our eyes work, how our brains process information, and specific accessibility rules. Research shows that the best line width for reading is between 50 and 75 characters per line (CPL). The\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"Visual guide on line width. Lines that are too long (>80 CPL) cause eye strain and missed returns, while lines that are too short (","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2025\/12\/Line-Width-for-Accessibility-and-Comprehension-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":942,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-to-make-anchor-links-in-osu-drupal-10\/","url_meta":{"origin":1030,"position":2},"title":"How to make anchor links in OSU Drupal 10","author":"Alan","date":"2024\/01\/09","format":false,"excerpt":"Until there is a button, here's how to add anchor links manually.","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2024\/01\/anchor-links-2688px-scaled.jpg?fit=1200%2C686&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":205,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/howto-post-moore-family-center-blog\/","url_meta":{"origin":1030,"position":3},"title":"Howto: Post to the Moore Family Center Blog","author":"Alan","date":"2014\/09\/16","format":false,"excerpt":"This post will show the steps OSUDI's need to take to set up their accounts on the MFC Blog as well as their avatar\/profile image through the use of Gravatar, and finally the process of how to send posts to the CPHHS's web coordinator for final posting to the MFC\u2026","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2020\/11\/nutrition-club-opengraph-1.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":891,"url":"https:\/\/blogs.oregonstate.edu\/calverta\/how-i-archive-raw-photo-files\/","url_meta":{"origin":1030,"position":4},"title":"How I archive RAW photo files","author":"Alan","date":"2023\/02\/17","format":false,"excerpt":"RAW files are important to keep in order to retain full editing potential. Here's how I back mine up to protect them and save space on my computer.","rel":"","context":"In &quot;Howto&quot;","block_context":{"text":"Howto","link":"https:\/\/blogs.oregonstate.edu\/calverta\/howto\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/1105\/files\/2023\/02\/how-to-archive-RAW-files-1200px.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/users\/1766"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/comments?post=1030"}],"version-history":[{"count":9,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1030\/revisions"}],"predecessor-version":[{"id":1076,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/posts\/1030\/revisions\/1076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/media\/1060"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/media?parent=1030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/categories?post=1030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/calverta\/wp-json\/wp\/v2\/tags?post=1030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}