cms_plugin_boxer

cms_plugin_slider

cms_plugin_news

Samples
API Reference
Styling and Controls
Dependences

Add boxer into page sample

Product Configurator

Integrated into eShop

Flexible discounts

Discounts on total price

Easy hierarchical structure

Works in shared hosting

Test sample

Easy Deploy Powerful eShop

Full-Text indexing and search

Powerful items filtering

Integrated secure PayPal forms

Fuzzy search even with 2 errors

Advanced items compare
Fits into low cost shared hosting

Test sample and try it!

Full-Text Indexing and Search

Pure PHP

Shared hosting

Low cost ownership

Fuzzy search

Replaces Apache Solr in shared hosting

Blog: Commercial or Open-Source CMS ?

Choosing a content management system (CMS) is a likely first step in building your organizations web site. A wide variety of commercial and open source CMS’s are available ...

SSL (Secure Sockets Layer)

SSL for all site pages

SSL for selected pages

Page with SSL, without SSL, both ways

Automatic redirect into SSL, from SSL

Page redirect with SSL, without SSL

Page aliases with SSL, without SSL

Menu, news with SSL, without SSL
SSL in the core of CMS

WebDAV Server

Professional tools:

Adobe Dreaweaver

Expressions Web

Site may be connected to MS Windows folders as network drive!

Note: you can't update data of this sample due insufficient permissions of logged demo user

Smarty template plugin docs available at {cms_plugin_boxer}

jQuery code snippet:


cms_plugin_boxer = $('#skin-box-container .skin-box').cms_plugin_boxer( { // create cms_plugin_boxer instance's on box <div> tag 
	id: skin_lang, // boxer id = language code
	lang: skin_lang, // boxer language code
	cms_path: skin_cms_path // cms folder relative path
} );

HTML code snippet:



<fieldset class="cms-form-fieldset">
	<legend class="cms-form-legend">{t}Add boxer into page sample{/t}</legend>			
	{cms_plugin_boxer var="boxer" id="$lang_code"}	 
	<div class="skin-box-container" id="skin-box-container">
		{if count($boxer)==0}
			<div class="skin-box skin-box-empty"><p>{t}Empty{/t}</p></div>	
		{else}
			<table cellpadding="0" cellspacing="0" border="0">
				{for $i=1 to count($boxer)}	  
					{$url = $boxer[$i-1]->url} 
					{if substr($url,0,1)=="/"} {$url = ""|cat: "http://"|cat: $site_url|cat: $url}
					{/if}  
				    <tr>
					    <td>
						    <div class="skin-box" id="{$boxer[$i-1]->id}">
								<div class="skin-box-title"><h2><a href="{$url}">{$boxer[$i-1]->title}</a></h2></div>
								{if strlen($boxer[$i-1]->image)>0}
									<div class="skin-box-left">
										<div class="skin-box-description"><h4>{$boxer[$i-1]->description}</h4></div>
									</div>
									<div class="skin-box-right">
										<div class="skin-box-image" style="background-image: url('{$boxer[$i-1]->image}')"></div>
									</div>
								{else}
									<div class="skin-box-left skin-box-left-full">
										<div class="skin-box-description"><h4>{$boxer[$i-1]->description}</h4></div>
									</div>
								{/if}
								<div class="skin-box-more"><a href="{$url}"></a></div>
							</div> 
						</td>
					</tr>  
				{/for}
			</table>
		{/if}
	</div>			
</fieldset>

CSS code snippet:



