Master layout or page to keep the header and footer as same for all the pages

[thines]

Hi, I’m new to wappler but i love to work with it. i have started do dynamic web app but i have stuck with layout issue… if i want keep common element through out the site which means like a master page/layout. How can i do that? i have searched everywhere to find out master page/layout features but there is nothing found. Is there anyone found this feature or way of doing? please help me… advance thanks

[norcoscia]

I’m new also - I have not tried this yet but it was talked about a day or so ago - I think that is what you want

https://wappler.io/docs/#Server-Side-Includes

Originally discussed somewhat here down in the thread…

Copy elements to another page

I would like the option to select an element e.g. a Navbar in one page and paste it into a new page or replace an existing Navbar in a second page. Sometimes I need to adapt the same Navbar in several pages. In Wappler I only see Duplicate, Delete and Move to include. In DW it is easy to copy and paste elements between pages. Will this be possible in Wappler ? It is timewasting to do the same adaption on every page separately.

[revjrblack]

I typically create a separate navbar-top.php and navbar-bottom.php, each as a separate page. One set before login wo/ nav buttons, and another for after login w/ nav buttons & logout button. Afterward use the <?php include ... ?> to include them in each page.

Sometime I create a simple page with all of the navbars included. Afterward cut and paste them in a separate page. Or better, use Wappler’s SSI feature to copy the code to another page.

[ben]

Have a look at https://wapplerunwrapped.online/videoplayer.php?id=11 and start at 39’40", with thanks to @psweb

[thines]

Thanks to all of you for the replies. Its really helped lot. I have managed to add SSI and used them wherever i wanted. But now i got into a new issue/bug. maybe not. When i linked the pages to Navlinks and then i previewed and clicked on the links works fine but there is flashing page load. which isn’t looks nice. Anyone of you have noticed this?? or i’m i doing wrong?

[Teodor]

Not sure what you mean by: “the links works fine but there is flashing page load”? Can you provide a link to your page, where we can check this?

[thines]

Hi, i do not have link to my web app, i just started to build the web app. i mean to say when i click on the menu links. page switching with white flash. I used SSI to include the header in each page and linked the menu items. its like refreshing the page. its usual i know but i feel its bit more flashing when switching the pages by clicking the nav link.

[Teodor]

I really don’t understand you. When you switch between pages of your website the pages reload - there is nothing strange. Not sure what could be “more flashing”.
Please do upload your page to some testing server where we can access it and check this.

[psweb]

Can I ask you @thines did you possibly go and add active classes anywhere on any of the links that take you to other pages, or are you rather allowing the active classes to be toggled from the default Wappler behaviours like they should. I had two menu items set as active at one time by mistake and it looked very flashy while the script was trying to remove the classes where no longer needed and add them to the correct place.
Wappler is smart enough that you do not need to add your own active class or hit the active checkbox in the properties panel for your navbar.
Just a thought, just incase.

[thines]

Hi, What i did was, made a navbar and added as SSI (Server side include). Then i placed the include in each page also assigned the link to the pages. For example home, about pages. there is no active marked for both links. there is no any other styles applied to the link. It just a bootstrap 4 navbar. I have both pages inside a folder called Admin. Such as Dashboard.php, About.php. So the links are like this localhost:8888/Appname/Admin/Dashboard.php, localhost:8888/Appname/Admin/About.php, when clicking the links going to above pages with flashy. like white color flash(browser load).

[Teodor]

I am totally lost now
When you change pages your browser reloads the page you select - what else do you expect?
Can you make some short screen capture and upload it here so we can check it what is wrong exactly?

[thines]

Hi Teodor, Really sorry for this. I did not get it, i’m i doing wrong or something else. Browser load is common thing i know that. I feel this is bit more flashy. I have tried lot to find out why. nothing worked. maybe it normal.
Thanks for the quick reply anyway. I’m loving to work with wappler

[Teodor]

Will you be able to do this:

Can you make some short screen capture and upload it here so we can check it what is wrong exactly?

[thines]

I could not take screenshot of flashy moment. Its hard to take that. I feel its normal, maybe i’m wrong. Please close this issue. Thanks

[thines]

Oh… I just updated the wappler from 1.3.3 to 1.4.0, now the flashing is gone, now its perfect !
Great