Кое-какие записи по поводу шаблонов

Решила переделать сама шаблон.
Изучаю. Решила параллельно писать заметки.
Постоянно обновляется запись.
Изменить логотип
файл header.light.tpl в строчке
<h1 class="lite-header"><a href="{$DIR_WEB_ROOT}">Live<span>Street</span></a></h1>

файл header_top.tpl в строчке
<h1><a href="{$DIR_WEB_ROOT}"><strong>Live</strong>Street</a></h1>

Как вставить логотип-картинку
правильно указывать путь к логотипу — например вместо
<h1><a href="{$DIR_WEB_ROOT}"><strong>Live</strong>Street</a></h1>
вставить логотип-картинку, которая находится в папке images текущего шаблона, помнить что это картинка, поэтому для тех пользователей кто отключает картинки, а также для поисковиков, нужно добавить атрибут alt к тегу img:
<a href="{$DIR_WEB_ROOT}"><img src="{$DIR_STATIC_SKIN}/images/logo.gif" alt="название сайта" border=0/></a>

при изменении стандартного шаблона new не удалять
<h1 class="lite-header"> 
иначе логотип уплывет
Чтобы сделать еще правильней:
в файле шаблона заменяем на
<a href="{$DIR_WEB_ROOT}" class="lite-header"><img src="{$DIR_STATIC_SKIN}/images/logo.gif" alt="название сайта" border=0/></a>

а в файле стиля удаляем или закомментируем
/*.lite-header a { color: #c7c7c7; font-size: 26px; text-decoration: none; }
.lite-header a span { color: #dedede; }
.lite-header a:hover { color: #333; }
.lite-header a:hover span { color: #777; }*/
и
/*#header h1 { float: left; padding-top: 25px; padding-left: 25px; }
#header h1 a { color: #77d115; text-decoration: none; font: normal 20px Arial, Sans-Serif; }
#header h1 a strong { color: #fff; }*/

но не забыть изменить стиль с
.lite-header {padding: 10px 20px; }
на
.lite-header {float: left; padding: 10px 20px; }
:)
Изменение бекграунда\background\bg шапки:
bg описывается в стилях

#header { height: 80px; clear: both; overflow: hidden; zoom: 1; background: #000 url(../images/header-bg.gif) repeat-x; }

style.css(строка 42)

Так что, чтобы изменить его, нужно изменить картинку images/header-bg.gif а если просто нужен однородный цвет — то вообще удалить url(../images/header-bg.gif) repeat-x — оставить background:#000000; (; — не забыть)

