Editing underlying templates

[Hunter2809]

Hi!

I wanted to know if there's a way to edit the underlying templates from code to gain more control over the look of the output?

Thanks!

[helincao]

There're several layers of customization you can do:

• For output widgets and page layout: https://pywebio.readthedocs.io/en/latest/output.html#layout-and-style
  • E.g., put_xxx.style() to change the feel and look: https://pywebio.readthedocs.io/en/latest/guide.html#style
• For a page, you can inject CSS files or script using pywebio.config(): https://pywebio.readthedocs.io/en/latest/platform.html#pywebio.config
• If you want a totally new theme, you can design your own by following the examples in this folder (we don't have an official doc yet on how to do it): https://github.com/pywebio/PyWebIO/tree/dev/pywebio/html/css/bs-theme

Other than these, do you have some more specific goals you want to achieve?

---

Edit: fix the link to pywebio.config()'s doc.

[Hunter2809]

Ah, this is what I totally wanted. Thanks for guiding me!

[Hunter2809]

Hey, so what if I want to add new HTML files, handwritten by me, in Brython? Is there a support for the same in pywebio?

[helincao]

There're 2 ways to serving static HTML files:

1. Directly: Using path_deploy(static_dir='path_to_static_folder') to host a static HTML file.
2. Indirectly: Reading the HTML code as a string and use output.put_html() to place the block into a web page as a widget. But, there might be some css conflicts that need your attention.

BTW, Brython is a very interesting project, and I can see its great potential to make Python a first-class citizen in the web world. But I never got a chance to dig deeper into it. Do you mind joining our discord server 0 and sharing your learnings?

[richylyq]

i was able to set the inject the CSS for the whole pywebio page, however the input group wasn't stylized, how should i go about doing it

[wang0618]

What's the CSS you inject and what you want to change the input group to?

[richylyq]

i want to change the width of the input group, i think the form was affected but the border of the form wasn't?

the CSS i injected looks sth like this
@config(theme="sketchy", css_style="* { width: 1366px; }")

[wang0618]

It's your CSS issue. You can use css_style="#input-container{margin: 0 auto; width: 200px}" to change the width of input panel.
The 200px part is the width of input panel.

[richylyq]

i meant like to stretch out the whole page like this; to fill in the sides instead of just showing the content at the middle of the page. how to go about doing it? 🤔

[wang0618]

You need pywebio.session.set_env(output_max_width='1366px')
Doc: https://pywebio.readthedocs.io/en/latest/session.html#pywebio.session.set_env