Ciko

A different article styles By Pages ( IP.Content )

3 сообщения в этой теме

A different article styles By Pages ( IP.Content )


Это не пользовательский плагин или приложение, это настраиваемые шаблоны базы данных и блоки, созданные cтраниц приложения.

Красивый дизайн, чтобы показать статьи в одну колонку, две колонки, три колонки, две колонки первым признакам, три столбца первым признакам, конструкции вы можете назначить стили для главной страницы или как блок в любом месте вы хотите, чистый закодированы и шаблоны полностью отзывчивый, он может работать в любом месте вы хотите.

Особенности:

  • Отзывчивый и пиксель-совершенный дизайн.
  • Работает на главной странице базы данных и/или блоков в любом месте.
  • Автоматического сопоставления цветов на любую тему вашего сайта, используя, чистый закодированы и очень легко настроить при необходимости.
  • Требуется никаких ручных установок. Все, что вам нужно сделать, это загрузить .файл XML, а затем выбрав стили при создании блока или редактирование базы данных страницах. 
  • Поставляется с подарком ^_^ лента новостей блок отличается от других стилей, идеальный для демонстрации изделий в качестве мини-блок .
  • Нет срок продления на этот файл. Все, что я прошу-это быстрый обзор, если вам нравится

  • Автор
  • Добавлен
    22.10.2016
  • Категория
  • Локализатор
    TAMAN
  • Язык
    RUS
  • Разработчик
    TAMAN

 

1 пользователю понравилось это

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Как установить

Скачать даний хук

Перейти Админ Панель-Страницы-Страницы-Шаблоны-Загрузить шаблоны

Screenshot_1.png

Загружаем шаблон pages_templates.xml

У вас должно бить установлено страница Новостей как установить прочтите здесь

Перейти Админ Панель-Страницы-Содержимое-Базы данных и изменить новости

Screenshot_1.png

Горните немного ниже и вас должно бить название страницы (Настройки главной страницы)

Screenshot_1.png

Здесь вы можите вибрать как ви хотите чтоб новости отображались

Screenshot_1.png

А тепер нам нужно перейти в Админ Панель-Внешний вид-Шаблоны-Ваш стиль-CSS-costom.css и добавить код в самий ныз:

/*=========================================================================*/
/*== Magnum Articles [ Image Featured News Feed Block ]  ArticlesBlockS1 ==*/
/*=========================================================================*/
/*Article Image border color hovers*/
.ArticlesBlockS1 .article-item-first:hover .record-image-first,
.ArticlesBlockS1 .article-item .record-content:hover .record-image{
	border: 1px solid {theme="link_hover"};
}
/*date*/
.ArticlesBlockS1 .record-content > span,
.ArticlesBlockS1 .record-title span,
.ArticlesBlockS1 .record-content span > *,
.ArticlesBlockS1 .record-title span > * {
    color: {theme="text_light"};
  	font-size: 12px;
}
.ArticlesBlockS1 .article-item .record-content,
.ArticlesBlockS1 .articles{
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ArticlesBlockS1 .articles .article-item {
    float: right;
}
.ArticlesBlockS1 .article-item-first {
  	float: left;
    width: 45%;
}
.ArticlesBlockS1 .article-item {
    width: 55%;
    margin: 0 0 15px 0;
    padding: 0 10px;
}
.ArticlesBlockS1 .record-image-first {
    position: relative;
}
.ArticlesBlockS1 .record-image {
    position: relative;
    display: table-cell;
    overflow: hidden;
    width: 115px;
    height: 90px;
}
.ArticlesBlockS1 .record-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.ArticlesBlockS1 .record-title {
    padding: 5px 0 5px 10px;
	vertical-align: middle;
	display: table-cell;
}
.ArticlesBlockS1 .record-title h2 {
    margin: 0;
}
.ArticlesBlockS1 .no-images {
    font-size: 16px;
    padding: 100px 0 90px;
    text-align: center;
}
#ipsLayout_sidebar .ArticlesBlockS1 .articles > li{
	float: none;
}
#ipsLayout_sidebar .ArticlesBlockS1 .article-item{
	width: 100%;
 	margin: 5px 0;
	border-bottom: solid 2px rgba(0,0,0,0.05);
	padding: 0 0 5px;
}
#ipsLayout_sidebar .ArticlesBlockS1 .record-title {
    padding: 5px;
}
#ipsLayout_sidebar .ArticlesBlockS1 .articles{
	display: block;
}
#ipsLayout_sidebar .ArticlesBlockS1 .record-title {
	margin: 0;
}

