Блочная верстка с наследованием - что это такое

Собственно, про блочну верстку я писал уже не раз, и даже как-то приводил ее пример в этом топике: livestreet.ru/blog/wishlist/13103.html (и мне кажется, что имеет смысл прочитать топик по ссылке, прежде чем читать этот; хотя и не обязательно — можно и после этого).

Но то ли пример там слишком сложный, то ли за один раз не получается все объяснить. Поэтому я решил еще один топик запостить с простыми и понятными (как мне кажется) примерами.
Читать дальше →

Верстка и адаптация дизайна

Привет, народ!
Всех с прошедшими праздниками.
У меня не срочная задача! Нужно сверстать дизайн и натянуть все на LS.
Макет рисовался под LS функционал, но не стандартный, как например дефолтный шаблон, а более приближенный к шаблону demo.livestreetcms.com/simple

Макет по запросу izhanovivan(соообака)gmail.com
Обязательно — опыт адаптации под LS, дабы не тратить время и нервы друг другу)

Делаем плагин "causeedit" более красивым.

Заходим в плагин и находим два шаблона topic.form_end.tpl и topic.show_end.tpl.

Открвываем topic.form_end.tpl и заменям весь код на:


{if $aCauses}
<div class="editdate">
    {foreach from=$aCauses item=aCause name=c key=k}
		Отредактировал {$aCause.user_login} - {date_format date=$aCause.date}
		
Причина: {$aCause.text}
	{if $oUserCurrent and $oUserCurrent->isAdministrator()}
                <a href="#" onclick="deleteCause('{$iTopicId}', '{$k}', this); return false;" class="delete">{$aLang.topic_delete}</a>
        {/if}<br /><br />
	{/foreach}
	</div>
  
{/if}
<p>
    <label for="topic_cause_edit">{$aLang.plugin.causeedit.cause_title}:</label>
    <input type="text" id="topic_cause_edit" name="topic_cause_edit" value="{$_aRequest.topic_cause_edit}" class="input-text input-width-full" />
</p>



Открвываем topic.show_end.tpl и заменям весь код на:


{assign var="aCauses" value=$oTopic->getCauseArray()}
{if $aCauses}
<br />
<div class="editdate">
    {foreach from=$aCauses item=aCause name=c key=k}
		Отредактировал {$aCause.user_login} - {date_format date=$aCause.date}
		
Причина: {$aCause.text}
	{if $oUserCurrent and $oUserCurrent->isAdministrator()}
                <a href="#" onclick="deleteCause('{$iTopicId}', '{$k}', this); return false;" class="delete">{$aLang.topic_delete}</a>
    {/if}<br /><br />
	{/foreach}
	</div>
{/if}



Дальше открываем стили, заменям весь код на:


.editdate {
color: #84AE1B;
font-style: italic;
font-size: 0.9em;
text-align: right;
padding-right: 24px;
background: url("../images/editdate.png") no-repeat 100% 0;
margin-bottom: 15px;
}
.editdate .delete { color: red; }


Создаем папку images и загружаем туда картинку:

И что у меня получилось? А вот что:



Было:


Всех с наступающим!

Создаём снег на сайте к Новому году

До Нового года осталось меньше 10 дней, вот решил немного украсить свой сайт. С удовольствием поделюсь скриптом с Вами :)

1. Скачиваем скрипт с DropBox.
2. Переносим Js файлы в папку с шаблоном (или куда Вам удобнее).
3. Подключаем скрипт в файле header.tpl следующим кодом:

<script type="text/javascript" src=".../snowstorm.js"></script>
<script type="text/javascript">
    snowStorm.flakesMaxActive = 96;  // количество снежинок
</script>


Смотреть видео

Хитрый вопрос по дизайну


Есть вот такая шапка сайта.
С лева и справа от логотипа разделы.
И там и там — ul > li
Как можно объединить эти 2 списка в один так, чтобы рисунок был по центру а пункты этого списка
равномерно распределялись по обоим сторонам логотипа?

P.S. Чисто теоретически я догадываюсь что можно сделать через smarty но может есть html\css решение

Шаблон iNews


Данный шаблон является переделанной версией сверх популярного шаблона Simple с полностью переработанным дизайном. Простота, лёгкость, современность — отличительные особенности данного шаблона.

Только для версии LS 0.5.1

Особенности шаблона:
Приятный и лёгкий дизайн
Удобное меню навигации
Удобен для чтения
Легко изменяется
Удобный рейтинг и закладки
Кроссбраузерность

В комплекте плагин для правильной работы шаблона + PSD исходники логотипа.

Тут демо: demo.1shit.net/
Купить тут: livestreetcms.com/addons/view/506/

Flow и тренды в дизайне

Сегодня я прочитал любопытную статью под названием «Pinterest-мания: успей сменить дизайн» про тренды в дизайне, в которой приводятся примеры различных по тематике сайтов (кстати, среди которых теперь и всеми любимый Lookat.me) с дизайном и механикой близкой к Pinterest.

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

Аналогичный вывод можно сделать, глядя и на успех нашего плагина «Synio Flow», который за краткое время стал одним из самых популярных в каталоге модулей. Совместно с авторами шаблонов, мы добились совместимости с Social и Banana Brownies и будем продолжать адаптировать его к новым шаблонам.

Поэтому если вы любите свою аудиторию, самое время установить Flow.

Шаблоны для LS - вырабатываем стандарты верстки (продолжение)

Затравка темы здесь: «Супер-хуки» в шаблонах — вставка кода в любое место
Более четко сформулировано и начало обсуждения здесь: Новые шаблоны для LS — стандарт верстки

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

Хотелось бы услышать еще мнение наиболее активных разработчиков плагинов и самого Макса (ака ort ). А то, может, «проблемы негров шерифа не волнуют» ©… :)

Но я пока не вижу в предложенном подходе никаких минусов, кроме плюсов.

Итак, краткое резюме по результатам обсуждения:
1) нужно структурировать наборы шаблонов к скинам, используя механизм наследования Smarty
2) нужно выработать соглашения по CSS-селекторам, которые в шаблонах используются
3) в обоих направления предлагается опираться на БЭМ-методологию

Важный момент: реализация этого подхода не изменит саму логику движка, и старые скины будут работать, как и прежде!

А теперь, ближе к делу.
Читать дальше →

Новые шаблоны для LS - стандарт верстки

В комментариях к моему топику про HTML-хуки было немало высказываний на тему стандартизации разрабатываемых шаблонов по LS. Хочу высказать свои соображения на эту тему.

Собственно, проблем тут две:
1) Разбивка страниц на отдельные шаблоны (файлы)
2) Именование CSS-классов

Выскажусь пока по первой проблеме.

Разбивка страниц на отдельные шаблоны

Читать дальше →