Joomla Protostar Template Custom Styling Plugin

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}

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.

Joomla Icons | FontAwesome

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.