timokha

Задача:

1. Вывод новостей на главной странице в 2 колонки.

2. При переходе в категорию и т.п. в одну колонку.



Средства:

Стандартные средства движка ДЛЕ+CSS+HTML (никаких скриптов и примочек).

Удобные для вас редакторы или редактор.

Прямые руки.



Известные проблемы:

1. Бывают длинные заголовки новостей (на 2 и более строчки).

2. Разное количество символов в теле новости (от 1 до 1000+).

3. Изображения в теле новости (размер ограничен разумными пределами)



Все эти а так же специфические "проблемы" заставляющие новость менять высоту, думаю все известны, и каждый борется с ними по своему.



Постараемся решить их:



1. В main.tpl необходимо "отключить" тег {content} делаем это так:

[not-aviable=main]{content}[/not-aviable]



Спросите а почему его просто нельзя удалить?

Удалите и сами всё увидите :)



2. В нужном месте в main.tpl необходимо вставить этот код:

{custom category="2" template="half_story" aviable="main" from="0" limit="10" cache="yes"}



Где: category="2" - номер категории,

template="half_story"  - наш шаблон (разберёмся с ним пожже)

from="0" limit="10"  - ограничение количества отображаемых на странице новостей

cache="yes" - кеширование для уменьшения нагрузки на сайт





3. С этим разобрались? переходим к нашему шаблону.

Открываем half_story.tpl (если вдруг так случилось и у вас в папке с двигом нет шаблона half_story.tpl то возможно нужно переустановить дрова на видеокарту :))) (шутка)

Основное условие нашего шаба - он должен быть резиновым (хотя это не принципиально - всё можно решить.)

Вот допустим такой будет код нашего half_story.tpl:

<div class="post" style="float: left; width: 49%;">

    <div class="title">

    {title}

        <p>автор: {author} | {date} | Просмотров: {views} [edit] Редактировать [/edit] </p>

    </div>

    <div class="post-content">

Всякая информация, одинаковая для каждой из новости.

    <p class="tp" style="z-index:6;"><b>Новость)))<span>{short-story}</span></b></p>

    <br><b>[full-link]Подробнее...[/full-link]</b>

    </div>

    <div class="post-footer">

        <span>[com-link]Комментарии({comments-num})[/com-link]</span><span class="rating">{rating}</span> 

    </div>

</div>





- Обращаю внимание на первую строку: width: 49%; эту цифру подбераем методом научного тыка (или включаем мозги и считаем padding, margin и тому подобные непонятные цифры ;-D )

- Обращаю внимание на эту строку:

<p class="tp" style="z-index:6;"><b>Новость)))<span>{short-story}</span></b></p>



это всплывающая подсказка на CSS (учень кстати удобная)

Это стили:

.post {

        background:#FFFFFF;

        margin-bottom:20px;

        border: 1px solid #9d9d9d;

    }

    

        .title {

            height: 36px;

            background:#99cc00;

            font: bold 1.2em Verdana; 

            color:#FFFFFF;

            border-bottom: 1px solid #9d9d9d;

            padding-left: 5px;

            overflow: hidden;

        }

        

            .title p {

                font: 0.9em Verdana;

                color:#ccff99;

                padding-top: 3px;

            }

            

                .title a {

                    color:#ccff99;

                }



                         .post-content {

            padding: 10px 10px 8px;

            overflow:hidden;

            color:#000;

        }

        

            .post-content img {

                margin:0 5px;

            }

        

        .post-footer {

            position:relative;

            overflow:hidden;

            padding: 3px;

            border-top: solid 1px  #e8e8e8;

            border-left: solid 5px #99cc00;

        }

        

            .post-footer p {

                font:bold 1em Verdana;

                color:#9d9d9d;

            }

            

                .post-footer p a {

                    color:#9d9d9d;

                }





Ну со стилями вроде как ок, вопросов не должно быть , кроме как к этому:



.tp {position:relative;text-indent:0;}

.tp b {

   border-bottom:#90f 1px dotted;

   color:#90f;

   cursor:help;

   font-weight:normal;

}

.tp b span {display:none;}

/*-- для FF, OPERA, IE7 --*/

.tp b:hover {

   border-bottom:red 1px dotted;

   color:red;

}

.tp b:hover span {

   background:lightcyan;

   border:silver 2px outset;

   color:#000;

   display:block;

   padding:7px;

   position:absolute;

   top:2px;

   left:5px;

   z-index:10;

   text-align:left;

   width:250px;

}



(это дописываем в main.tpl либо в отдельный css - файл.)

<!--[if IE 6]>

<style type="text/css">

.tp b {behavior:url(hover.htc);}

.tp .hover {

   border-bottom:red 1px dotted;

   color:red;

}

.tp .hover span {

   background:lightcyan;

   border:silver 2px outset;

   color:#000;

   display:block;

   padding:7px;

   position:absolute;

   top:2px;

   left:5px;

   z-index:10;

   text-align:left;

   width:250px;

}

</style>

<![endif]-->





Это как раз код всплывающей подсказки (отредактируете по своему вкусу))



Вот так мы решили сразу несколько проблем)). Новости выводятся в 2 колонки, заголовок, если он длинный - обрезается, новость показывает во всплывающей подсказке :))





Теперь решим вторую задачу:



Заключаем нащ див с float:left; а точнее даже стиль этого элемента в тег [aviable]

[aviable=main]style="float: left;" width="48%"[/aviable]