/*=========================================================================*/
/*	Magnum Articles [ Image Featured 2 & 3 1x2 & 1x3 Columns ]  ArticleS1  */
/*=========================================================================*/
/*eye icon color, used if article is hided. auto matches to title color*/
.ArticleS1 .record-title .ipsBadge{
  	background: transparent;
  	color: inherit;
}
.ArticleS1 .record-image{
	position: relative;
}
.ArticleS1 .record-title{
	text-align: center;
}
.ArticleS1 .ipsGrid_span6 .badges,
.ArticleS1 .ipsGrid_span4 .badges,
.ArticleS1 .ipsGrid_span6 .reviews,
.ArticleS1 .ipsGrid_span4 .reviews{
    padding: 3px 9px !important;
}
.ArticleS1 .ipsGrid_span6 .reviews,
.ArticleS1 .ipsGrid_span4 .reviews,
#ipsLayout_sidebar .ArticleS1 .reviews{
    right: 5px !important;
}
.ArticleS1 .record-content .ipsTags{
	float: right;
}
.ArticleS1 .record-content .ipsList_inline {
	margin: 0px 0px 5px;
}
.ArticleS1 .record-content section,
.ArticleS1 .ipsDataItem_meta{
	margin: 5px 0;
}
/*============================================================*/
/*	Magnum Articles [ Record style ]  ArticleRS1  */
/*============================================================*/
/*Record title bottom border*/
.ArticleRS1 .record-title .ipsContained{position: relative;}
.ArticleRS1 .record-title .ipsContained:before{
	background-color: {theme="important_button"};
}
.ArticleRS1{
	position: relative;
}
.ArticleRS1 .record-image{
  	position: relative;
	width: 100%;
}
.ArticleRS1 .record-info{
	display: table;
	width: 100%;
	padding: 10px 0;
	list-style: none;
}
.ArticleRS1 .record-info li{
	display: inline-block;
	font-size: 11px;
	padding: 0 10px;
	text-transform: uppercase;
}
.ArticleRS1 .record-info > li:first-child{
	padding-left: 0;
}
.ArticleRS1 .record-info i{
	font-size: 13px;
	margin: 0 5px 0 0;
}

