» »

Информер разных материалов на файлы uCoz


Информер разных материалов на файлы uCoz

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

Почему то здесь идет увеличение изображение, хотя это не обязательно, не не стал его убирать, так как работает отлично. Теперь вам только остается выбрать функционал того, что будет показывать, можно поставить, когда будете создавать информер на разный, или просто он называется "Название материала" но все равно будет вид материалов и комментариев к нему, там как раз он должен стоять. А при этой установки просто брать с этого модуля различный материал, если только не подключите схожий, что уже проверено было и работает как нужно, только от тегов много будет зависит.

Вот как при увеличение будет, будет показывать оригинальную высоту и ширину, здесь специально небольшое, чтоб видно было.

Информер для сайта с увеличением изображение

А вот так он был по умолчанию, что тоже можете поставить, только там уже сами ширину в ручную выставляем.



Показать код и стили

Но думаю вы поняли, для чего вообще он нужен, теперь просто не 3 или 4 окна идет, а вот такая форма будет, что на некоторые интернет ресурсы отлично вписывается в саму стилистику. Также хочется добавить, что скрипт сам не сложный и вы можете его переделать, и что он там показывать будет вам решать. Что по самому оттенку цвета при нажатие, это вы также выставляете под свой портал. Здесь будет предоставлен уже переделанный, но а старый вы можете скачать, он представлен будет в текстовом документе, так как возможно другим он больше подходит.

Теперь переходим к установке:

В админ панели создаем информер и кидаем туда код.

[ Каталог файлов · Материалы · Дата добавления материала D · Материалы: 5 · Колонки: 1 ]

Код
<div class="block_new_comm east" original-title="$WDAY$ $DATE$">  
<div class="block_new_av">  
<?if($IMG_URL1$)?>  
<a href="$IMG_URL1$" title="Увеличить изображение материала $TITLE$" alt="$TITLE$" class="ulightbox"><img src="$IMG_URL1$" width="30" height="30"></a>  
<?else?>  
<a href="$IMG_URL1$" title="Увеличить изображение материала к $TITLE$" alt="$TITLE$" class="ulightbox"><img src="" width="15" height="15"></a>  
<?endif?>  
</div>  
<div class="block_new_text">  
<p>  
<a href="$ENTRY_URL$" title="$TITLE$"><b>$TITLE$</b></a>  
</p> <?if(len($MESSAGE$)>90)?><?substr($MESSAGE$,0,90)?>...<?else?>$MESSAGE$<?endif?> </div></div>


Длину краткого описание сами ставим, здесь стоит на 90 знаков, у вас возможно конструктор фиксирован или широкий.

CSS

Код
/* Right Block */  
.cProf_sign {background:#dfdfdf no-repeat 0 0; overflow:hidden; width:auto; margin:0 auto; border-radius: 3px;}  
.cProf_sign_in {background:#dfdfdf no-repeat right bottom; padding:10px;}  
.block {background:#fff;border:2px solid #f4f4f4;width:255px;margin:8px 8px;overflow:hidden;}  
.block_tit {background:#dfdfdf no-repeat bottom;text-transform:uppercase;color:#626262;font-style:italic;padding:8px 15px;}  
.block_tit span {color:#588ca7;}  
.block_con {padding:10px 10px;overflow:hidden;}  
.block_con ul {list-style:none;}  
.block_con li a {-webkit-transition:all 0.1s ease;background:#fbfbfb no-repeat 10px 8px #fbfbfb;display:block;border-radius:3px;color:#626262;padding:6px 15px 6px 30px;margin:5px 0;text-decoration:none;}  
.block_con li a:hover {background:#fbfbfb no-repeat 10px 8px #93abbb;color:#fff;}  
.block_new_comm {-webkit-transition:background 0.1s ease;background:#fbfbfb;border-radius:3px;padding:5px 5px;margin:5px 0;overflow:hidden;}  
.block_new_comm:hover {background:#93abbb;color:#fff;}  
.block_new_comm:hover .block_new_text a {color:#fff;}  
.block_new_av {background:#494949;border-radius:3px;padding:3px 3px;margin-right:11px;float:left;}  
.block_new_av img {border-radius:3px;width:33px;height:33px:}  
.block_new_text {margin:3px 0;}  
.block_new_text a {color:#7d9ca4;text-decoration:none;font-weight:700;}  
.block_new_text p {margin:3px 0 0 0;}  
.block_new_text p a {color:#626262;text-transform:uppercase;text-decoration:none;font-weight:normal;}  
.block_popular {border:1px solid #efefef;padding:3px 3px;margin:4px 3px;float:left;position:relative;}  
.block_popular img {width:221px;height:69px;}  
.block_popular_r {background:#fbfbfb;border-radius:3px;position:absolute;top:8px;right:9px;padding:3px 0;color:#efefef;text-align:center;width:48px;height:22px;font-size:9px;}  
.block_popular_c {background:#fbfbfb;border-radius:3px;position:absolute;bottom:8px;right:9px;padding:3px 0;color:#efefef;text-align:center;width:48px;height:22px;font-size:9px;}  
.block_popular_name {background:#fbfbfb;border-radius:3px;padding:6px 15px;margin:1px 3px;clear:left;}  
.block_popular_name a {text-transform:uppercase;text-decoration:none;color:#626262;}  
.block_popular_name a:hover {color:#7d9ca4;}  
.block_popular_name p {margin:5px 0 0 0;}  
.block_popular_name p a {text-decoration:none;color:#7d9ca4;text-transform:none;font-weight:700;}  
.block_popular_name p a:hover {color:#626262;}  
.block_counter_box {background:#fbfbfb no-repeat bottom;padding-bottom:16px;margin:5px 8px 0 8px;overflow:hidden;}  
.block_counter {float:left;margin-top:3px;}  
.block_onlcounter {float:right;}  
.block_uslist {margin:10px 9px 15px 9px;}  
.block_todayus {background:#fbfbfb;border-radius:3px;color:#6f6f6f;padding:6px 15px;margin:0 8px;text-transform:uppercase;font-style:italic;text-align:center;}  
.block_todayus span {color:#588ca7;}  
.block_todayusinf {margin:10px 9px;}  
/* --- */


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

Здесь как понимаете, ставим номер созданный вами информер.

Код
<hr><div class="cProf_sign">  
<div class="cProf_sign_in">  
<div class="bCont" align="center">$MYINF_X$</div>  
</div></div><hr>


PS - пришлось убрать все ссылки и стили левые, которые не относятся не как к функциональности работы материала. Если есть ошибки, то плиз отпишите в комментариях, будет разбираться, то здесь очень много лишнего было, что пришлось просто снести, так что смотрим как корректно будет показывать. Так как проверил на тестовом сайте, и все картинки сняты с него.
24.11.2016 Просмотров: 512 Комментарий: (24)

Поделиться в социальных сетях

Материал разместил

Комментарий: 24
FeStemBer
FeStemBer 24.11.2016 01:241
+2
Согласен, увеличение там не нужно, но с другой стороны, правильно написано. что кто то просто посмотрит и переходить не будет. Это что то похоже на вид материалов, где увеличение нет. А ранее вспомнишь, но везде было, сейчас уже редко найдешь где установлено, хотя и свой класс есть. только поставить остается для этого.
FeStemBer
FeStemBer 24.11.2016 01:252
0
Костен, а что ты не поставишь этот, его если еще довести до ума, сделать не жирным описание, на чтоб не по центру было.
ucozmental
ucozmental 24.11.2016 02:265
0
Чтоб краткое не было жирным шрифтом, просто закрывающие /a перенести к title, только в этом случай будет переход через название.
Brung
Brung 24.11.2016 01:293
0
Какой то он легкий по установке, просто такой стиль не раз попадался и на одном сайте, который также по тематике схожий с этим стоит, но там установка на много сложнее.
tsakonter
tsakonter 24.11.2016 01:554
0
Мне вот такая конструкция информер больше нравится других. Надо поставить и посмотреть, что по центру не очень.
Angerfist
Angerfist 24.11.2016 12:356
+1
Есть пара вопросов по информеру)
Для чего тут скрипт прилеплен, для веса до кучи?
Код

<script type='text/javascript'>     
$(function() {     
$('.north').tipsy({gravity: 'n'});     
$('.south').tipsy({gravity: 's'});     
$('.east').tipsy({gravity: 'e'});     
$('.west').tipsy({gravity: 'w'});     
});     
</script>

Тут зачем третий раз блок закрывать?
Код

<hr><div class="cProf_sign">     
<div class="cProf_sign_in">     
<div class="bCont" align="center">$MYINF_X$</div>     
</div></div><hr>     
</div>

Правильно пишется не wight a width
Код
<img src="$IMG_URL1$" wight="30" height="30"></a>

Тут начинается условие для примера если нет изображения у материала, но нет ссылки на изображение, только для ulightbox и то там миниатюра NO AVATAR.
Код

<?if($IMG_URL1$)?>     
<a href="$IMG_URL1$" title="Увеличить изображение материала $TITLE$" alt="$TITLE$" class="ulightbox"><img src="$IMG_URL1$" wight="30" height="30"></a>     
<?else?>     
<a href="http://zornet.ru/Aben/Abryn/zZdU4oy.jpg" title="Увеличить изображение материала к $TITLE$" alt="$TITLE$" class="ulightbox"><img src="" wight="15" height="15"></a>     
<?endif?>     


Вообщем как то так на поверхности, стили мельком вроде правильно прописаны, но в файле стилей есть лишнее, которое вообще не применяется в данном информере (для веса каскадной таблице видимо)))...

11a
Kosten
Kosten 24.11.2016 12:417
0
Angerfist, вот - вот не зря написал, чтоб посмотрели, за что благодарачка.
Angerfist
Angerfist 24.11.2016 12:478
0
Это я так... вредничаю, не выспался)
Brung
Brung 24.11.2016 13:269
0
А вы вообще видели его полным, в интернете посмотрите. 52a
Angerfist
Angerfist 24.11.2016 13:3410
0
При чём тут полный материал, там может быть всё по уму, вопросы были к этому урезанному материалу)
Kosten
Kosten 24.11.2016 14:0211
0
Angerfist, брат, сделай как нужно, ты реально в этой теме шаришь как не кто.

Можешь что то от себя добавить, как вообще видишь этот код.

И надеюсь ты не вредничаешь сейчас)
steadrad
steadrad 24.11.2016 19:3312
0
Код
<script type='text/javascript'>
$(function() {
$('.north').tipsy({gravity: 'n'});
$('.south').tipsy({gravity: 's'});
$('.east').tipsy({gravity: 'e'});
$('.west').tipsy({gravity: 'w'});
});
</script>


Это всплывающая подсказка, вернее часть кода всплывающей подсказки.

Вот

Код
<script type="text/javascript" src="-----------/Tipsy_Tooltip/jquery.tipsy.js"></script>
<script type='text/javascript'>
$(function() {
$('.north').tipsy({gravity: 'n'});
$('.south').tipsy({gravity: 's'});
$('.east').tipsy({gravity: 'e'});
$('.west').tipsy({gravity: 'w'});
});
</script>


Ещё стили должны быть к ней.
steadrad
steadrad 24.11.2016 19:3913
0
Стили и код на материал.

Код
.tipsy {
padding: 5px;
font-size: 11px;
opacity: 0.8;
filter: alpha(opacity=80);
background-repeat: no-repeat;
background-image: url('tipsy.gif');
}

.tipsy-inner {
padding: 5px 8px 4px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
}

.tipsy-inner {
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

.tipsy-north {
background-position: top center;
}

.tipsy-south {
background-position: bottom center;
}

.tipsy-east {
background-position: right center;
}

.tipsy-west {
background-position: left center;
}


Код
<a class='south' href='#' title='<img src='$IMG_URL1$' border='0' width='200'>Тут текст</a>
Brung
Brung 24.11.2016 22:4715
0
steadrad, а это что за скрипт, по дизайн точно такой и вообще он для чего?
Kosten
Kosten 24.11.2016 21:4614
0
Вообщем еще лишнее убрал и вывод на материал сделал через название.


информер

Код
<div class="block_new_comm east" original-title="$WDAY$ $DATE$">   
<div class="block_new_av">   
<?if($IMG_URL1$)?>   
<a href="http://zornet.ru/Aben/Abryn/zZdU4oy.jpg" title="Увеличить изображение материала $TITLE$" alt="$TITLE$" class="ulightbox"><img src="$IMG_URL1$" weight="30" height="30"></a>   
<?else?>   
<a href="http://zornet.ru/Aben/Abryn/zZdU4oy.jpg" title="Увеличить изображение материала к $TITLE$" alt="$TITLE$" class="ulightbox"><img src="" weight="15" height="15"></a>   
<?endif?>   
</div>   
<div class="block_new_text">
<p>   
<a href="$ENTRY_URL$" title="$TITLE$"><b>$TITLE$</b></a>   
</p> <?if(len($MESSAGE$)>90)?><?substr($MESSAGE$,0,90)?>...<?else?>$MESSAGE$<?endif?> </div></div>   

<style>   
/* Right Block */   
.cProf_sign {background:#dfdfdf no-repeat 0 0; overflow:hidden; width:auto; margin:0 auto; border-radius: 3px;}   
.cProf_sign_in {background:#dfdfdf no-repeat right bottom; padding:10px;}   
.block {background:#fff;border:2px solid #f4f4f4;width:255px;margin:8px 8px;overflow:hidden;}   
.block_tit {background:#dfdfdf no-repeat bottom;text-transform:uppercase;color:#626262;font-style:italic;padding:8px 15px;}   
.block_tit span {color:#588ca7;}   
.block_con {padding:10px 10px;overflow:hidden;}   
.block_con ul {list-style:none;}   
.block_con li a {-webkit-transition:all 0.1s ease;background:#fbfbfb no-repeat 10px 8px #fbfbfb;display:block;border-radius:3px;color:#626262;padding:6px 15px 6px 30px;margin:5px 0;text-decoration:none;}   
.block_con li a:hover {background:#fbfbfb no-repeat 10px 8px #93abbb;color:#fff;}   
.block_new_comm {-webkit-transition:background 0.1s ease;background:#fbfbfb;border-radius:3px;padding:5px 5px;margin:5px 0;overflow:hidden;}   
.block_new_comm:hover {background:#93abbb;color:#fff;}   
.block_new_comm:hover .block_new_text a {color:#fff;}   
.block_new_av {background:#494949;border-radius:3px;padding:3px 3px;margin-right:11px;float:left;}   
.block_new_av img {border-radius:3px;width:33px;height:33px:}   
.block_new_text {margin:3px 0;}   
.block_new_text a {color:#7d9ca4;text-decoration:none;font-weight:700;}   
.block_new_text p {margin:3px 0 0 0;}   
.block_new_text p a {color:#626262;text-transform:uppercase;text-decoration:none;font-weight:normal;}   
.block_popular {border:1px solid #efefef;padding:3px 3px;margin:4px 3px;float:left;position:relative;}   
.block_popular img {width:221px;height:69px;}   
.block_popular_r {background:#fbfbfb;border-radius:3px;position:absolute;top:8px;right:9px;padding:3px 0;color:#efefef;text-align:center;width:48px;height:22px;font-size:9px;}   
.block_popular_c {background:#fbfbfb;border-radius:3px;position:absolute;bottom:8px;right:9px;padding:3px 0;color:#efefef;text-align:center;width:48px;height:22px;font-size:9px;}   
.block_popular_name {background:#fbfbfb;border-radius:3px;padding:6px 15px;margin:1px 3px;clear:left;}   
.block_popular_name a {text-transform:uppercase;text-decoration:none;color:#626262;}   
.block_popular_name a:hover {color:#7d9ca4;}   
.block_popular_name p {margin:5px 0 0 0;}   
.block_popular_name p a {text-decoration:none;color:#7d9ca4;text-transform:none;font-weight:700;}   
.block_popular_name p a:hover {color:#626262;}   
.block_counter_box {background:#fbfbfb no-repeat bottom;padding-bottom:16px;margin:5px 8px 0 8px;overflow:hidden;}   
.block_counter {float:left;margin-top:3px;}   
.block_onlcounter {float:right;}   
.block_uslist {margin:10px 9px 15px 9px;}   
.block_todayus {background:#fbfbfb;border-radius:3px;color:#6f6f6f;padding:6px 15px;margin:0 8px;text-transform:uppercase;font-style:italic;text-align:center;}   
.block_todayus span {color:#588ca7;}   
.block_todayusinf {margin:10px 9px;}   
/* --- */   
</style>


А ставим его под своим номером.

Код
<hr><div class="cProf_sign">   
<div class="cProf_sign_in">   
<div class="bCont" align="center">$MYINF_X$</div>   
</div></div><hr>
avatar
Start 25.11.2016 13:2417
0
1)Ставишь код и получается бяка...
-выяснил причину:
Код
<?if(len($MESSAGE$)>90)?><?substr($MESSAGE$,0,90)?>...<?else?>$MESSAGE$<?endif?>

-так почему-то не работает, вот рабочий
Код
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><?substr($MESSAGE$,0,400)?> ...<br /><a style="display:block;float:right;" href="$ENTRY_URL$"><b>Читать дальше ...</b></a></div><?endif?>

2)Жмешь на аватар материала, выводит:эту аву!а не материал...
- http://zornet.ru/Aben/Abryn/zZdU4oy.jpg
(вместо ссылки надо ставить код:$IMG_URL1$)
Kosten
Kosten 25.11.2016 14:5718
0
Но нормально выводило, видать кэш почистить нужно.
avatar
Start 25.11.2016 17:3620
0
почистии...
Kosten
Kosten 25.11.2016 17:4821
0
Так вот все почистил и сделал дефрагментацию диска, все нормально, здесь тестовый сайт и там скрипт стоит.

avatar
Start 25.11.2016 17:5222
0
хз...
Kosten
Kosten 25.11.2016 18:2723
0
Но у вас корректно показывает на тестовом сайте?
kiva
kiva 24.11.2016 22:5316
0
Нужно было сразу все просмотреть, хотя этот скрипт нашёл только на этом сайте и еще на одном, но там вообще кошмары скрипт с битами ссылками, которые вообще там нет, здесь видно почистили.
1 2 »
avatar