.skin-box-container {
	margin: $box-container-margin-top auto;
	max-width: $box-container-width;
	position: relative;
	display: block;
	clear: both;
	table {
		position: relative;	
		margin: 0px auto;
		@media only screen and (max-width : $box-width - 1) {
			max-width: 320px
		}
		@media only screen and (min-width : $box-width) and (max-width : $box-width * 2 + $box-margin * 2 - 1) {
			max-width: $box-width
		}
		@media only screen and (min-width : $box-width * 2 + $box-margin * 2) and (max-width : $box-width * 3 + $box-margin * 3 - 1) {
			width: $box-width * 2 + $box-margin * 2
		}
		@media only screen and (min-width : $box-width * 3 + $box-margin * 3) {
			width: $box-width * 3 + $box-margin * 3;
		}
		tr {
			position: relative;
			display: inline;
			float: left!important;
			@media only screen and (max-width : $box-width * 2 + $box-margin * 2 - 1) { width: 100% }
			@media only screen and (min-width : $box-width * 2 + $box-margin * 2) and (max-width : $box-width * 3 + $box-margin * 3 - 1) { width: percentage (1 / 2) }
			@media only screen and (min-width : $box-width * 3 + $box-margin * 3) { width: percentage (1 / 3) }
			td {
				position: relative;
				display: block;
				width: 100%;
				@media only screen and (min-width : $box-width * 2 + $box-margin) {
					padding-left: $box-margin / 2; padding-right: $box-margin / 2;
				}
				padding-top: $box-margin;
				
				.skin-box-empty {
					position: relative; display: none; min-width: $box-empty-width; height: $box-empty-height; border: 1px $box-empty-border-color dashed; float: none; margin: $box-empty-margin-top auto;  background: transparent;
					p {font-size: $box-empty-font-size; font-style: $box-empty-font-style; margin-top: $box-empty-margin-top; margin-left: $box-empty-margin-left; color: $box-empty-color}
				}
				.skin-box {
					position: relative; 
					height: $box-height;
					margin: 0px auto;
					@media only screen and (max-width : $box-width - 1) { 
						width: $box-width-iphone;
						background-image: $box-background-image-iphone;
					}
					@media only screen and (min-width : $box-width) { 
						width: $box-width;
						background-image: $box-background-image;
					}
					background-repeat: no-repeat;
					background-position: center center;
					background-size: cover;	
					.skin-box-title {
						height: percentage($box-title-height / $box-height); 
						position: relative; display: block;
						clear: both;
						h2 {
							font-size: $box-title-font-size; 
							font-weight: $box-title-font-weight;
							line-height: percentage($box-title-height / $box-title-font-size); 
							text-align:center; white-space:nowrap; display: block; 
							max-width: $box-title-width; overflow: hidden; margin: 0px auto
						}
						a { 
							text-decoration: none; color: white;
							&:link { text-decoration: none; color: white}
							&:visited { text-decoration: none; color: white}
							&:active { text-decoration: none; color: white}
							&:hover { text-decoration: none; color: white}
						}
					}
						
					.skin-box-left {
						top: percentage($box-left-top / $box-height);
						position: relative;
						display: block;
						@media only screen and (max-width : $box-width - 1) { 
							left: percentage($box-left-left / $box-width-iphone);
							width: percentage($box-left-width-iphone / $box-width-iphone);
						};
						@media only screen and (min-width : $box-width) { 
							left: percentage($box-left-left / $box-width);
							width: percentage($box-left-width / $box-width);
						};
						height: percentage($box-left-height / $box-height);
						float: left;					
						.skin-box-description {
							height: percentage($box-description-height / $box-height);
							position: relative;
							display: block; 
							padding: percentage(5px / $box-height);
							padding-top: percentage($box-description-top / $box-height);
							padding-left: percentage($box-description-left / $box-width);
							overflow: hidden;
							h4 {
								margin: 0px;
								font-size: $box-description-font-size; font-weight: $box-description-font-weight; 
								line-height: percentage($box-description-line-height / $box-description-font-size);
								color: $box-description-color;
								text-align: left;
								ul {
									text-indent: initial;
									list-style-image: url('/skin/images/bullet.png');
									margin-top: percentage(3px / $box-height);
									margin-bottom: percentage(3px / $box-height);
									padding-left: percentage(26px / $box-height);
								}
								p {
									margin: 0px;
								}
								a { 
									text-decoration: underline; color: #09c; font-style: italic;
									&:link { text-decoration: underline; color: #09c; font-style: italic}
									&:visited { text-decoration: underline; color: #09c; font-style: italic}
									&:active { text-decoration: underline; color: #09c; font-style: italic}
									&:hover { text-decoration: underline; color: #09c; font-style: italic}
								}
							}
						}
					}
					.skin-box-left-full {
						@media only screen and (max-width : $box-width - 1) { width: percentage(($box-width-iphone - 5px - $box-left-left) / $box-width-iphone) };
						@media only screen and (min-width : $box-width) { width: percentage(($box-width - 5px - $box-left-left) / $box-width) };
					}
					.skin-box-right {
						top: percentage($box-right-top / $box-height);
						position: absolute;
						display: block;
						@media only screen and (max-width : $box-width - 1) { 
							right: percentage($box-right-right / $box-width-iphone);
							width: percentage($box-right-width-iphone / $box-width-iphone);
						};
						@media only screen and (min-width : $box-width) { 
							right: percentage($box-right-right / $box-width);
							width: percentage($box-right-width / $box-width);
						};
						height: percentage($box-right-height / $box-height);
						.skin-box-image {
							position: relative;
							display: block;
							background-repeat: no-repeat;
							background-position: center center;
							background-size: cover; //percentage($box-image-width / $box-right-width);
							top: percentage($box-image-top / $box-right-height);
							@media only screen and (max-width : $box-width - 1) { width: percentage($box-image-width / $box-right-width-iphone) };
							@media only screen and (min-width : $box-width) { width: percentage($box-image-width / $box-right-width) };
							height: percentage($box-image-height / $box-height);
							-moz-border-radius: 10px;
							-webkit-border-radius: 10px;
							border-radius: 10px;
						}
					}
					.skin-box-more { 
						display: block; position: absolute;
						bottom: percentage($box-more-bottom / $box-height);
						@media only screen and (max-width : $box-width - 1) { 
							right: percentage($box-more-right / $box-right-width-iphone );
							width: percentage($box-more-width / $box-width-iphone );
						};
						@media only screen and (min-width : $box-width) { 
							right: percentage($box-more-right / $box-right-width );
							width: percentage($box-more-width / $box-width );
						};
						height: percentage($box-more-height / $box-height);
						a {
							display: block;
							width: 100%; 
							height: 100%;
						}
					}
				}
			}
		}
	}
}

.cms_plugin_boxer()

Option	Method	Callback
class_control, admin
id, lang, cms_path, cms

.cms_plugin_boxer( settings )

Description: Plugin will add boxer control to specified element and allow to manage and show highlight boxes on the page.

.cms_plugin_boxer( settings )

- settings
- Type: PlainObject
- A set of key/value pairs that configure cms_plugin_boxer() plugin.
  - - class_control (default: 'cms-plugin-control')
    - Type: String
    - Plugin tools marker selection class
  - - admin (default: ['admin'])
    - Type: Array
    - Array of user groups (roles) can use this plugin control
  - - id (default: 'eng')
    - Type: String
    - Plugin data file id
  - - lang (default: 'eng')
    - Type: String
    - Plugin language code
  - - cms_path (default: '/cms/srv')
    - Type: String
    - Relative path to CMS software
  - - cms (default: true)
    - Type: Boolean
    - Use plugin with cms

cms_plugin_boxer plugin plugin styling and control (plugin implementation in sample):

sample-box-container - box showing container
sample-box - box
sample-box-empty - empty box
sample-box-empty p - empty box paragraph
sample-box-title - box title
sample-box-title h2 - box title header h2
sample-box-title a - box title anchor
sample-box-title a:link - box title anchor :link
sample-box-title a:visited - box title anchor :visited
sample-box-title a:active - box title anchor :active
sample-box-title a:hover - box title anchor :hover
sample-box-left - box left area
sample-box-right - box right area
sample-box-right table - box right area table
sample-box-right td - box right area table cell
sample-box-description - box description
sample-box-description h4 - box description header h4
sample-box-description a - box description anchor
sample-box-description a:link - box description anchor :link
sample-box-description a:visited - box description anchor :visited
sample-box-description a:active - box description anchor :active
sample-box-description a:hover - box description anchor :hover
sample-box-image - box image
sample-box-more - box more button
sample-box-more a - mox more button anchor
sample-plugin-control - box control

Plugin cms_plugin_boxer depends on following jQuery packages:

User ID:
User Password: