Note: you can't update data of this sample due insufficient permissions of logged demo user
Smarty template plugin docs available at {cms_plugin_news}
Smarty template plugin for RSS docs available at {cms_plugin_news_rss}
jQuery code snippet:
cms_plugin_news = $('.skin-news-box').cms_plugin_news( { // create cms_plugin_news instance's on news <div> tag
id: skin_lang, // slider id = menu language code (3-letter)
cms_path: skin_cms_path // cms folder relative path
});
HTML code snippet:
<fieldset class="cms-form-fieldset">
<legend class="cms-form-legend">{t}Add news into page sample{/t}</legend>
{nocache}
{strip}
{cms_plugin_news var="item" id="eng" topic="" break="brk" item_id=""}
{if count($item)==0}
<div class="skin-news-box skin-news-box-empty"><p>{t}Empty{/t}</p></div>
{/if}
{for $i=1 to count($item)}
<a name="{$item[$i-1]->bookmark}"></a>
<div class="skin-news-box" id="{$item[$i-1]->id}">
<div class="skin-news-box-left">
<div class="skin-news-box-title"><h2><a href="{$item[$i-1]->url}" target="_blank">{$item[$i-1]->title}</a></h2></div>
<div class="skin-news-box-date">
<table>
<tr>
<td class="skin-news-box-date-text">{$item[$i-1]->date}</td>
{if count($parms)==0}<td class="skin-news-box-rss"><a href="http://{$site_url}{$url}/rss" target="_blank"></a></td>{/if}
{for $j=1 to count($item[$i-1]->topic)}
{if $item[$i-1]->topic[$j-1]=="brk" || $item[$i-1]->topic[$j-1]=="act"}
<td class="skin-news-box-{$item[$i-1]->topic[$j-1]}"><div>{if $item[$i-1]->topic[$j-1]=="brk"}{t}Breaking{/t}{else}{t}New{/t}{/if}</div></td>
{/if}
{/for}
</tr>
</table>
</div>
<div class="skin-news-box-description">{$item[$i-1]->description}</div>
<div class="skin-news-box-more cms-plugin-news-more-open-control"><a href="">{t}Read more{/t} ...</a></div>
<div class="skin-news-box-content cms-plugin-news-more-content">{$item[$i-1]->content}</div>
<div class="skin-news-box-close cms-plugin-news-more-close-control"><a href=""></a></div>
</div >
<div class="skin-news-box-right">
<div class="skin-news-box-image-wrapper">
<div class="skin-news-box-image" style="background-image: url('{$item[$i-1]->image}')"></div>
</div>
</div >
</div>
{/for}
{/strip}
{/nocache}
</fieldset>
CSS code snippet:
.skin-news {
padding-top: $news-top;
position: relative; margin: 0px auto; display: block; max-width: $skin-content-width;
}
.skin-news-box {
width: 100%;
min-height: $news-box-height;
height:100%;
position: relative;
overflow: hidden;
margin: $news-box-margin-top auto;
display: block;
border: $news-box-border;
clear: both;
background: $news-box-background;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.skin-news-box-empty {
border: 1px $news-box-empty-border-color dashed; display: none;
p {font-size: $news-box-empty-font-size; font-style: $news-box-empty-font-style; margin-top: $news-box-empty-margin-top; margin-left: $news-box-empty-margin-left; color: $news-box-empty-color }
}
.skin-news-box-left {
top: 0px;
position: relative;
display: block;
width: percentage(($news-box-left-width - 15) / $skin-content-width);
float: left;
padding: 3px 5px 3px 5px;
}
.skin-news-box-right {
top: 0px;
right: 0px;
position: absolute;
display: block;
width: percentage($news-box-right-width / $skin-content-width);
height: $news-box-right-height;
padding: 3px 5px 3px 5px;
}
.skin-news-box-title h2 {
font-size: $news-box-title-font-size; margin-top: $news-box-title-margin-top; margin-bottom: 0px; color: $news-box-title-color;
a {
color: $news-box-title-color; text-decoration: none;
&:link {color: $news-box-title-color; text-decoration: none}
&:visited {color: $news-box-title-color; text-decoration: none}
&:active {color: $news-box-title-color; text-decoration: none}
&:hover {color: $news-box-title-color; text-decoration: underline}
}
}
.skin-news-box-date {
font-size: $news-box-date-font-size; margin-top: $news-box-date-margin-top; margin-bottom: 0px; margin-left: $news-box-date-margin-left;
table {border-collapse: collapse}
}
.skin-news-box-date-text {color: $news-box-date-color; padding-right: 8px}
.skin-news-box-description {font-size: $news-box-text-font-size; color: $skin-box-text-color; line-height: $news-box-title-font-size; text-align: justify; margin-top: $news-box-text-margin-top; margin-bottom: 0px;}
.skin-news-box-more {
display: block; margin-top: $news-box-more-margin-top; margin-left: $news-box-more-margin-left; height: $news-box-more-height; background: $news-box-more-background;
a {
display: block; color: $news-box-more-color; font-size: $news-box-more-font-size; line-height: $news-box-more-height; font-weight: $news-box-more-font-weight; padding-left: $news-box-more-height + 5 + $news-box-more-margin-left;
&:link {color: $news-box-more-color}
&:visited {color: $news-box-more-color}
&:active {color: $news-box-more-color}
&:hover {color: $news-box-more-color}
}
}
.skin-news-box-content {font-size: $news-box-text-font-size; color: $skin-box-text-color; line-height: $news-box-title-font-size; text-align: justify; margin-top: 0px; margin-bottom: 0px}
.skin-news-box-close {
height: $news-box-more-height; margin-top: $news-box-more-margin-top; margin-left: $news-box-more-margin-left; background: $news-box-more-close-background;
a {display: block; width: $news-box-more-height; height: $news-box-more-height}
}
.skin-news-box-image-wrapper {
position:relative;
width: 100%;
padding-bottom: percentage($news-box-right-height / $news-box-right-width);
height:0;
overflow:hidden;
}
.skin-news-box-image {
position: absolute;
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.cms-plugin-news-more-open-control {display: block}
.cms-plugin-news-more-close-control {display: none}
.cms-plugin-news-more-content {display: none}
.skin-news-box-rss {background: $news-box-date-rss-background; padding-right: $news-box-date-topic-padding}
.skin-news-box-rss a {display: block; width: $news-box-date-topic-height; height: $news-box-date-topic-height}
.skin-news-box-brk {padding-left: 0px}
.skin-news-box-act {padding-left: 0px}
.skin-news-box-brk div {height: $news-box-date-topic-height; line-height: $news-box-date-topic-height; width: auto; display: block; color: $news-box-date-topic-color; background: $news-box-date-topic-background; padding-left: $news-box-date-topic-padding; padding-right: $news-box-date-topic-padding; margin-left: 0px}
.skin-news-box-act div {height: $news-box-date-topic-height; line-height: $news-box-date-topic-height; width: auto; display: block; color: $news-box-date-topic-color; background: $news-box-date-topic-background; padding-left: $news-box-date-topic-padding; padding-right: $news-box-date-topic-padding; margin-left: 0px}
.cms_plugin_news()
Option | Method | Callback |
---|---|---|
class_control, class_more_open_control, class_more_close_control | ||
class_more_content, admin | ||
id, cms_path, cms |
.cms_plugin_news( settings )
|
|||||||
|
cms_plugin_news plugin plugin styling and control (plugin implementation in sample):
Plugin cms_plugin_news depends on following jQuery packages: