Change the print layout for recipes

[moses19850]

Hi,
I'm new to cookbook, but I love it and already put some of my grandmothers recipes there.
Now comes the question: Can I customize to pint layout? I want to create a nice printed recipe book with custom layout as present.

As I am not a developer, I would appreciate if somebody could tell me where to start.

THANKS

[christianlupus]

As i wrote in the forum already, the layout is generated by your browser in combination with the CSS in the frontend Vue code.

There is no way ATM to tweak the visual representation directly. You could add user CSS to modify the visual appearance of you know how to do that.

Do you have something in your mind, what you would like to have in the printouts? Maybe, i can help with that. Maybe you can make some examples, sketches or similar...

[moses19850]

Thanks for your support. I was not able to find this information. Sorry.

Enclosed an example how I can imagine the layout.
Rezepte_Vorlage.pptx

If you need something, please ask.

[gibelium]

Hi guys,
I just came around the same challenge. I do not want to create a sophisticated layout but would love the following enhancements:

• A printed page should use the page width. Currently a printed receipt only uses ~60% of the page width
• Have some headers using bold font weight and/or different font sizes
• Exclude key words
• Exclude creation and last change dates

I would love to learn how / where I can add a custom CSS for printing purposes.

[christianlupus]

OK, this could be manageable. Let's go through the points.

The width is only 60% because this is reserved for the ingredients, I suspect. Am I right? The alternative would be to add a floating effect on the ingredients. Is this what you have in mind? If not, could you make a sketch on how this might work in your opinion?

What are the headers looking like ATM for you? What browser/OS are you using for printing? You are talking of headers written by yourself, right?

The keywords can be excluded, no big problem there. Maybe it should be configurable though, see #1067.
The same holds true for the dates you mentioned.

In general, you can use tools like this CSS injector in your browser to add custom CSS for arbitrary pages. With that, you can override the complete appearance of any website (including the cookbook). both on screen as well as on paper.
I cannot give you a complete introduction to CSS here (too long) but just point you to media queries. For more in-depth questions, I might be able to answer them or not.

[gibelium]

Thank you very much for the awesome fast response.

• It does not seem to be a reserved space (see attached printout)
• I am using MacOS with Brave browser (a chrome derivate) and could also test with Safari, Firefox, Chrome (original)
• I am talking about the standard headers Ingredients, Tools, Instructions, Nutrition Information.
• I added a screenshot of the onscreen appearance of the test receipt and a printout - one with my annotations, one without

As software consultant with developer background I am pretty familiar with CSS and also can do some coding work. I did not yet work with nextcloud apps instead of intense testing of the bookmarks app. However, I will do some tests with the css injector.

I could imagine a dedicated print dialog for cookbook which provides checkboxes to exclude content (picture, keywords, dates, etc) and lets the user configure the font sizes. This print dialog could use a standard css file coming with the app and give the user the opportunity to add a custom css file for printing purposes.

Would it also be possible to add a css file to the cookbook app that overrides some values of the one provided in the Vue code to change the onscreen appearance?

Attachments

Cookbook_Test-Receipt_Onscreen
Cookbook_Test-Receipt_Printout.pdf
Cookbook_Test-Receipt_Printout-with-annotations.pdf

[christianlupus]

OK, I will have a look if these can be implemented with the next version. There ii a major rework of the frontend #1244 on the road and when doing this, the printout can be revisited.

[christianlupus]

Styling certain aspects of the appearance by means of CSS might be possible for sure by defining some CSS variables and using them as parameters (think of the font size) for the printout.

It might be possible to add some custom CSS code to the NC core but this is also high-risk to average internet users as this allows for various changes that might break the app completely. I am not sure, I am liking the idea of someone sharing some lines of CSS claiming whatever. We must be very careful to not open any code injection or similar risks which would directly go to the heart of the NC instance as a logged-in user (or even admin).