Design template

" I am doing my first work on anvil and never listen about it before, so don’t know about it and it’s urgent. I am working on a project and don’t know how to create design or theme for my project. please help me in this. ```

What are you having trouble with in particular? Are you having trouble integrating your existing designs or with making those designs?

If you show us some code examples or a clone link we can give a proper answer rather than just guessing what you need.

1 Like

There’s also an excellent example done by the Anvil team on integrating custom HTML/CSS into an Anvil app: A fully-featured ticketing system, built with Anvil

3 Likes

Actually, i am making a web app related to cyber security, I have made all screens but having trouble with the design. I don’t know how to do it. I have seen this A fully-featured ticketing system, built with Anvil but I can’t understand this.

Right now, I just want to complete my frontend, but troubling with web app design, can we integrate some templates from other sites or such other thing,

Don’t know how to share a clone of this web app

Here’s how to clone it.

We really need specific questions, telling us that your designs aren’t working how you expected them to gives us nothing to work on to help you.

How can we add splash screen that start our app with the logo

Do you already have the html and css created?

No, there is only right now theme.css and standard.html

So are you trying to find someone to make the whole splash screen design in html and css for you? If so, this would be better for the job adverts section since that’s a good bit of work.

No, I just want to tell me how can I do it

Which part are you having trouble with? What have you tried already? Do you have any code snippets or clone links to share?

"from ._anvil_designer import splashTemplate
from anvil import *
import anvil.server
import anvil.users
import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables
import anvil.js
class splash(splashTemplate):
def init(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)

splash_screen = SplashScreenForm()

splash_screen.show()

    # After a delay, hide the splash screen and show the main content

anvil.js.call_with_timeout(“hide_splash_screen”, lambda: splash_screen.raise_event(‘close’), 5000)

"

this is the html form I created add this code in code section

I can’t tell where the SpahsScreenForm is coming from but I think you’d be better off doing this:

  1. Create a form that’s custom html and make the custom html your splash screen html.
  2. Make the splash screen your startup form.
  3. In the client code of the splash screen add the show event and use the python library to use time.sleep and then the open_form function to open the form with the main content like this:
def form_show(self, **event_args):
    time.sleep(<delay>)
    open_form("main form name")

yes, I have also done that but i added the above code in client code of splash screen. I just want that when this web app starts it will start with logo of my web app and then open login form

Have you set the splash screen form as the startup form? That is the way to do that. As long as you have the splash screen form separate from the main content the above should work. If it doesn’t I would need more details cause I don’t see any reason my solution shouldn’t work without more details and or code snippets.

yes, I have set splash screen as startup form

Can you please share a clone link? Even if it is a stripped down one that just shows the pertinent parts, without seeing the errors and running the code I can’t help. When coming to the forum for help you need to provide sufficient details for us to help rather than short statements where I have to drag the details out of you. I cant read your mind and if I don’t see the code I don’t have the context to help.