Как изменить ширину сайта, фон сайта
В принципе, все остальные вопросы — это лишь базовые знания в верстке.
Все меняется или в стилях или в файлах tpl — какой файл за что отвечает уже где-то было написано.
Например, чтобы сайт был не на всю ширину — мало ли какой фон красивый хочется вставить — все меняется в body { }, например, ширина 90% и цвет фона черный:
body {background: #000; width: 90%;}

если фоном будет картинка то так:
background: #000 url(../images/имяфайла.gif) top;

Как изменить ширину или цвет контента
меняется в #container например если вы задали цвет фона сайта черный, то стоит добавить белый цвет для контента background-color:#FFF или добавить ширину width: 100%;

Думаю остальные изменения — это чистая верстка.
Если изменения не наблюдаются на сайте — попробовать почистить папку templates/compiled а также кеш и кеш браузера

43 комментария

avatar
Я думаю сайт поддержки — не место для ведения записей. Пишите в блокнот у себя на компе.
avatar
ваше право так думать! а я же думаю что записи могут пригодится — и если кто-то увидит в них ошибку — то может подправить! все, каш, не смотрите мои записи, раз не хотите. Даешь место новичкам!
avatar
Может лучше в wiki писать такие вещи. Раздел для новичков, например, и вопросы: Как поменять логотип? и т. д. Если, конечно, ее откроют для редактирования.
avatar
она открыта для редактирования для человеков с рейтингом выше 1
avatar
спасибо большое!
только вот вопрос-сделал все как Вы написали (вболее правильном варианте) а логотип(картинка) почему то смещается книзу (если смотреть от уровня images/header-bg.gif ) а я хочу чтоб она совпала с уровнем (header-bg.gif -двухцветный-вверху один цвет, внизу другой, и логотип такой же и по размеру такой же как header-bg.gif но смещается вниз. В чем тут трабл?
avatar
padding-top:0px; сделай
avatar
Надеюсь в этом топике будем много ответов на вопросы которые задают новички!
+ вам ;)
avatar
хочу как верстальщик немного посоветовать по поводу логотипа-картинки. Я думаю, что правельнее не вставлять тег в ссылку, а прописать у в стилях путь к картинке, а внутренней ссылке задать такие свойства:

h1#logo a {display:block;width:100px;height:50px;text-indent:-9999px}

Поясню: по умолчанию ссылка — строковый (инлайновый) элемент. Задаем ему свойство display:block для отображения как блока. Ширина и высота ссылки задается исходя из размеров картинки логотипа. text-indent:-9999px нужен для того, чтобы SEO текст внутри ссылки не показывался поверх картинки-логотипа.
В итоге получим h1 логотип с SEO текстом.
avatar
альты и тайтлы ровно так же глотаются с точки зрения СЕО как инлайн текст. text-indent:-1000px, и overflow:hidden, про который ты забыл, нужен если картинка лежит бекграундом, для того что бы при отключении цсс блок не потерял свою функциональность. в основном это применяется для кнопок. А в данном случае использовать бэкграунд имхо совершенно не обязательно — по ховеру он не меняется
avatar
посмотрите мою версию (в записи) верстки. может будет правильнее дать просто класс ссылке и удалить h1 раз все равно картинка а не текст :)
avatar
при изменении стандартного шаблона new не удалять
<h1 class="lite-header">иначе логотип уплывет 

конечно уплывёт. тут ключевая информация как раз в class=«lite-header». можно удалить, если потом нужные классы дописать в цсске
  • Vilz
  • -1
avatar
просто класс может называться как угодно, хоть «lite-header» хоть как то иначе, просто тот класс который указан в коде и должен описываться в css
avatar
может картинки еще в пост добавлять, что бы понятнее было?
  • Vilz
  • 0
avatar
не ну это уж слишком :)))))
avatar
просто сумбурно получается очень
avatar
картинки правда не понимаю зачем? уж лучше выкладывать картинки тех кто воспользовался этой записью до и после как дизайн в итоге получился :)) А картинки файла с такими же словами что и у меня оформленные в коде — разнице не будет. Вы когда будете делать — ваше право сделать картинки! :)
avatar
Поддержу Vilz скрин понятней новичкам да и не только.
Как говорил конфуций «Одна картина стоит тысячи слов» ©

А уж видео туториал коль сделаете, так тут вас "+" закидают ,)

avatar
вивео по замене лого сайта, а также видео по включению компьютера и монитора.(«Только в нашем потрясающем видео вы узнаете как правьно нажимать кнопку на системном блоке»)
avatar
Хорошая статья. Объясните пожалуйста, как делать ссылки в шапке, изменить TITLE, KEYWORD. Изменить название RSS ленты. Если можно подробние, какие файлы править. Спасибо!
  • ded9
  • 0
avatar
как делать ссылки в шапке

