Make the most of Joomla's core Protostar template. Style and never worry about overwriting on updates!
Style the core Joomla Protostar template without editing any files by using the simple styling tools and the custom inline CSS editor.
If you want to have many themes to choose from, easily add multiple custom CSS themes to the new custom/themes folder and be able to change the display as desired by simply selecting the file from a list.
If you want to rearrange the positions or have more positions, easily add multiple custom PHP templates to the new custom/templates folder, then easily select the desired template from the drop list in the protostar template manager.
See the demo of the included themes
Features
-
Features
- Create multiple template index files and select one for each duplicate instance of the protostar template.
Place the files in protostar/custom/templates
Though Joomla has the function to create template duplicates (preferred), it merely creates a database instance with an ID to allow new parameter settings, but the files remain the same. Any change to the files will affect all instances. The other method to create actual file copy of the template will provide files which can be edited without affecting the core but eventually just clutters the template directory.
This Proto Option feature allows the use of multiple file templates in the single Protostar core directory without the clutter and no concern of overwriting on updates.. - Add multiple CSS themes
Place the files in protostar/custom/themes to make them available for selections in the template manager - Add custom PHP
Create a file named user.php and place it in protostar/custom - Add custom parameter fields
Create a file named user.xml and place it in protostar/custom
To output the value of the parameter elements, write the coding in user.php - Set a custom favicon and never lose it on updates
Add a global favicon which will serve all duplicates of Protostar, or set a different favicon for each duplicate. - Create installable themes and display templates
Make exotic designs and package as a Joomla file installer which uses the standard installation system. File installer also supports update notification. Spawn a new revenue source when you sell each Protostar theme.
Included Themes
{gallery}cmse-proto-options:120:100:0:2:jquery_fancybox:Sleek{/gallery}
- Create multiple template index files and select one for each duplicate instance of the protostar template.
Installation
-
Installation
When the plugin is enabled, it will copy a directory named custom to the protostar root. The directory contains:
- bak
- templates
- themes
- index.html
- log.txt
The core file index.php will be moved to folder bak and a custom replacement is set in protostar root. If the plugin is disabled, the core index.php will be used from the bak folder.
A folder named bak will be created in protostar/html and the core modules.php will be moved to the new folder and a custom replacement will be copied to the html folder. If the plugin is disabled, the core will be used.
If the plugin is uninstalled, the core index.php will be moved to protostar root, the core modules.php will be restored to the html folder. All the new folders will be deleted.
The plugin will dynamically maintain the new index.php after every joomla and protostar update so there is no concern of an overwrite.
Install and enable the plugin
Set the global favicon that will serve all duplicate instances of the template
Setup
-
Setup
Custom template selection
Create custom display files and re-arrange the positions or add more to get really exotic layouts, then easily select the desire template from the list.
Custom theme selection
Create any kinda exotic styles and select when desired. If you already had a custom user.css, it will be copied to the theme folder and be selectable.
Simple styling
Add simple styling without creating any files
Inline CSS
Add inline CSS for any simple style adjustment, without the need to add any file.
Inline Javascript
Add inline javascript for simple functions
Script files
Add script files from any location including external sources such as Bootsrap, Fontawesome, Facebook, Twitter etc
Usage Tips
-
Note: The default.php template is set as default on installation and naturally it behaves exactly as the core Protostar. Though it can be styled, some of the following functions will not work with the default. Choose enhanced.php for best results. With the enhanced template, your modules are not confined to specific positions.
Output pill navigation
Add the default class nav-pills to Menu Class Suffix and add class topnav to Module Class Suffix
Set the top navigation bar to stick (fix) to the top of the browser window when scrolled
Add class stickhead to the module class suffix field
Note: adding the class to any module or element will cause it to stick to the top.Add multiple sticky (fixed) values to use for different positions
Add the following code method to the inline javascript field in the Advanced tab to create classes that can be used through out the site.
jQuery(function($) { $(".stick2").sticky({ topSpacing: 50 }); // stop 50px from top $(".stick3").sticky({ topSpacing: 100 }); // stop 100px from top });
Module Title Styling
The plugin adds a method to alter module titles to style in the most exotic ways. Easily set colors per word or set of words in the title. Just wrap with a simple shortcode eg: The title here and the rest of the title
The field supports safeHTML so any standard HTML tag can be inserted, including images. Imagine using an image for your module title... Wikkid! Even wrap the entire title in an anchor tag to link anywhere.
Insert Font Icons from FontAwesome or Joomla's IcoMoon library. Select from the preset list or type in what ever you desire.
The result
Individual Module Styling
Each module can be styled to standout
The result
Custom Coding
-
To add more parameter form fields to the template options, create a file named user.xml and place it in protostar/custom
Form Field Coding
<?xml version="1.0" encoding="UTF-8"?> <form> <fields name="params"> <fieldset name="basic"> <field type="radio" name="showbacktotop" class="btn-group btn-group-yesno" default="1" label="Show Top Button" /> </fieldset> </fields> </form>
To output the parameter value and the resulting data and to add your special php functions, variables and processes, create a file named user.php and place it in protostar/custom. All the standard Joomla classes are already called by the plugin's var.php as common variables.
<?php defined('_JEXEC') or die; $btt = ''; //define null value for the variable to avoid php errors if( $this->params->get('showbacktotop') ) { $btt = '<a href="#top">Top</a>'; }
Note: the code can be placed in a template file but creating a variable in the global file will make it available for use in all your templates.
Theme Installer
-
Developers can easily create exciting theme designs and package as a Joomla file installation.
- Create the parent directory with a unique name eg: cmse_sunnyday
- Create the XML manifest and give it the same unique name as cmse_sunnyday.xml
- Create the theme folder for the .css file(s) and other dependent assets and give it the same unique name as cmse_sunnyday
- If a display template is to included, give it the same unique name as cmse_sunnyday.php and place in the parent folder.
- if custom parameter form fields will be inserted, create a folder named specifically params and add the xml file named cmse_sunnyday.xml and the value output file named cmse_sunnyday.php and place inside the params folder.
- Create a script file and name it install.php. This will handle the processes during installation and un-installation.
cmse_sunnyday.xml
<?xml version="1.0" encoding="UTF-8"?> <extension version="3.6" type="file" method="upgrade"> <name>SunnyDay For Protostar</name> <author>MyDesign</author> <authorEmail>mail@mydesign.com</authorEmail> <authorUrl>www.mydesign.com</authorUrl> <copyright>(C) 2018 MyDesign.com. All rights reserved</copyright> <license>GNU General Public License version 2 or later; see LICENSE.txt</license> <version>1.0</version> <creationDate>August 2018</creationDate> <description>SunnyDay Theme to make the site nice</description> <updateservers> <server type="extension" priority="1" name="SunnyDay Theme For Protostar">http://www.url-to-updatexml.com/proto-options-sunnyday.xml</server> </updateservers> <languages folder="language"> <language tag="en-GB">en-GB/en-GB.files_cmse_sunnyday.ini</language> <language tag="en-GB">en-GB/en-GB.files_cmse_sunnyday.sys.ini</language> </languages> <fileset> <files> <folder>cmse_sunnyday</folder> <folder>language</folder> <folder>params</folder> <file>cmse_sunnyday.php</file> </files> </fileset> <scriptfile>install.php</scriptfile> </extension>
install.php
<?php defined( '_JEXEC' ) or die; /** * @package cmse_proto_option theme * @copyright Copyright (C) CmsEnergizer.com All rights reserved. * @license GNU General Public License version 2 or later; see http://www.gnu.org/licenses/ **/ class SpecialInstallerScript { public function preflight($action) { if( in_array($action, ['install','update'] ) ) { // check for installation of cmse_proto_options plugin. // Scrap installation of this theme if the plugin is not installed if( !JFolder::exists(JPATH_ROOT.'/templates/protostar/custom') ) { JFactory::getApplication()->enqueueMessage(JText::_('This theme requires CMSE Proto Options plugin. It is free <a href="http://cmsenergizer.com/extension-directory/joomla-protostar-template-custom-styling-plugin" target="_blank">Get it now</a>'), 'warning'); return false; } } } public function postflight() { // name of parent folder $parentname = basename(dirname(__FILE__)); $themename = simplexml_load_file(JUri::root().'administrator/manifests/files/'.$parentname.'.xml'); $themesrc = __DIR__.'/'.$parentname; $templatesrc = __DIR__.'/'.$parentname.'.php'; $paramsrc = __DIR__.'/params/'; $themedest = JPATH_ROOT.'/templates/protostar/custom/themes/'.$parentname; $templatedest = JPATH_ROOT.'/templates/protostar/custom/templates/'.$parentname.'.php'; $paramdest = JPATH_ROOT.'/templates/protostar/custom/params/'; if( JFolder::exists($themesrc) ) JFolder::move($themesrc, $themedest); if( JFile::exists($templatesrc) ) JFile::move($templatesrc, $templatedest); if( JFile::exists($paramsrc.$parentname.'.xml') JFile::move($paramsrc.$parentname.'.xml', $paramdest.$parentname.'.xml'); if( JFile::exists($paramsrc.$parentname.'.php') JFile::move($paramsrc.$parentname.'.php', $paramdest.$parentname.'.php'); JFactory::getApplication()->enqueueMessage( JText::_('Successfully installed Protostar custom theme named - <strong>'.ucfirst($themename->name).'</strong>') ); } public function uninstall() { $parentname = basename(dirname(__FILE__)); $themename = simplexml_load_file(JUri::root().'administrator/manifests/files/'.$parentname.'.xml'); $themesrc = JPATH_ROOT.'/templates/protostar/custom/themes/'.$parentname; $templatesrc = JPATH_ROOT.'/templates/protostar/custom/templates/'.$parentname.'.php'; $paramsrc = JPATH_ROOT.'/templates/protostar/custom/params/'; if( JFolder::exists($themesrc) ) JFolder::delete($themesrc, true); if( JFile::exists($templatesrc) ) JFile::delete($templatesrc, true); if( JFile::exists($paramsrc.$parentname.'.xml') ) JFile::delete($paramsrc.$parentname.'.xml', true); if( JFile::exists($paramsrc.$parentname.'.php') ) JFile::delete($paramsrc.$parentname.'.php', true); JFactory::getApplication()->enqueueMessage( JText::_('Successfully uninstalled Protostar custom theme named - <strong>'.ucfirst($themename->name).'</strong>') ); } }
cmse_sunnyday.php (optional)
The purpose of this file is solely to rearrange the module positions or add more. It is not a required file.
This coding is from the included template enhanced.php
<?php defined('_JEXEC') or die; /** * @package plg_system_cmse_proto_options * @copyright Copyright (C) CmsEnergizer.com All rights reserved. * @license GNU General Public License version 2 or later; see http://www.gnu.org/licenses/ **/ ?> <!DOCTYPE html> <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> <head> <jdoc:include type="head" /> </head> <body class="site <?php echo $bodyclass; ?>"> <!-- Body --> <div class="body" id="top"> <div class="container"> <!-- Header --> <header class="header" role="banner"> <div class="header-inner clearfix"> <?php echo $showlogo; ?> <jdoc:include type="modules" name="position-0" style="raw" /> </div> </header> <?php echo $widetitle; ?> <?php if( $this->countModules('position-1') ) { ?> <jdoc:include type="modules" name="position-1" style="raw" /> <?php } ?> <jdoc:include type="modules" name="banner" style="cmsexhtml" /> <div class="content-body row-fluid"> <?php if ($pos8) : ?> <!-- Begin Sidebar --> <div id="sidebar" class="span<?php echo $lcol; ?>"> <div class="sidebar-nav"> <jdoc:include type="modules" name="position-8" style="cmsexhtml" /> </div> </div> <!-- End Sidebar --> <?php endif; ?> <main id="content" role="main" class="span<?php echo $span; ?>"> <!-- Begin Content --> <jdoc:include type="modules" name="position-3" style="cmsexhtml" /> <jdoc:include type="message" /> <jdoc:include type="component" /> <div class="clearfix"></div> <jdoc:include type="modules" name="position-2" style="cmsexhtml" /> <!-- End Content --> </main> <?php if ($pos7) : ?> <div id="aside" class="span<?php echo $rcol; ?>"> <!-- Begin Right Sidebar --> <jdoc:include type="modules" name="position-7" style="cmsexhtml" /> <!-- End Right Sidebar --> </div> <?php endif; ?> </div> </div> </div> <!-- Footer --> <footer class="footer" role="contentinfo"> <div class="foot-inner container"> <jdoc:include type="modules" name="footer" style="cmsexhtml" /> </div> </footer> <jdoc:include type="modules" name="debug" style="none" /> </body> </html>
cmse_sunnyday sub-folder
Place css files, images and other dependent assets in the sub-folder cmse_sunnyday. The css file(s) can be named anything since they are confined to the folder and will include the folder name in the path.
Folder Structure