{"id":652,"date":"2023-06-13T21:22:38","date_gmt":"2023-06-14T02:22:38","guid":{"rendered":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/?p=652"},"modified":"2023-06-13T21:22:38","modified_gmt":"2023-06-14T02:22:38","slug":"hacky-hacks-for-libguides","status":"publish","type":"post","link":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/2023\/06\/13\/hacky-hacks-for-libguides\/","title":{"rendered":"Hacky Hacks for LibGuides"},"content":{"rendered":"\n<p>For fourteen years, I&#8217;ve been wrestling with LibGuides, trying to use my small set of kludgy HTML and CSS workarounds to get the guides to look a certain way. This week, I noticed for the first time that the way single-page guides showed a page title was weird and unnecessary. Typically, guides have at multiple pages, and the page you are viewing shows it&#8217;s title in browser tab (1), the breadcrumb navigation (2), and the tabbed navigation (3), as seen in this screenshot of a <a href=\"https:\/\/guides.newman.baruch.cuny.edu\/psychology\">psychology guide<\/a> that is on the &#8220;Getting Started&#8221; page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-multipage-guide.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"695\" src=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-multipage-guide.png\" alt=\"Screenshot of multipage guide showing location of page title in three locations\" class=\"wp-image-653\" srcset=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-multipage-guide.png 1018w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-multipage-guide-300x205.png 300w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-multipage-guide-768x524.png 768w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-multipage-guide-439x300.png 439w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><\/a><\/figure>\n\n\n\n<p>While this looks OK on guides with multiple pages, it doesn&#8217;t seem necessary to display a page title when the guide has only one page and the guide title is adequate enough. The screenshot below is an example of a one-page guide titled &#8220;Harvard Business Review&#8221; where home page, the only page in the guide, shows its page title, &#8220;Start Here,&#8221; in the browser tab (1) and the breadcrumb navigation (2) but doesn&#8217;t show one in the tabbed navigation because LibGuides knows not to display that if there&#8217;s only one page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-one-page-guide-showing-a-page-title.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" src=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-one-page-guide-showing-a-page-title-1024x570.png\" alt=\"One page guide showing a page title in two locations\" class=\"wp-image-654\" srcset=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-one-page-guide-showing-a-page-title-1024x570.png 1024w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-one-page-guide-showing-a-page-title-300x167.png 300w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-one-page-guide-showing-a-page-title-768x428.png 768w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-one-page-guide-showing-a-page-title-500x278.png 500w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-one-page-guide-showing-a-page-title.png 1241w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>That page title of &#8220;Start Here&#8221; is default home page name for any new guide you create in our system. Today, I wanted to find a way to get rid of that page title, as it was adding clutter and no useful or necessary information to the page. In edit mode, the option to rename the page doesn&#8217;t let you leave it blank. You have to put in something, as leaving it blank yields an error message:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-Page-Properties-with-error-message.png\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"374\" src=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-Page-Properties-with-error-message.png\" alt=\"Page properties window with error message of &quot;Field is required&quot;\" class=\"wp-image-655\" srcset=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-Page-Properties-with-error-message.png 798w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-Page-Properties-with-error-message-300x141.png 300w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-Page-Properties-with-error-message-768x360.png 768w, https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/LibGuide-Page-Properties-with-error-message-500x234.png 500w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/a><\/figure>\n\n\n\n<p>Initially, I tried just hitting the space bar to insert a space in that Page Name field. But that generated the same error message. Then I realized I could add a bit of HTML that would fill the field and make the system happy but not display any text on the page: the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Non-breaking_space\">non-breaking space<\/a> code, <code>&amp;nbsp<\/code>. That got rid of the page title in the breadcrumb trail and in the browser tab. Then Kinza Sheikh, the UX designer who works with me, suggested adding a different bit of HTML, a pair of opening and closing tags for bold type, that wouldn&#8217;t even display a space in the page title showing in the browser tab. Here&#8217;s what the browser tab looks like if I used the non-breaking space trick:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/Browser-tab-with-nonbreaking-space.png\"><img loading=\"lazy\" decoding=\"async\" width=\"223\" height=\"38\" src=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/Browser-tab-with-nonbreaking-space.png\" alt=\"Browser tab with a nonbreaking space\" class=\"wp-image-656\"\/><\/a><\/figure>\n\n\n\n<p>Here is what that browser tab looks like if I instead put <code>&lt;b>&lt;\/b><\/code> in the page title field:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/Browser-tab-with-bold-tag.png\"><img loading=\"lazy\" decoding=\"async\" width=\"226\" height=\"39\" src=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-content\/uploads\/2023\/06\/Browser-tab-with-bold-tag.png\" alt=\"Browser tab with bold tag\" class=\"wp-image-657\"\/><\/a><\/figure>\n\n\n\n<p>The hyphen that precedes the guide title has slid one space to the left now that there isn&#8217;t a non-breaking space in the page name (just some inconsequential and invisible HTML tag), It&#8217;s not a huge improvement over the non-breaking space but still is an incremental improvement. In the limited set of tricks I have to tweak LibGuides, I&#8217;ll take whatever little victories I can get.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For fourteen years, I&#8217;ve been wrestling with LibGuides, trying to use my small set of kludgy HTML and CSS workarounds to get the guides to look a certain way. This week, I noticed for the first time that the way &hellip; <a href=\"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/2023\/06\/13\/hacky-hacks-for-libguides\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-652","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/posts\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":1,"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":658,"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/posts\/652\/revisions\/658"}],"wp:attachment":[{"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stephenfrancoeur.com\/beatingthebounds\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}