I need to build an offline app for the desktop. Any help or better step by step instructions guide for Wappler would be awesome, please!

exactly… :sweat_smile: so where exactly or how do I insert the HTML code and the CSS code in Wappler?
cause it generates a whole black (hole) circle

That would be very nice, thank you!

Here’s how you switch to code view.

I think you’re almost there. Did you add the css code to the style.css file?

If you added the css to the style.css file, then try clicking this button to view the app in your browser instead of in Wappler.

image

This is what I see.

Here’s a video showing me adding a click event on one of the cells and it showing an alert with “hello”.

The unfortunate part is Wappler is not built to show SVG code in its App Structure or easily interact with it, so it will definitely be more difficult than normal to enhance it.

image

It will require viewing the design in the browser and using “Inspect Element” to find the appropriate code for each section, then going back to Wappler code view and using the Find feature to find the code, then manually add the events.

1 Like

i’m not sure how to do that “css”

Since you’re doing a mobie project it will be in a slightly different location.

Click File, then look for a css folder with style.css
image

there is no public folder in the area for me, it’s called “www” i opened the css file there and replaced the content off the css.file with the new css code. and then i pressed the button as you described, but the result doesn’t look good in the browser :slightly_frowning_face:

It the css file referenced in the head of your html file?

hmm no, I didn’t know about that and how or where do I do that?

where exactly do I insert the HTML code in my project sir ? i have replaced my index.html with that given
codepen HTML Code i suppose thats wrong !?

do i have to copy the red underlined code from somewhere and then paste it in or do i have to enter it by hand, because i can’t find the code anywhere, as it is in your screenshot?

I don’t think you want to replace all of the code. The codepen html should have been placed inbetween <body> and </body>. Everything above and below should have been kept.

Try creating a brand new page and looking at what is automatically added to the page, then look for the body tab and add the codepen html in there.

This is how it looks for me at the moment

i have now created complete a new desktop project from scratch, so my question, do i need to create a framework or something else important that I don’t know now, so the app can runs without issues ?

Welcome to our daily task :rofl:

Just want to say, that you can share your code and format it adequately so everybody can see it :slight_smile:
Just follow: How to format code in your posts

You can try adding Keith example to your project by copying the HTML code into your code as he explained.


Then you can open the file css/style.css and paste CSS example that he shared in the same post

You can focus now, about the code, and you can preview it like he said.
If you have issues with building the app, we can see that later!

and how do we do that with css file to reference in the head of your html file Sir ?

by the way, thanks for the engagement :pray: without you I would probably be pretty lost in this pile of code jungle :upside_down_face:

Hi there, I wanted to show you the model that corresponds more to my design wishes, so as far as the basic shape is concerned, this example is best suited for my purposes, this is also the only design that can be found in “CodePen” that fits my project best, at least in terms of appearance… :wink: what do you think we could integrate the beast into my project or use it as a starting point?

hello i urgently need help, i have successfully integrated this codepen circle above into wappler (it shows it successfully in the browser) but now i lack the necessary knowledge to further customize it, for example to remove this dropdown menu or to provide the individual panes with different colors, and also to make the circle interactive according to my wishes, the original circle does things that i don’t want when i click on it etc…