{"id":111,"date":"2017-09-13T17:42:38","date_gmt":"2017-09-13T17:42:38","guid":{"rendered":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/apply-custom-styles\/"},"modified":"2024-09-19T04:19:25","modified_gmt":"2024-09-19T04:19:25","slug":"apply-custom-styles","status":"publish","type":"chapter","link":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/apply-custom-styles\/","title":{"raw":"Apply Custom Styles","rendered":"Apply Custom Styles"},"content":{"raw":"The Custom Styles feature allows you to add CSS to your book\u2019s stylesheet to change the default formatting for any of our themes. If you\u2019re fluent in CSS, this means that you can customize the appearance your web, ebook (EPUB) and PDF (print and digital) files. Please note that Pressbooks does not offer support for comprehensive CSS formatting, and on the pressbooks.pub network, Custom CSS is only available with the Collaboration plan.\n

<\/a>Add Custom Styles<\/h1>\nOnce you've selected a theme<\/a> for your book, you can add custom styles for the webbook, ebook, and PDF exports separately. To do so:\n
    \n \t
  1. Click 'Appearance \u2192 Custom Styles<\/strong>'.<\/li>\n \t
  2. Select the Export Format you would like to customize<\/strong> from the dropdown menu. Options include web, Ebook, or PDF.\n\"\"<\/li>\n \t
  3. Add your desired CSS modifications to the 'Your Styles'<\/strong> input section\"\"<\/li>\n \t
  4. Click the Save <\/strong>button to save your changes<\/li>\n<\/ol>\n
    NOTE:<\/strong> If you\u2019ve made changes to the ebook or PDF, you will need to export a new set of files to see them.<\/div>\n

    <\/a>What Changes are Possible<\/h1>\nIn the images above, you can see changes to the color of the chapter-number and the line-spacing in the body text for the PDF format. These were controlled by adding the following to the \u201cYour Styles\u201d section:\n\n.chapter-number {\ncolor: #c8000c; }\nbody {\nline-height: 2em; }<\/code>\n\nHere\u2019s what the PDF looks like before and after:\n\n\"\"<\/a>\n\nTo see what other kinds of things you can customize, you can look through the theme stylesheet in the \u201cTheme Styles\u201d section. This allows you to find the styles for various elements in your book, then copy the corresponding section into \u201cYour Styles\u201d to edit. Anything you enter will override the original theme styles for that element.\n\nEven 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 ebook. While you\u2019re figuring things out, we recommend using the XHTML export to help you isolate particular classes and elements.\n

    Keyboard Commands for CSS<\/h2>\nPressbooks\u2019 custom styles editor uses CodeMirror<\/a> keyboard commands. You can use the following keyboard commands on any of the three style sheets for your book.\n
    \n\n\n\n\n\n\n\n\n\n\n
    <\/td>\nFor PC<\/strong><\/td>\nFor Mac<\/strong><\/td>\n<\/tr>\n
    Start searching<\/strong><\/td>\nCTRL + F<\/td>\nCmd + F<\/td>\n<\/tr>\n
    Find next<\/strong><\/td>\nCTRL + G<\/td>\nCMD + G<\/td>\n<\/tr>\n
    Find previous<\/strong><\/td>\nShift + CTRL + G<\/td>\nShift + CMD + G<\/td>\n<\/tr>\n
    Replace<\/strong><\/td>\nShift + CTRL + F<\/td>\nCMD + Option + F<\/td>\n<\/tr>\n
    Replace all<\/strong><\/td>\nShift + CTRL + R<\/td>\nShift + CMD + Option + F<\/td>\n<\/tr>\n
    Persistent search*<\/strong><\/td>\nAlt + F<\/td>\nAlt + F<\/td>\n<\/tr>\n
    Jump to line<\/strong><\/td>\nAlt + G<\/td>\nAlt + G<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n*In persistent search mode, search dialog does not close automatically. Use \u201cEnter\u201d to find the next term, and Shift + Enter to find the previous term<\/em>\n

    View and Restore Previous Revisions<\/h1>\n\"\"Pressbooks saves the last 10 revisions of any changes you've made for each of the three separate stylesheets. You can access these revisions on the Custom Styles page below the save button.\n\nTo view or restore a previous version of one of your stylesheets:\n
      \n \t
    1. Click the date stamp for the revision you'd like to view to open the Compare Revisions interface for a particular stylesheet<\/li>\n \t
    2. Find the revision you'd like to restore from and click the 'Restore This Revision<\/strong>' button\n\"\"<\/li>\n<\/ol>\n

      <\/a>Pressbooks Custom CSS Theme<\/h1>\nThe Pressbooks Custom CSS theme has been retired in favor of the Custom Styles feature detailed above. Legacy users may still have the Custom CSS theme applied, however. If your book has the Custom CSS theme applied, you will need to stay on that theme or risk losing your changes. If you think you might have to change themes at some point, first copy your stylesheets into a text editor. Then, you can change your theme, navigate to the \u201cCustom Styles\u201d section and re-enter the sections of your stylesheet that you have changed, following the steps detailed above.\n\nIn addition, users with the Pressbooks Custom CSS theme activated must save their custom CSS stylesheets before using the cover generator tool. When you switch to a different theme to generate a cover, you will not be able to access the Pressbooks Custom CSS theme again.\n\n
      \n\nPrefer to watch and learn? Watch this instructional video, created by our friends at       BCcampus<\/a>.\n\n