{"id":2308,"date":"2024-12-30T12:27:30","date_gmt":"2024-12-30T17:27:30","guid":{"rendered":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/?post_type=chapter&p=2308"},"modified":"2025-12-13T15:00:41","modified_gmt":"2025-12-13T20:00:41","slug":"customize-css","status":"publish","type":"chapter","link":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/chapter\/customize-css\/","title":{"raw":"Customize CSS","rendered":"Customize CSS"},"content":{"raw":"
\r\n

Making your Customizations in<\/h2>\r\n
\r\n

Pressbooks<\/h2>\r\n<\/div>\r\nCSS modifications can tailor your open textbook in Pressbooks.\r\n\r\n<\/div>\r\nThere may be customizations that you\u2019d like to make that are not currently available in your Theme Options. You will need to consider whether you have the time, resources, and expertise required to create your own Custom Styles, which are any CSS (Cascading Style Sheet) changes that you add to your book's base theme.\r\n
\r\n
Start With<\/span>\r\nThe Basics<\/a><\/div>\r\n
Go To<\/span>\r\nImportant Points\r\nfor Advanced Users<\/a><\/div>\r\n<\/div>\r\n

<\/a>The Basics<\/h2>\r\n

View the Base Theme CSS<\/h3>\r\nYou can readily view the CSS for your book's base theme. From the left sidebar menu of your book\u2019s dashboard, go to Appearance >> Custom Styles. The stylesheets are divided into three sections, corresponding to the web, e-book, and PDF formats, allowing for modifications to the base theme CSS.\r\n

Theme Web Styles<\/h3>\r\nThe first section of the Custom Styles page, Theme Web Styles, will include a scrolling box that contains the entire stylesheet (aforementioned CSS code) for a given format. The contents of the stylesheet are dependent on the theme you\u2019ve chosen. This section is not editable but is very useful for reference. To fully understand the changes you can make using CSS, study this stylesheet\u00a0carefully to identify the current design and create a design plan outlining the modifications you would like to make<\/span>.\r\n\r\n\"Screenshot\r\n
\r\n
\r\n\r\nImage:<\/strong> Accessing Custom Styles on Pressbooks.\r\n\r\n<\/div>\r\n<\/div>\r\n

Your Web Styles<\/h3>\r\n\"Screenshot\r\n
\r\n
\r\n\r\nImage:<\/strong> Accessing Your Web Styles on Pressbooks.\r\n\r\n<\/div>\r\n<\/div>\r\nThe second section of the Custom Styles page, titled \"Your Web Styles,\" is where you can make edits or additions to the stylesheet. Any CSS added in this section will override existing styles for the same class. After identifying the element-specific styles, you can copy the corresponding code to override the original theme styles for that element. You can also create your own components or classes to use in the textbook.\r\n\r\nRecommended Practice: <\/strong>Create a private page to test any CSS modifications. Have a design plan in place before making any modifications.\r\n

CSS for Web, E-book, and PDF<\/h3>\r\nPressbooks prepares files in multiple formats, including web, e-book, and PDF. Each format is created using a specific stylesheet designed for its unique requirements, so you will need to select which one you edit each time and ensure that you make changes in all three stylesheets if you want the three formats to reflect each other. Choose from the dropdown menu at the top of the Custom Styles page to switch between formats. You can select either web, e-book, or PDF.\r\n\r\n
\r\n\r\n

<\/a>Important Points for Advanced Users<\/h2>\r\nSome users may already be familiar with CSS. Even if you\u2019re fluent in CSS, remember that each of the formats Pressbooks produces operates slightly differently, so what you may be used to using for a web page won\u2019t necessarily translate to a PDF or e-book.\r\n