The React system is developed by Facebook. Framework7 React  is javascript based, but you can easy build it as a webb app so ios, PC and android can view the app like this at your homepage: http://www.viska.se/app

Framework7 React is in a way simpler to use than ordinary Framework7, but less powerful.

Here you can download the Framwork7 React template here:

https://github.com/framework7io/framework7-template-react

Updated: 30 January 2019

 

Viska-appen for android. First Psykossymptom is an accordion menu and under it a simple menu. 

Make an smartphone app for displaying Joomla articles.

I have no experience of making apps, but I have succeded to make two apps.

I choose Framework7, but you have two choices either: 1/ Framework7 with HTML-code that I found most powerful. You can build apk if you install Android Studio, but if you want to build ios you must have a Mac lso or 2/ Framework7 React that is javascript based but you can easy build it as a webb app so ios, PC and android can view the app like this: http://www.viska.se/app

Framework7 har several templates, so I choosed Singe View that seemed simple.

You can download it here https://framework7.io/templates/

You shall also download Framework Kitchen Zink, which contains examples of code that are useful.

You must install Node.js and install Gulp.

Look in the templates Readme file where you get instructions what to do.

The good with Framework7 is that you can view the app in your browser during the work.

Now the menu.

There are some alternatives for you:

Accordion menu with submenu for links

Accordion menu with subcontent like HTML-code for your article, so you dont need to open your home page.

Simple menu för different links.

I recommend a simple menu for all links. An accordion menu produced problems at search as I got the accordion menu title displayed and not what I searched for. It confused the users of the app.

Build the menu via accordion.html or list.html from Kitchen zink. You will find the right code there.

When the menu looks OK. You can add your links. However the opening of the links is the big problem. Will come to that later.

Now you need a Searchbar at the top. Easy to fix if you now exactly how. This is the code I used.

div class="page-content">
<div class="title"></div>
<form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap tooltip-init" data-tooltip="Obs! Om annat namn i resultat syns klicka på det så finns det i undermenyn">
<input type="search" placeholder="Sök"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Avbryt</span>
</div>
</form>

<div class="searchbar-backdrop"></div>

<div class="list accordion-list simple-list searchbar-not-found">
<ul>
<li>Fann inget</li>
</ul>
</div>
<!-- Scrollable page content-->

<!-- First group-->
<div class="list search-list searchbar-found">
<div class="block block-strong no-hairlines">

Look at this code:

tooltip-init" data-tooltip="Obs! Om annat namn i resultat syns klicka på det så finns det i undermenyn">

It demonstrates how you make tooltips, if you read the documentation you will not be sure how to fix this.

Now your list must be searchable:

Put this above all lists:

<div class="list search-list searchbar-found">

then after the last list put a </div>

Now check that you can search your lists and that it works for all lists.

The </div> put att wrong place can mess up things totally. But if you have your app in browser you can view sourcecode in browser and red html code is wrong and try to fix them.

Now we go back to the external links.

You have two choices:

<li>
<a class="item-content item-link link external" href="http://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/6941-agitation-upphetsning">

<div class="item-inner">
<div class="item-title">Upphetsning</div>
</div>
</a>
</li>

This opens up in the app your webpage, but to return to the app you must hit return in your smartphone. You can if you like add tooltips to the link that informs about that.

If you don't accept this you can use Cordovas Inappbrowser plugin. But then you must start a new project a Cordova project. Here is what you do.

https://www.npmjs.com/package/framework7-cli

And install also Cordovas InappBrowser plugin.

When the Cordova is ready copy the inside of www folder in Framework7 to inside of Cordovas www folder.

Then enable: <script src="/cordova.js"></script> at the bottom of index.html

Now you have to add Inappbrowser in file:

www/js/app.js

var ref = cordova.InAppBrowser.open('http://www.viska.se', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });
window.open = cordova.InAppBrowser.open;

before:

// Login Screen Demo

Then run the command: F7 serve android

To view your project in browser.

Now you can add your links:

<li>
<a class="item-link" href="#" onclick="window.open('http://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/6498-fiskolja-omega-3', '_blank', 'location=yes');">
<div class="item-inner">
<div class="item-title">Fiskolja/Omega-3</div>
</div>
</a>
</li>

This code triggers the inAppbrowser in the menu links:

onclick="window.open('http://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/6498-fiskolja-omega-3', '_blank', 'location=yes');"> Only _blank worked for me and not _self and _system.

However for me the grey list on the opened page did only appear after I built the app. Via the grey list you can shut down the page and get back to the app. This is probably due to that cordova.js is not available than after the app is built.

If you have text in your app that you don't want to appear in Search do like this:

<div class="item-inner">
<div class="title searchbar-hide-on-search">Psykossymptom</div>
</div>

Then the title will not appear in search results.

If you want a logo for the app do like this:

<div class="title sliding">Viska-appen</div><img src="/./img/viskaappen.png">

When your app is ready you can built it, if you installed the program Android Studio.

But first you have to set up the path, which is a little difficult:

https://www.youtube.com/watch?v=YVaGbwQephg

Now you can build your app with:

F7 build android

You will find your apk in:

/platform/android/app/build/outputs/apk/debug/app-debug.apk

Now you can install it in your android device.

