{"id":299,"date":"2024-01-29T13:21:56","date_gmt":"2024-01-29T18:21:56","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/pbtips\/?post_type=front-matter&#038;p=299"},"modified":"2024-01-29T13:21:56","modified_gmt":"2024-01-29T18:21:56","slug":"before-getting-started","status":"publish","type":"front-matter","link":"https:\/\/pressbooks.bccampus.ca\/pbtips\/front-matter\/before-getting-started\/","title":{"raw":"BEFORE GETTING STARTED","rendered":"BEFORE GETTING STARTED"},"content":{"raw":"Custom Styles is a feature that allows you to customize the CSS (Cascading Style Sheets) for your theme in Pressbooks to change visual elements such as typography, spacing, colors, and more.\r\n\r\n<strong>Note:<\/strong> If you are using the BCcampus hosted version of Pressbooks, there are certain elements that are part of the house style and can\u2019t be changed. The BCcampus branding, the look and colour of the webbook framing and table of contents, these will be the same for all BCcampus Pressbooks.\r\n\r\n&nbsp;\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Resourcces<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nFor more information on Custom Styles in Pressbooks and examples of CSS fixes, review the following guides:\r\n<ul>\r\n \t<li><a href=\"https:\/\/media.bccampus.ca\/media\/Use+Custom+Styles\/0_gs5r8b3x\">BC Campus Pressbooks Video Tutorial Series - Use Custom Styles<\/a><\/li>\r\n \t<li><a href=\"https:\/\/opentextbc.ca\/publishingstyleguide\/chapter\/custom-styles\/\">BC Campus Open Education Publishing Style Guide - Custom Styles (CSS)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/guide.pressbooks.com\/chapter\/apply-custom-styles\/\">Pressbooks User Guide - Apply Custom Styles<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div style=\"font-weight: 400\">\r\n<h1>Theme Styles<\/h1>\r\nTheme web styles displays the all the CSS that gives the theme its look and feel.\u00a0 You can\u2019t edit the theme CSS, but you can search within it by clicking into the text box and use CTRL\u00a0 or Cmd +F. This feature allows you to refer to the CSS in the existing theme, to help ensure that the CSS you add doesn\u2019t clash with the theme's predefined styles. The CSS you enter in your Web Styles will override the Theme Styles.\r\n<img class=\"aligncenter wp-image-276 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-1024x487.png\" alt=\"\" width=\"1024\" height=\"487\" \/>\r\n<h1>CSS Comments<\/h1>\r\n<div style=\"font-weight: 400\">It\u2019s helpful to include a label for what that code is intended to do (also called a CSS comment). You can see that here, designated by the forward slash asterisk.\r\n<img class=\"aligncenter wp-image-277 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_CSSComment_20240117-e1705535491210.png\" alt=\"\" width=\"666\" height=\"439\" \/>\r\nAdding these descriptive notes can help you keep track of the changes you\u2019ve made, and easily delete CSS that isn\u2019t working or that you no longer need. If you are working on a team, CSS comments will also help your co-authors understand the changes you have made.<\/div>\r\n<\/div>","rendered":"<p>Custom Styles is a feature that allows you to customize the CSS (Cascading Style Sheets) for your theme in Pressbooks to change visual elements such as typography, spacing, colors, and more.<\/p>\n<p><strong>Note:<\/strong> If you are using the BCcampus hosted version of Pressbooks, there are certain elements that are part of the house style and can\u2019t be changed. The BCcampus branding, the look and colour of the webbook framing and table of contents, these will be the same for all BCcampus Pressbooks.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Resourcces<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>For more information on Custom Styles in Pressbooks and examples of CSS fixes, review the following guides:<\/p>\n<ul>\n<li><a href=\"https:\/\/media.bccampus.ca\/media\/Use+Custom+Styles\/0_gs5r8b3x\">BC Campus Pressbooks Video Tutorial Series &#8211; Use Custom Styles<\/a><\/li>\n<li><a href=\"https:\/\/opentextbc.ca\/publishingstyleguide\/chapter\/custom-styles\/\">BC Campus Open Education Publishing Style Guide &#8211; Custom Styles (CSS)<\/a><\/li>\n<li><a href=\"https:\/\/guide.pressbooks.com\/chapter\/apply-custom-styles\/\">Pressbooks User Guide &#8211; Apply Custom Styles<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div style=\"font-weight: 400\">\n<h1>Theme Styles<\/h1>\n<p>Theme web styles displays the all the CSS that gives the theme its look and feel.\u00a0 You can\u2019t edit the theme CSS, but you can search within it by clicking into the text box and use CTRL\u00a0 or Cmd +F. This feature allows you to refer to the CSS in the existing theme, to help ensure that the CSS you add doesn\u2019t clash with the theme&#8217;s predefined styles. The CSS you enter in your Web Styles will override the Theme Styles.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-276 size-large\" src=\"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-1024x487.png\" alt=\"\" width=\"1024\" height=\"487\" srcset=\"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-1024x487.png 1024w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-300x143.png 300w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-768x365.png 768w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-65x31.png 65w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-225x107.png 225w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117-350x166.png 350w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_ThemeStyles_20240117.png 1167w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h1>CSS Comments<\/h1>\n<div style=\"font-weight: 400\">It\u2019s helpful to include a label for what that code is intended to do (also called a CSS comment). You can see that here, designated by the forward slash asterisk.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-277 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_CSSComment_20240117-e1705535491210.png\" alt=\"\" width=\"666\" height=\"439\" srcset=\"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_CSSComment_20240117-e1705535491210.png 666w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_CSSComment_20240117-e1705535491210-300x198.png 300w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_CSSComment_20240117-e1705535491210-65x43.png 65w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_CSSComment_20240117-e1705535491210-225x148.png 225w, https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-content\/uploads\/sites\/1918\/2024\/01\/PBTips_CSSComment_20240117-e1705535491210-350x231.png 350w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><br \/>\nAdding these descriptive notes can help you keep track of the changes you\u2019ve made, and easily delete CSS that isn\u2019t working or that you no longer need. If you are working on a team, CSS comments will also help your co-authors understand the changes you have made.<\/div>\n<\/div>\n","protected":false},"author":1076,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"front-matter-type":[],"contributor":[],"license":[],"class_list":["post-299","front-matter","type-front-matter","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/pressbooks\/v2\/front-matter\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/pressbooks\/v2\/front-matter"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/wp\/v2\/types\/front-matter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/wp\/v2\/users\/1076"}],"version-history":[{"count":1,"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/pressbooks\/v2\/front-matter\/299\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/pressbooks\/v2\/front-matter\/299\/revisions\/300"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/pressbooks\/v2\/front-matter\/299\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"front-matter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/pressbooks\/v2\/front-matter-type?post=299"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/wp\/v2\/contributor?post=299"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/pbtips\/wp-json\/wp\/v2\/license?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}