.ArticleRS1 .record-title .ipsContained{position: relative;}
.ArticleRS1 .record-title .ipsContained:before{
	content: '';
	position: absolute;
	top: 100%;
	left: 3px;
  	margin: 5px 0;
	width: 80px;
	height: 2px;
}
.ArticleRS1 .msharelinks,
.ArticleRS1 .record-title,
.ArticleRS1 .record-fields-top,
.ArticleRS1 .record-title .ipsType_pageTitle,
.ArticleRS1 .record-info{
	margin: 15px 0;
}
/*================================================================*/
/*==========================Global Styles=========================*/
/*================================================================*/
/* COLOR */
/*Title hover colors*/
.ArticlesBlockS1 .article-item-first:hover h2 a,
.ArticlesBlockS1 .article-item .record-content:hover h2 a,
.ArticleS1 article:hover .record-content .record-title{
	color: {theme="link_hover"};
}
/*Badges Background + display record reviews background*/
.ArticlesBlockS1 .badges,
.ArticleS1 .badges,
.ArticleRS1 .reviews{
	background: {theme="widget_title_bar"};
}
/*Badges font color*/
.ArticlesBlockS1 .badges,
.ArticleS1 .badges{
    color: #fff;
}
/*Badges The little border color*/
.ArticlesBlockS1 .badges:after,
.ArticleS1 .badges:after{
	border-top: 10px solid {hextorgb="widget_title_bar" opacity="0.84"};
}
/*Badges The little border color on sidebars*/
#ipsLayout_sidebar .ArticlesBlockS1 .badges:after,
#ipsLayout_sidebar .ArticleS1 .badges:after,
.ArticleRS1 .reviews:after{
	border-left: 6px solid {hextorgb="widget_title_bar" opacity="0.84"};
}
/*reviews and rating background*/
.ArticlesBlockS1 .reviews,
.ArticleS1 .reviews{
	background: rgba(62, 71, 91, 0.67);
}
/*Sharer icons background*/
.ArticleS1 .record-image .Msharelinks,
.ArticlesBlockS1 .record-image-first .Msharelinks{
	background: -webkit-linear-gradient(left,rgba(65,84,123,0),rgba(65,84,123,.6) 13%,rgba(65,84,123,.8) 50%,rgba(65,84,123,.6) 85%,rgba(65,84,123,0));
	background: linear-gradient(90deg,rgba(65,84,123,0) 0,rgba(65,84,123,.6) 13%,rgba(65,84,123,.8) 50%,rgba(65,84,123,.6) 85%,rgba(65,84,123,0));
}
/*Sharer icon colors*/
.ArticleS1 .record-image .Msharelinks .cShareLink,
.ArticlesBlockS1 .record-image-first .Msharelinks .cShareLink{
	color: #fff;
}
/*Image bottom borders*/
.ArticleS1 .record-image:before,
.ArticlesBlockS1 .record-image-first:before{
  	background-color: {theme="link_hover"};
}
/*article info icons*/
.ArticlesBlockS1 .article-item-first .record-info i,
.ArticleS1 .record-info i,
.ArticleRS1 .record-info i{
  	color: {theme="important_button"};
}
/*article info border colors*/
.ArticlesBlockS1 .article-item-first .record-info li:not(:last-child),
.ArticleRS1 .record-info li:not(:first-child):not(:last-child),
.ArticleS1 .record-info li:not(:last-child){
	border-right: 1px solid #e8e8e8;
}
/*box-shadow and borders*/
.ArticlesBlockS1 .article-item-first .record-image-first, 
.ArticlesBlockS1 .record-image,
.ArticleS1 .record-image,
.ArticleS1 .record-image,
.ArticleRS1 .record-image{
	border: solid 1px rgba(0, 0, 0, 0.45);
	-webkit-box-shadow: 0 0 7px 0 rgba(70, 75, 110, 0.51);
	box-shadow: 0 0 7px 0 rgba(70, 75, 110, 0.51);
}
.ArticlesBlockS1 .article-item-first .record-content,
.ArticleS1 .record-content {
	border: solid 1px rgba(70, 75, 110, 0.51);
	border-width: 0 1px 1px;
	-webkit-box-shadow: 0 0 7px 0 rgba(70, 75, 110, 0.51);
	box-shadow: 0 0 7px 0 rgba(70, 75, 110, 0.51);
}
/* END OF COLOR */