livestreet.ru/blog/2690.html
TITLE, KEYWORD задается автоматом для каждой страницы свои. title — из названия записи\блога. keyword — из тегов. так что не вижу смысла ставить везде все одинаково.
avatar
если очень нужно то модуль livestreet.ru/blog/addons/2758.html
изменение title и keyword главной — в файле config/config.php
пользуйтесь поиском :)
avatar
пользуйтесь поиском :)
А я о чем говорил? :)))
avatar
у человека первое сообщение на проекте! :) позволительно :)
avatar
Возможно вопрос не совсем по теме топика, но все же…
Не у кого не было проблемы следующего рода: при добавлении комментария (до обновления страница в браузере) как бы появляется два комментария… В общем вот скрин, там все понятно.
avatar
браузер какой?
avatar
Я об этом писал в багах при обновлении — firefox
avatar
а можно ссылку на этот баг, и нашел ли он решение? :)
Да, браузер FireFox
avatar
на этом сайте такая проблема наблюдается?
avatar
забыл указать версию: LS_VERSION','0.3.1'
avatar
Можно поинтересоваться, как менять фоновую картинку или задавать цвет не для шапки, а для места после шапки? (Там, где кнопка Написать и прочие ссылочки)
avatar
Рисуете три элемента размером 24*92 пиксела:

1 элемент — средняя часть картинки, 2 и 3 элементы — боковые части.

В папке ВАШ_САЙТ\templates\skin\new\images находите файл bg.gif, открываете его в редакторе и накладываете свои элементы поверх трёх имеющихся (они идут подряд начиная с 82 пиксела сверху). Сохраняете всё это дело и всё!

Если хотите использовать просто цвет вместо картинки, открываете style.css, находите строку "/* Navigation" и меняете строки под ней следующим образом:

#nav { height: 92px; background: #ваш_цвет;}
#nav .left { background: none; }
#nav .right { background: none; }

Чистите кеш и смотрите на результат. Если хотите, чтобы при этом остались такие же отступы крайних элементов фона, как и с картинками, то удаляете только то, что начинается со слова «background» и кончается точкой с запятой включительно.
avatar
Да, уже разобрался.
Вскоре выложу результат работы.
avatar
Статья Что НАДо.
И еслм кто то осилил самостоятельно то не гните пальцы. На вас смотртят как на г…
Аффтарт ты лучший(ая)
avatar
все делал, как в инструкции и нифига не получилось вставить лого:( видимо этот метод для 0.4.2 не подходит:(
avatar
Подходит, подходит.
avatar
а вот и не подходит, решение нашел здесь и в инбоксе.
avatar
Вы думаете это:
<a href="{cfg name='path.root.web'}"><img src="ссылка_на_твой_логотип.png"/></a>

и это:
<a href="{$DIR_WEB_ROOT}"><img src="{$DIR_STATIC_SKIN}/images/logo.gif" alt="название сайта" border=0/></a>

Сильно отличаются? ))
Что-то мне подсказывает, что вместо «cfg name='path.root.web'» или "{$DIR_WEB_ROOT}", вообще, можно было прописать ссылку напрямую.
avatar
Друзья, подскажите пожалуйста в каком файле LS можно отредактировать стиль «class=»js-login-form-show" ??? Порылся в файлах своего скина, но ничего похожего не надыбал, мож плохо смотрел. Мне нужно менюху в юзербаре поправить. А именно фон бекраунда к ссылкам войти и зарегится. В developvent по умолчанию они бледные(серый на сером), а мне нужно их выделить.
avatar
Прошу прощения… неправильно написал название шаблона — developer.
avatar
ни в каком… этот класс используется в js для вывода соответствующей вкладки в модальном окне логина/регистрации. можете добавить в шаблоне свой класс (например так class=«eto_mne_nado js-login-form-show») и прописать для него правила в css
avatar
Благодарю за ответ! Но в каком файле?...base.css, modals.css или navs.css? (не матёр в коде, но интересуюсь).
avatar
или создавать отдельный css-файл?
avatar
без разницы, но по логике лучше в nav.css:
в шаблоне так:
<li><a href="{router page='login'}" class="js-login-form-show log-in">{$aLang.user_login_submit}</a></li>
<li><a href="{router page='registration'}" class="js-registration-form-show sign-in">{$aLang.registration_submit}</a></li>

в nav.css так:
.nav.nav-userbar li .log-in {  }
.nav.nav-userbar li .sign-in {  }
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.