Steps to create your own theme:
-
First thing first, PGA themes use Bootstrap 3.x and Blade as its templating engine as a base for all UI Development. The capability to let users use another UI framework is being worked upon and would be available in the future. If users still want to use another UI framework, they could add it in theme header/footer and it will act as the overwriting entity on anything which Bootstrap has a hold on.
-
Copy /public/themes/base folder in the same 'themes' folder and rename it to your theme. Lets call this folder 'theme1' for the rest of the steps.
-
PGA Theme structure:
Below is how all UIs are layered in a theme.
Folder 'Theme1' contains 4 folders:
- Assets: All styling, scripts and image files can be kept here and accessed in theme pages using- {{ URL::to('/') }}/themes/{{Session::get('theme')}}/assets/<filename.css> Users can create additional folders inside 'assets' for structuring purposes like css, js, img files.
- Partials: All HTML blocks and pages which should be included in a theme can be added here. By default, this folder contains header.blade.php, footer.blade.php and template.blade.php and should NOT be deleted.
- Layouts and Views: Additional folders to structure extra theme components and plugin layouts if any.
This is the space where Theme creaters can add their theme headers which would generally contain styles or links to styles, global navigation for a Scientific gateway having logo/s, links etc which would show across all pages on PGA.
All content for Theme Header can be added in theme1/partials/header.blade.php.
Additional pages other than the landing page can be created and linked to THEME header. The way to do that is add the page content to 'theme1/partials/<page1.blade.php>' and can be referenced/linked from anywhere inside the theme pages with the link: '{{URL::to('/')}}/pages/page1' ( blade.php does not need to be written).
<title>Theme1</title>