Joomla Protostar Template Custom Styling Plugin

Framework	Joomla 3x
Extension Type	Plugin
Version	1.0.31
Price	Free
Provider	WebsiteDons.com
License	GPL
CMSE Rating
View Demo	http://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

Other Excellent Joomla Extensions

Custom fields and layout formatting shortcodes for Joomla 3

Latest Article Post Module For Joomla Content

Audio Player Plus - Show Current Host On Air

Joomla Article File Downloader

K2 Content Module Revised

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

Joomla Styled Theme Joomla Styled Theme

LSU Color Theme LSU Color Theme

Minty Style Minty Style

View the embedded image gallery online at:
https://cmsenergizer.com/extension-directory/joomla-protostar-template-custom-styling-plugin#sigProId8ffcdf0c3e

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.

Folder Structure

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

My comments Subscribe

Navigation

CMS Exploits Checklist

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

Joomla Protostar Template Custom Styling Plugin

Other Excellent Joomla Extensions

Make the most of Joomla's core Protostar template. Style and never worry about overwriting on updates!

Features

Included Themes

Joomla Styled Theme Joomla Styled Theme LSU Color Theme LSU Color Theme Minty Style Minty Style View the embedded image gallery online at: https://cmsenergizer.com/extension-directory/joomla-protostar-template-custom-styling-plugin#sigProId8ffcdf0c3e

Installation

Install and enable the plugin

Setup

Custom template selection

Custom theme selection

Simple styling

Inline CSS

Inline Javascript

Script files

Output pill navigation

Set the top navigation bar to stick (fix) to the top of the browser window when scrolled

Add multiple sticky (fixed) values to use for different positions

Module Title Styling

The result

Individual Module Styling

The result

Form Field Coding

cmse_sunnyday.xml

install.php

cmse_sunnyday.php (optional)

cmse_sunnyday sub-folder

Folder Structure

Change Log

Subscribe

My comments

Navigation

CMS Exploits Checklist

Joomla Styled Theme Joomla Styled Theme

LSU Color Theme LSU Color Theme

Minty Style Minty Style

View the embedded image gallery online at:
https://cmsenergizer.com/extension-directory/joomla-protostar-template-custom-styling-plugin#sigProId8ffcdf0c3e