{"id":86,"date":"2021-10-15T23:22:39","date_gmt":"2021-10-15T23:22:39","guid":{"rendered":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/create-textboxes\/"},"modified":"2024-09-19T04:19:24","modified_gmt":"2024-09-19T04:19:24","slug":"create-textboxes","status":"publish","type":"chapter","link":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/create-textboxes\/","title":{"raw":"Create Textboxes","rendered":"Create Textboxes"},"content":{"raw":"The Pressbooks textbox tool in the visual editor allows you to place text with frames to have it stand apart from the rest of the text in the body of your book. The structure and color of textboxes may vary from theme to theme.\n<h1>Add Textboxes to Your Book<\/h1>\n<img class=\"size-full wp-image-269 alignright\" src=\"https:\/\/pressbooks.pub\/app\/uploads\/sites\/4748\/2013\/04\/Screenshot-from-2021-10-15-20-18-11.png\" alt=\"\" width=\"230\" height=\"420\">To add an empty textbox to your post from the visual editor, <span style=\"font-size: 1em;\">click on the <strong>Textboxes<\/strong> dropdown and select your desired textbox type. If you do this with a selection of text already highlighted, this text will be placed within the newly created textbox. <\/span>\n\nPressbooks includes six preset textbox styles. Each of these also features a 'sidebar' variation which will display at 25% of the container width by default and was defined for PDF exports.\n\nPreset textbox styles include the following:\n<div class=\"textbox\"><strong>Standard:<\/strong> This is a standard textbox.<\/div>\n<div class=\"textbox shaded\"><strong>Shaded:<\/strong> This is a shaded textbox.<\/div>\n<div class=\"textbox learning-objectives\">\n<h3>Learning Objectives<\/h3>\nThis is a Learning Objectives textbox. Type your learning objectives here.\n<ul>\n \t<li>First<\/li>\n \t<li>Second<\/li>\n<\/ul>\n<\/div>\n<div class=\"textbox key-takeaways\">\n<h3>Key Takeaways<\/h3>\nThis is a Key Takeaways textbox. Type your key takeaways here.\n<ul>\n \t<li>First<\/li>\n \t<li>Second<\/li>\n<\/ul>\n<\/div>\n<div class=\"textbox exercises\">\n<h3>Exercises<\/h3>\nThis is an Exercises textbox. Type your exercises here.\n<ul>\n \t<li>First<\/li>\n \t<li>Second<\/li>\n<\/ul>\n<\/div>\n<div class=\"textbox examples\">\n<h3>Examples<\/h3>\nThis is an Examples textbox. Type your examples here.\n<ul>\n \t<li>First<\/li>\n \t<li>Second<\/li>\n<\/ul>\n<\/div>\nYou can modify or edit the content within any of the textboxes. You can also insert a 'custom' textbox, which allows you to define a custom textbox class that you can target with <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/apply-custom-styles\/\">Custom Styles<\/a>.\n<div class=\"textbox\">\n\n<strong>Note:<\/strong> Standard and shaded textboxes were designed to include a single paragraph. If you'd like to include multiple line breaks within these textboxes, you can simply press \"Shift+Enter\" in the visual editor to create a 'soft return'.\n\nThis will add line breaks without breaking the textbox (it's what we did in this standard textbox, for example). If you feel confident in your ability to edit HTML tags, you can also switch to the Text Editor and edit a textbox's <code>&lt;div&gt;<\/code> element directly.\n\n<\/div>\n<h1>Customize Your Textbox Colors<\/h1>\nEach of the four textboxes designed for educational publishing projects have a preset color palette set by your book's theme. Most themes include a Global Setting which allows you to globally change the color scheme for the textbox types. To change your textbox colors from their default palette:\n<ol>\n \t<li>Click <strong>Appearance &gt; Theme Options\u00a0<\/strong>from the left-hand menu of your book's dashboard and scroll down until you see customization options for <strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Examples, Exercises, Key Takeaways,\u00a0<\/strong><span style=\"orphans: 1; text-align: initial; font-size: 1em;\">and\u00a0<\/span><strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Learning Objectives <\/strong><\/li>\n \t<li>Click <strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Select Color\u00a0<\/strong><span style=\"orphans: 1; text-align: initial; font-size: 1em;\">next to the element you'd like to change (Header Color, Header Background, or Background)\n<img class=\"alignnone wp-image-270 size-full\" src=\"https:\/\/pressbooks.pub\/app\/uploads\/sites\/4748\/2022\/10\/textboxcolors2-e1634353715402.png\" alt=\"You can select colors for the header color, header background, and background for each of these four textbox types. \" width=\"644\" height=\"354\"><\/span><\/li>\n \t<li><span style=\"orphans: 1; text-align: initial; font-size: 1em;\">Use the resulting color picker to select your desired color. Click Default<span style=\"text-align: initial; font-size: 1em;\"> to return the element to its default color if needed.\n<img class=\"alignnone wp-image-271 size-full\" src=\"https:\/\/pressbooks.pub\/app\/uploads\/sites\/4748\/2022\/10\/textboxcolors3-e1634353859774.png\" alt=\"The graphic user interface that you can select your new color from.\" width=\"305\" height=\"311\">\n<\/span><\/span><\/li>\n \t<li>Repeat for each of the Header Colors, Header Backgrounds, and Background colors you want to modify.<\/li>\n \t<li>Click <strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Save Changes<\/strong><\/li>\n<\/ol>\nAny color customizations you apply will affect every textbox of that specified type in your book. For example, if you change the Key Takeaways Header Background to green, all of the Key Takeaways textboxes in your book will now have a green header background.\n\nThis change affects all export types. You can see the new, custom color textboxes in your visual editor.","rendered":"<p>The Pressbooks textbox tool in the visual editor allows you to place text with frames to have it stand apart from the rest of the text in the body of your book. The structure and color of textboxes may vary from theme to theme.<\/p>\n<h1>Add Textboxes to Your Book<\/h1>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-269 alignright\" src=\"https:\/\/pressbooks.pub\/app\/uploads\/sites\/4748\/2013\/04\/Screenshot-from-2021-10-15-20-18-11.png\" alt=\"\" width=\"230\" height=\"420\" \/>To add an empty textbox to your post from the visual editor, <span style=\"font-size: 1em;\">click on the <strong>Textboxes<\/strong> dropdown and select your desired textbox type. If you do this with a selection of text already highlighted, this text will be placed within the newly created textbox. <\/span><\/p>\n<p>Pressbooks includes six preset textbox styles. Each of these also features a &#8216;sidebar&#8217; variation which will display at 25% of the container width by default and was defined for PDF exports.<\/p>\n<p>Preset textbox styles include the following:<\/p>\n<div class=\"textbox\"><strong>Standard:<\/strong> This is a standard textbox.<\/div>\n<div class=\"textbox shaded\"><strong>Shaded:<\/strong> This is a shaded textbox.<\/div>\n<div class=\"textbox learning-objectives\">\n<h3>Learning Objectives<\/h3>\n<p>This is a Learning Objectives textbox. Type your learning objectives here.<\/p>\n<ul>\n<li>First<\/li>\n<li>Second<\/li>\n<\/ul>\n<\/div>\n<div class=\"textbox key-takeaways\">\n<h3>Key Takeaways<\/h3>\n<p>This is a Key Takeaways textbox. Type your key takeaways here.<\/p>\n<ul>\n<li>First<\/li>\n<li>Second<\/li>\n<\/ul>\n<\/div>\n<div class=\"textbox exercises\">\n<h3>Exercises<\/h3>\n<p>This is an Exercises textbox. Type your exercises here.<\/p>\n<ul>\n<li>First<\/li>\n<li>Second<\/li>\n<\/ul>\n<\/div>\n<div class=\"textbox examples\">\n<h3>Examples<\/h3>\n<p>This is an Examples textbox. Type your examples here.<\/p>\n<ul>\n<li>First<\/li>\n<li>Second<\/li>\n<\/ul>\n<\/div>\n<p>You can modify or edit the content within any of the textboxes. You can also insert a &#8216;custom&#8217; textbox, which allows you to define a custom textbox class that you can target with <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/apply-custom-styles\/\">Custom Styles<\/a>.<\/p>\n<div class=\"textbox\">\n<p><strong>Note:<\/strong> Standard and shaded textboxes were designed to include a single paragraph. If you&#8217;d like to include multiple line breaks within these textboxes, you can simply press &#8220;Shift+Enter&#8221; in the visual editor to create a &#8216;soft return&#8217;.<\/p>\n<p>This will add line breaks without breaking the textbox (it&#8217;s what we did in this standard textbox, for example). If you feel confident in your ability to edit HTML tags, you can also switch to the Text Editor and edit a textbox&#8217;s <code>&lt;div&gt;<\/code> element directly.<\/p>\n<\/div>\n<h1>Customize Your Textbox Colors<\/h1>\n<p>Each of the four textboxes designed for educational publishing projects have a preset color palette set by your book&#8217;s theme. Most themes include a Global Setting which allows you to globally change the color scheme for the textbox types. To change your textbox colors from their default palette:<\/p>\n<ol>\n<li>Click <strong>Appearance &gt; Theme Options\u00a0<\/strong>from the left-hand menu of your book&#8217;s dashboard and scroll down until you see customization options for <strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Examples, Exercises, Key Takeaways,\u00a0<\/strong><span style=\"orphans: 1; text-align: initial; font-size: 1em;\">and\u00a0<\/span><strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Learning Objectives <\/strong><\/li>\n<li>Click <strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Select Color\u00a0<\/strong><span style=\"orphans: 1; text-align: initial; font-size: 1em;\">next to the element you&#8217;d like to change (Header Color, Header Background, or Background)<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-270 size-full\" src=\"https:\/\/pressbooks.pub\/app\/uploads\/sites\/4748\/2022\/10\/textboxcolors2-e1634353715402.png\" alt=\"You can select colors for the header color, header background, and background for each of these four textbox types.\" width=\"644\" height=\"354\" \/><\/span><\/li>\n<li><span style=\"orphans: 1; text-align: initial; font-size: 1em;\">Use the resulting color picker to select your desired color. Click Default<span style=\"text-align: initial; font-size: 1em;\"> to return the element to its default color if needed.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-271 size-full\" src=\"https:\/\/pressbooks.pub\/app\/uploads\/sites\/4748\/2022\/10\/textboxcolors3-e1634353859774.png\" alt=\"The graphic user interface that you can select your new color from.\" width=\"305\" height=\"311\" \/><br \/>\n<\/span><\/span><\/li>\n<li>Repeat for each of the Header Colors, Header Backgrounds, and Background colors you want to modify.<\/li>\n<li>Click <strong style=\"orphans: 1; text-align: initial; font-size: 1em;\">Save Changes<\/strong><\/li>\n<\/ol>\n<p>Any color customizations you apply will affect every textbox of that specified type in your book. For example, if you change the Key Takeaways Header Background to green, all of the Key Takeaways textboxes in your book will now have a green header background.<\/p>\n<p>This change affects all export types. You can see the new, custom color textboxes in your visual editor.<\/p>\n","protected":false},"author":1,"menu_order":17,"template":"","meta":{"pb_show_title":"","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-86","chapter","type-chapter","status-publish","hentry"],"part":53,"_links":{"self":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/86\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/86\/revisions\/87"}],"part":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/parts\/53"}],"metadata":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/86\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapter-type?post=86"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/contributor?post=86"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/license?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}