They would like to add a link at the bottom of every single chapter that would allow future users of the content and students to submit feedback, suggestions, etc. However, I don’t really want those links in our PDFs!
Is there a style or could I create a custom style that would tell PrinceXML to skip over certain content if I only wanted it in the electronic versions of the book?
We are imagining something like the screenshot below, but we don’t want to print that large chunk of text over and over again in a PDF. In this book, the improve this page link goes to a google doc with “suggesting” sharing permissions, so that someone can leave a comment or make a change in the book that can later be accepted or rejected by the team.
Could I define a custom style in my custom CSS area that would tell prince to not display it and then just wrap this additional footer in a div with that custom style? Is there another better way to do this that someone else has already thought of?
Hi @beckej definitely! You should be able to simply go to ‘Appearance’->‘Custom Styles’ and select PDF. You can then target the class or element you want to leave out and give it a display:none; CSS property as shown in the screenshot below:
I love this strategy and it’s worked well for me in the past! To piggyback on this topic with a related question: is there anything I could add to the print-only and web-only css code to change the way web- or print-only content appears in the WYSIWYG editing window but not in the final text?
I’m working with collaborators who could really benefit from this approach, but who are not quite at the css-styling or html editor stage. If there was a way to visually distinguish between content marked web-only and other content in the WYSYWIG editor, it could make this strategy feasible for them because they wouldn’t accidentally add text to areas that (unbeknownst to them) are styled “web only.” If I could make the web-only portion whow up with, like, a pink background or something, they’d know where that section stopped and started without having to interact with the html editor.
(I feel like this should have something to do with the “#tinymce.wp-editor” language I keep seeing pop up in the original CSS and can get the styling to preview as I want it to when I use the Chrome Inspector tool, but with my rudimentary CSS knowledge, I can’t get the change to stick when I copy over the text I’ve tweaked to the custom CSS section of our book…)
Hey Naomi – the specific problem here is that ‘custom styles’ are only loaded in the reading interface and aren’t loaded in the admin/editing interface in Pressbooks. This means that even if you were to declare a style for a web only element, like
it won’t be loaded when you’re editing your book/chapter. We’d need to make this a feature request. We can either a) load custom styles in the admin interface (I think this would be unwise) or b) define a web-only style that changes its appearance in the editor in Buckram/McLuhan itself. Let me know if you’d want to discuss further and shape this into a product idea?
@steel that’s not correct! I tested with my solution above and:
a) you get content w red background in the editor
b) you do not get content w red background in the Web output
I’m thrilled to have a CSS style that will work in the short run, and would love this to be a feature request as well! thanks to you both!
@Steel, count me in for helping shape this into a product idea. (I know that folks can make variation pages for web and print if they’re not comfortable using the CSS, but I could see a built-in feature being really nice for folks who prefer to update one page rather than two when they want to make changes to a chapter. )
I think @hugh and I are describing two different things here, Naomi. Sorry for confusion. In Hugh’s solution, he’s adding inline CSS to a given element, and then using custom styles to hide or suppress this element in web or export views. You can indeed do this with our current set up. What you cannot do, however, is write custom CSS which changes the appearance of an element in the TinyMCE/WYSIWYG editor, which is what I understood you to be asking in your questions:
is there anything I could add to the print-only and web-only css code to change the way web- or print-only content appears in the WYSIWYG editing window but not in the final text? … [is there] a way to visually distinguish between content marked web-only and other content in the WYSYWIG editor?
Pressbooks does currently include some CSS which alters the appearance of elements in the TinyMCE WYSIWYG. Our current approach has been to try to make sure that the WYSIWYG text resembles the web output, where possible. We do this by targeting body#tinymce.wp-editor elements. The #tinymce.wp-editor ID selector means that only elements inside of the TinyMCE editor should be affected. Here’s where we do this in Pressbook-book, for example: pressbooks-book/packages/buckram/assets/styles/editor/_editor.scss at dev · pressbooks/pressbooks-book · GitHub
We do not load Custom CSS on the page that contains the editor, however, which means that you cannot change these selectors with Custom CSS. We do load it in the reading interface, and when producing EPUB and PDF exports. In Hugh’s example, the reason it works is because we’re suppressing the extra divs with custom CSS and targeted classes in the webbook with the display:none; Custom CSS rule. It sounded to me like you wanted to be able to apply a .web-only class to elements and have them be visually marked (via CSS) in the editor but not in web exports without adding extra content. This cannot be done with Custom CSS, at present.
)