You can look how my app looks like on the web: http://www.viska.se/app

If you want to build an ios app you must have a Mac computer and use the program Xcode.

My app consisted of many different menus that looked uneven and not homogenous.

You can fix that with CSS for different lists and list item and it is very easy.

If you have a menu item you want to adjust:

<a href="#" class="item-link item-content ">

add an unique name:

<a href="#" class="item-link item-content adder">

in www/css/app.css add:

.adder {

margin: -20px 0 0 0;

background-color: #F0F0F0;

}

Read more here:

https://www.w3schools.com/css/css_margin.asp

You can by using different px adjust it right.

The background color here is to make menus grey.

If you want to remove bullets in front of accordion lists add this in app.css:

li {

list-style-type:none;

}

Here you can download and test my app:

 

 

 

 

PH2New33

PH2New33 is a template created by viska.se for Joomla 3.x based on the popular PH2-theme for PHP-Nuke.

Earlier this PHP-Nuke template has been converted to Joomla 1.5 and 2.5 by viska.se.

This version has position-7, position-12 and position-2 like the Joomla 2.5 version. In addition CSS-support for columns and articles have been added and some more adjustments in CSS.

In images/extra in this template is the images you need to change text in the logo for your own site.

This version for 3.x has Bootstrap, but is is added in the css-folder of this template, so you can change in Bootstrap files without affecting other templates.

You can add more positions via editing index.php, but remember that don't change div id for that position, because then CSS for that position will not function. You can look at this template at this site by changing to PH2New25 i Ändra utseende in the left a bit down. 

Toad program with a script that you execute where the arrow is

As JFusion is no longer supported the alternative is to buy p8pBB bridge for 60 USD in worst case each year if your want to use phpBB 3. Many thinks this is too expensive, but it is possible to convert the phpBB3 database to a Kunena database in a rather short time and rather simple. With this procedure conversion not only from phpBB 3.0, but also 3.1 and 3.2 has been successful.

My forum:

phpBB 3.0.14

660 000 posts

50 000 topics

2800 members

phpbb_posts table 700 MB

PH2New is a template created by viska.se for Joomla 1.5 based on the popular PH2-theme for PHP-Nuke. This template has now been converted to Joomla 2.5 by viska.se. This version has position-7, position-12 and position-2. In addition CSS-support for columns and articles have been added and some more adjustments in CSS.

You can add more positions via editing index.php, but remember that don't change div id for that position, because then CSS for that position will not function. You can look at this template at this site by changing to PH2New25 i Ändra utseende in the left a bit down.

In images-folder is extra.zip, which when unzipped contain images so you can change images to fit your site. 

 

Note that the frontpage of PH2New25 should have grey background and it will have that if you have english as language or uses Home in menu. If you dont have home you need to change style1.css at the top with html.home and body.home.

Fabrik

New! Added support for PHP 7 and above. Updated 28 nov 2018

For Joomla there is only one quiz extension that is free – Ari Quiz Lite.

 

If you need a point based quiz you need to buy a quiz extension or construct a quiz with the Fabrik component or using HTML with javascript and put in an article.

 

Fabrik is complex and difficult to use, but if you know exactly what to do, it will take only 20 minutes to make a quiz and like using buyed quiz component.

 

If you don't know how to make a quiz in Fabrik it can take weeks to figure out. I asked in the Joomla forum how to make a quiz with Fabrik and noone knew and I was recommended to buy a quiz extension instead as it was so difficult.

Kodadesign was a popular template for Joomla 1.5 and used on many sites including viska.se.

Kodadesign has now been converted by viska.se to Joomla 2.5. An earlier conversion is available here, but it is not complete and useful.

Our version has position-7, position-12 and position-2. In addition CSS-support for columns and articles have been added and some more adjustments in CSS.

You can add more positions via editing index.php, but remember that don't change div id for that position, because then CSS for that position will not function. You can look att this template at this site by changing to kodadesign i Ändra utseende in the left a bit down.

PH2NewMob

PH2NewMob is a responsive template i.e also for smartphones, created by viska.se for Joomla 3.x based on the popular PH2-theme for PHP-Nuke.

Earlier this PHP-Nuke template has been converted to Joomla 1.5 , 2.5 and Joomla 3.x by viska.se.

This is a total remake with Bootstrap to make it more modern, responsive, menu to right and easy to work with for Joomla 3.x

The logo is available as yourlogo.jpg (templates /images folder) without text, so you can easy adapt it to your site. This logo is a single image, so it does not have the multiple image design as earlier Joomla PH2 templates. If you want clickable buttons use PH2New33 instead. 

This template has 1 bug fix made by viska.se that also can be used for Protostar template. Read more below.

Updated with improved menu position. 8 september 2015

Updated with some css-fixes. Works with Joomla 3.9. 17 november 2018

 

The PH2-template for Joomla 1.5 has now been modernized by viska.se with another menu and article style - PH2New.

Much of the colours and style of PH2 has been kept, but it looks more modern and Joomla-like.

Note that the frontpage of PH2New should have grey background and it will have that if your have english as language or the uses Home in menu.

In images-folder is extra.zip, which when unzipped contain images so you can change images to fit your site. 

If you dont have home you need to change style1.css at the top with html.home and body.home.