Download the PHP package arif-rh/ci4-themes without Composer
On this page you can find all versions of the php package arif-rh/ci4-themes. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download arif-rh/ci4-themes
More information about arif-rh/ci4-themes
Files in arif-rh/ci4-themes
Package ci4-themes
Short Description Theme Library for CodeIgniter 4
License MIT
Homepage https://github.com/arif-rh/ci4-themes
Informations about the package ci4-themes
CodeIgniter 4 Themes
Installation
-
install via composer, run
composer require arif-rh/ci4-themes
-
setup your theme config (optional), if you don not setup config, then it will use default one
- if you do not change config, theme folder structure will be like below, so copy all your files here:
CI4 Themes Documentation
Table of Contents
- CodeIgniter 4 Themes
- Installation
- CI4 Themes Documentation
- Table of Contents
- Themes Config
- Themes
- init
- addCSS
- addJS
- addInlineJS
- addExternalCSS
- addExternalJS
- loadPlugins
- useFullTemplate
- setHeader
- setTemplate
- setFooter
- setTheme
- render
- renderCSS
- renderJS
- setPageTitle
- setVar
- getData()
Themes Config
- Full name: \Arifrh\Themes\Config\Themes
This is default config themes. You can override themes by extending this default themes, for example make file inside App\Config\
You can use this new theme config later.
Themes
Class Themes
- Full name: \Arifrh\Themes\Themes
init
Instantiate Themes with theme config, if you don't pass $config
then it will use default one.
This method is static.
Parameters:
Parameter | Type | Description |
---|---|---|
$config |
\Config\Themes | Theme Configuration |
Example Usage:
addCSS
Add CSS file(s) to be loaded inside template. This must be used after Themes::init()
. All non-static method must be called after Themes::init()
.
Parameters:
Parameter | Type | Description |
---|---|---|
$css_files |
string|array | CSS filename that will be loaded in template. This CSS file must be exist inside css_path in \Config\Themes |
Return Value:
Arifrh\Themes\Themes
NOTE: All non-static method always return the chained object, so you can call next method directly.
Example Usage:
There are 3 ways you can add CSS files:
addJS
Add js file(s) to be loaded inside template. This method has same usage with addCSS()
method. The different just parameter(s) to be passed are JavaScript filename.
Parameters:
Parameter | Type | Description |
---|---|---|
$js_files |
string|array | JS filename that will be loaded in template. This JS file must be exist inside js_path in \Config\Themes |
Example Usage:
addInlineJS
Inject inline JavaScript code to the template.
Parameters:
Parameter | Type | Description |
---|---|---|
$js_scripts |
string | Valid JavaScript code to be added. |
addExternalCSS
Add CSS from external source (fully CSS URL). This is used when we need to include CSS files outside css_path
in theme folder.
Parameters:
Parameter | Type | Description |
---|---|---|
$full_css_path |
string|array | CSS filename with full path. |
addExternalJS
Add JS from external source (fully JavaScript URL). This is used when we need to include JavaScript files outside js_path
in theme folder.
Parameters:
Parameter | Type | Description |
---|---|---|
$full_js_path |
string|array | JavaScript filename with full path. |
loadPlugins
Plugins are JavaScript Libraries that will be mostly used in many place the project, but not all page always use it. For example, DataTable
, Bootbox
, Select2
.
Parameters:
Parameter | Type | Description |
---|---|---|
$plugins |
string|array | Registered plugins key name. |
Plugins are registered inside \Config\Themes
. This is an example in \Arifrh\Themes\Config\Themes
about how to define plugins.
Example Usage:
useFullTemplate
Parameters:
Parameter | Type | Description |
---|---|---|
$use_full_template |
boolean |
This Themes by default will use 3 kind of templates. All of these templates are located inside themes folder.
-
Header Header is a template that usually used to display header of site, contains
<html>
,<title>
,<head>
and opening<body>
html tags. This header section usually is same for all pages, and being used to load common CSS files.By default, header template will use
header.php
filename, you can change this from\Config\Themes
. -
Template This is main template. Content will be injected here.
By default, template use
index.php
and this also can be changed from\Config\Themes
. -
Footer Footer is a template that usually used to display footer of site, contains closing tags for
<body>
and<html>
. This footer section usually is same for all pages, and being used to load common JavaScript files.By default, footer template will use
footer.php
filename, you can change this from\Config\Themes
.
In a few case, you may need to display custom template, for example your default template has navbar, sidebar, content and main footer. But in login page, you need to display page without navbar, sidebar and has different footer. In this case, you can use full template.
- make your login view with full html and body tags
- before rendering template, call
useFullTemplate
setHeader
Header that being set in \Config\Themes
will be used as default theme header.
Parameters:
Parameter | Type | Description |
---|---|---|
$header_name |
string | Header file name |
In a few case, one or two page may need to use different header, then you can set it on-the-fly.
setTemplate
Template that being set in \Config\Themes
will be used as default theme main template.
Parameters:
Parameter | Type | Description |
---|---|---|
$template_name |
string | Template file name |
In a few case, one or two page may need to use different template, then you can set it on-the-fly.
setFooter
Footer that being set in \Config\Themes
will be used as default theme footer.
Parameters:
Parameter | Type | Description |
---|---|---|
$footer_name |
string | Footer file name |
In a few case, one or two page may need to use different footer, then you can set it on-the-fly.
setTheme
Themes that being set in \Config\Themes
will be used as default theme.
Parameters:
Parameter | Type | Description |
---|---|---|
$theme_name |
string | Theme name |
In a few case, one or two page may need to use different theme, then you can set it on-the-fly.
Note:
- This change theme on-the-fly only work if you have same folder structures and template name accross your themes.
- If your themes have different structure and/or template name, use
init($config)
instead.
render
This is main method that will render any content using active theme templates.
Parameters:
Parameter | Type | Description |
---|---|---|
$viewPath |
string | View file name, or string to be rendered directly into template |
$data |
array | Dynamic variable that will be passed into view |
Basically, when you want to display view in CodeIgniter4, you are using view
method. Now, just replace your view
method with Themes::render()
and view will be rendered based on your active theme.
renderCSS
This method will render all CSS themes. This usually should be called inside header template
renderJS
This method will render all JavaScript themes. This usually should be called inside footer template.
setPageTitle
Parameters:
Parameter | Type | Description |
---|---|---|
$page_title |
string | Text will be used as title page |
Set Page Title - used in <title>
tags. If you do not set page title, then theme will use Controller | Method name as default title. $page_title
variable always be available for themes, It can be used inside <title>
tag.
setVar
Set Variable to be passed into template. Actually this can be passed using $data
parameter in Themes::render()
method. So this is just an alias to passing data into template.
Parameters:
Parameter | Type | Description |
---|---|---|
$key |
string|array | if string, this is key of dynamic variable. If using array, then array index will be used as dynamic variable inside template |
$value |
mixed |
Example Usage:
getData()
Get All Themes Variables