/*Base design*/
/*Badges*/
#ipsLayout_mainArea .ArticlesBlockS1 .badges,
#ipsLayout_mainArea .ArticleS1 .badges,
#ipsLayout_sidebar .ArticlesBlockS1 .badges,
#ipsLayout_sidebar .ArticleS1 .badges,
.ArticleRS1 .reviews{
    position: absolute;
	width: auto;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
  	letter-spacing: 1px;
	text-transform: uppercase;
  	-webkit-box-shadow: 6px 8px 15px -1px rgba(70, 75, 110, 0.51);
	box-shadow: 6px 8px 15px -1px rgba(70, 75, 110, 0.51);
}
#ipsLayout_mainArea .ArticlesBlockS1 .badges,
#ipsLayout_mainArea .ArticleS1 .badges {
    top: 10px;
    left: -10px;
    padding: 5px 15px;
  	border-radius: 7px 2px 2px 0;
}
#ipsLayout_mainArea .ArticlesBlockS1 .badges:after,
#ipsLayout_mainArea .ArticleS1 .badges:after {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    content: '';
    border-left: 10px solid transparent;
}
#ipsLayout_sidebar .ArticlesBlockS1 .badges,
#ipsLayout_sidebar .ArticleS1 .badges,
.ArticleRS1 .reviews{
	top: -8px;
	left: 10px;
	padding: 3px 15px;
}
#ipsLayout_sidebar .ArticlesBlockS1 .badges:after,
#ipsLayout_sidebar .ArticleS1 .badges:after,
.ArticleRS1 .reviews:after{
	content: '';
	position: absolute;
	border-top: 8px solid transparent;
	border-bottom: 0 solid transparent;
	top: 0;
	right: -6px;
}
.ArticlesBlockS1 .reviews,
.ArticleS1 .reviews{
	position: absolute;
	top: 10px;
	right: 15px;
	width: auto;
  	padding: 5px 15px;
  	border-radius: 3px;
  	-webkit-box-shadow: 6px 8px 15px -1px rgba(70, 75, 110, 0.51);
	box-shadow: 6px 8px 15px -1px rgba(70, 75, 110, 0.51);
}
.ArticlesBlockS1 .reviews .ipsRating.ipsRating_small,
.ArticleS1 .reviews .ipsRating.ipsRating_small{
	font-size: 17px;
}
#ipsLayout_sidebar .ArticlesBlockS1 .reviews,
#ipsLayout_sidebar .ArticleS1 .reviews {
	padding: 3px 10px;
}
/*customized sharrer icons */
.ArticlesBlockS1 .record-image-first .Msharelinks .cShareLink,
.ArticleS1 .record-image .Msharelinks .cShareLink{
    font-size: 19px;
  	height: 35px;
	line-height: 35px;
    background: transparent !important;
}
.ArticlesBlockS1 .record-image-first .Msharelinks .cShareLink:hover,
.ArticleS1 .record-image .Msharelinks .cShareLink:hover{
    font-size: 25px;
}
.ArticlesBlockS1 .record-image-first .Msharelinks,
.ArticleS1 .record-image .Msharelinks{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 2px 10px;
    text-align: center;
    opacity: 0;
}
/**/
.ArticlesBlockS1 .article-item-first img,
.ArticleS1 .record-image img,
.ArticleRS1 .record-image img,
#ipsLayout_sidebar .ArticlesBlockS1 .article-item-first{
    width: 100%;
}
.ArticlesBlockS1 .article-item-first:hover .record-image-first .Msharelinks,
.ArticleS1 article:hover .record-image .Msharelinks{
    bottom: 45%;
    transition: all .6s cubic-bezier(.87, -.41, .19, 1.44);
    opacity: 1;
}
/*record title and content*/
.ArticlesBlockS1 .article-item-first .record-content,
.ArticleS1 .record-content{
	text-align: center;
	padding: 6px;
}
.ArticleS1 .record-image:before,
.ArticlesBlockS1 .record-image-first:before{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 1;
}
.ArticlesBlockS1 .article-item-first .record-info,
.ArticleS1 .record-info{
	display: table;
	width: 100%;
	margin: 0;
	padding: 10px 0;
  	text-align: center;
	list-style: none;
}
.ArticlesBlockS1 .article-item-first .record-info li,
.ArticleS1 .record-info li{
	display: inline-block;
	font-size: 11px;
	padding: 0 10px;
}
.ArticlesBlockS1 .article-item-first .record-info li:first-child,
.ArticleS1 .record-info li:first-child{
	padding-left: 0;
}
.ArticlesBlockS1 .article-item-first .record-info i,
.ArticleS1 .record-info i{
	font-size: 13px;
	margin: 0 5px 0 0;
}
#ipsLayout_sidebar .ArticlesBlockS1 .article-item-first .record-info li,
#ipsLayout_sidebar .ArticleS1 .record-info li{
	padding: 0 6px;
}
.ArticlesBlockS1 .article-item-first .record-content h2,
.ArticleS1 .record-content h2{
	font-size: 20px;
  	margin: 5px 0;
}
.ArticlesBlockS1 a, .ArticleS1 a, .ArticleRS1 a,
.record-image-first, .record-image, .Msharelinks{
  	-webkit-transition: 0.1s all linear;
	-moz-transition: 0.1s all linear;
	-ms-transition: 0.1s all linear;
	-o-transition: 0.1s all linear;
	transition: 0.1s all linear;
}
/* Removng some sharer links/article info on sidebars and main area*/
.ArticleS1 .ipsGrid_span4 .Msharelinks,
.ArticleS1 .ipsGrid_span4 .comments,
.ArticleS1 .ipsGrid_span4 .views,
.ArticleS1 .ipsGrid_span4 .readmore,
.ArticleS1 .ipsGrid_span6 .readmore,
#ipsLayout_sidebar .ArticleS1 .Msharelinks,
#ipsLayout_sidebar .ArticleS1 .record-info .readmore,
#ipsLayout_sidebar .ArticleS1 .record-content .ipsDataItem_meta,
#ipsLayout_sidebar .ArticleS1 .ipsDataItem_meta,
#ipsLayout_sidebar .ArticleS1 .record-info .views,
#ipsLayout_sidebar .ArticleS1 .record-info .comments,
#ipsLayout_sidebar .ArticlesBlockS1 .article-item .record-content .record-image,
#ipsLayout_sidebar .ArticlesBlockS1 .Msharelinks,
#ipsLayout_sidebar .ArticlesBlockS1 .article-item-first .record-info .comments,
#ipsLayout_sidebar .ArticlesBlockS1 .article-item-first .record-info .views{
	display: none;
}
/* right/left/top/bottom padding and margins so it suites the messy theme designers :) */
.ArticleS1 .ipsGrid_span4,
.ArticleS1 .ipsGrid_span6,
.ArticleS1,
.ArticleS1 > article{
	margin-top: 25px;
}
.ArticlesBlockS1{
	margin: 10px 0
}
#ipsLayout_sidebar .ArticlesBlockS1,
#ipsLayout_sidebar .ArticleS1{
	padding: 0 7px;
}
#ipsLayout_mainArea .ArticlesBlockS1,
#ipsLayout_mainArea .ArticleS1{
	padding: 0 15px;
}
@media screen and (max-width: 979px) {
  #ipsLayout_mainArea .ArticlesBlockS1 .badges,
  #ipsLayout_mainArea .ArticleS1 .badges{
		top: -7px;
		left: 10px;
    	padding: 3px 15px !important;
   	 	border-radius: 0;
	}
  	#ipsLayout_mainArea .ArticlesBlockS1 .badges:after,
	#ipsLayout_mainArea .ArticleS1 .badges:after{
		content: '';
		position: absolute;
		border-top: 6px solid transparent;
		border-bottom: 0 solid transparent;
		top: 0;
  		left: initial;
		right: -5px;
  		border-left: 6px solid {hextorgb="widget_title_bar" opacity="0.84"};
	}
    .ArticlesBlockS1 .article-item {
        width: 100%;
        margin: 15px 0;
        padding: 0;
    }
    .ArticlesBlockS1 .article-item-first {
        width: 100%;
    }
    .ArticlesBlockS1 .articles > li {
        float: none; 
    }
    .ArticlesBlockS1 .record-image {
        width: 70px;
        height: 55px;
    }
    .ArticlesBlockS1 .record-title {
        margin: 0 10px;
    }
    .ArticleS1 .badges {
        left: -7px;
    }
    .ArticleS1 .badges:after {
        border-left: 7px solid transparent;
    }
  	.ArticleS1 .record-info li {
		padding: 0 5px;
	}
  	.ArticleRS1 .record-info .userPhoto img{
		width: 65px;
		height: 65px;
		border-radius: 50%;
	}
}
@media screen and (max-width: 320px) {
	.ArticleRS1 .reviews [data-role="ratingStatus"]{
		display:none;
	}
  	.ArticleRS1 .record-info .userPhoto img{
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
}
/*=======================================================================*/
/*=====================END OF ARTICLE STYLES=============================*/
/*=======================================================================*/

 

1 пользователю понравилось это

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зареєструвати аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу

Яндекс.Метрика Рейтинг@Mail.ru Индекс цитирования