Joomla Protostar Template Custom Styling Plugin

Joomla Protostar Template Custom Styling Plugin
FrameworkJoomla 3x
Extension TypePlugin
Version1.0.31
PriceFree
ProviderWebsiteDons.com
LicenseGPL
CMSE Rating
View Demohttp://protostar.websitedons.net/
cmse_proto_options.zip (43.78K)file hash value: 5c8457bd7f4751691d0e7f053d1fed81
Download (38905 downloads)
THEME-DEVELOPER-KIT.zip (5.57K)file hash value: e165689b4844e474ad111e9d7a97aeda
Download (97 downloads)
Category: CMS Extensions Directory

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

 

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

cmse-proto-options-plugin-manage.jpg

 

Set the global favicon that will serve all duplicate instances of the template

cmse-proto-options-global-favicon.jpg

Setup

Setup

cmse-proto-options-theme-cols-params.jpg

cmse-proto-options-layout-width-params.jpg

cmse-proto-options-parameters.jpg

cmse-proto-options-font-settings-params.jpg

 

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.

cmse-proto-options-config-template-select.jpg

 

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.

cmse-proto-options-config-theme-select.jpg

 

Simple styling

Add simple styling without creating any files

cmse-proto-options-config2.jpg

 

Inline CSS

Add inline CSS for any simple style adjustment, without the need to add any file.

cmse-proto-options-config-inline-css.jpg

 

Inline Javascript

Add inline javascript for simple functions

cmse-proto-options-config-inline-js.jpg

 

Script files

Add script files from any location including external sources such as Bootsrap, Fontawesome, Facebook, Twitter etc

cmse-proto-options-config-script-files.jpg

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

cmse-proto-options-nav-pills-setup.jpg

 

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

 

cmse-proto-options-module-adv-title.jpg

 

The result

cmse-proto-options-module-title-styling-result.jpg

 

Individual Module Styling

Each module can be styled to standout

cmse-proto-options-module-styling-params.jpg

The result

cmse-proto-options-module-styling-result.jpg

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.

 

  1. Create the parent directory with a unique name eg: cmse_sunnyday
  2. Create the XML manifest and give it the same unique name as cmse_sunnyday.xml
  3. Create the theme folder for the .css file(s) and other dependent assets and give it the same unique name as cmse_sunnyday
  4. If a display template is to included, give it the same unique name as cmse_sunnyday.php and place in the parent folder.
  5. 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.
  6. 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

cmse-proto-options-theme-installer-file-structure.png

Change Log

10 27 '18 - v 1.0.31

  • Corrected undefined variable notice for default.php template
  • Corrected undefined variable notice for $alt and $image_alt in vars.php

 

10 18 '18 - v 1.0.29

  • Various language constants added
  • Conditional statement to load alternate field path if CMSE Library is installed. This library will include additional features for enhanced display advantages.

 

10 17 '18 - v 1.0.28

  • Added flex box row ordering for the main content area columns. The left column can now be positioned at default left or middle.

 

10 16 '18 - v 1.0.27

  • Fixed javascript error in template manager where tabs would not display due to missing function.
  • Added Curl function to get remote XML feed for servers allow_url_fopen disabled.
  • Miscellaneous CSS corrections
  • Corrected relative URL for themes when Joomla is located in folders 2 or more folders deep

 

10 14 '18 - v 1.0.26

  • Updated jQuery Sticky plugin

 

10 14 '18 - v 1.0.25

  • Correction in template file wideformat.php: removed div element displaying sample text.

 

10 13 '18 - v 1.0.24

  • Language constants additions
  • Minor correction to template file default.php
  • Minor change to template files enhanced.php and wideformat.php

 

10 12 '18 - v 1.0.23

  • Added section headings for visual separation
  • Added language constants
  • Added various styling changes in admin

 

10 12 '18 - v 1.0.22

  • Added module styling parameters to allow individual formatting

 

10 12 '18 - v 1.0.21

  • Added left and right column width parameter
  • Added parameter to link menu item to module title
Post Message
Copyright © 2018 CMSEnergizer.com. All Rights Reserved.
This website is powered by the Joomla!©™ 3 Website Framework | File download and article manager component by CMSE Custom Fields | Advanced Module Manager and Modules Anywhere by NoNumber Elements | Website hosting and development by WebsiteDons

CMSEnergizer.com is owned and operated by Emuzement Net Inc, Tampa, Florida USA