Кое-какие записи по поводу шаблонов
Решила переделать сама шаблон.
Изучаю. Решила параллельно писать заметки.
Постоянно обновляется запись.
Изменить логотип
файл header.light.tpl в строчке
файл header_top.tpl в строчке
Как вставить логотип-картинку
правильно указывать путь к логотипу — например вместо
при изменении стандартного шаблона new не удалять
Чтобы сделать еще правильней:
в файле шаблона заменяем на
а в файле стиля удаляем или закомментируем
но не забыть изменить стиль с
Изменение бекграунда\background\bg шапки:
bg описывается в стилях
Так что, чтобы изменить его, нужно изменить картинку images/header-bg.gif а если просто нужен однородный цвет — то вообще удалить url(../images/header-bg.gif) repeat-x — оставить background:#000000; (; — не забыть)
Как изменить ширину сайта, фон сайта
В принципе, все остальные вопросы — это лишь базовые знания в верстке.
Все меняется или в стилях или в файлах tpl — какой файл за что отвечает уже где-то было написано.
Например, чтобы сайт был не на всю ширину — мало ли какой фон красивый хочется вставить — все меняется в body { }, например, ширина 90% и цвет фона черный:
если фоном будет картинка то так:
Как изменить ширину или цвет контента
меняется в #container например если вы задали цвет фона сайта черный, то стоит добавить белый цвет для контента background-color:#FFF или добавить ширину width: 100%;
Думаю остальные изменения — это чистая верстка.
Если изменения не наблюдаются на сайте — попробовать почистить папку templates/compiled а также кеш и кеш браузера
Изучаю. Решила параллельно писать заметки.
Постоянно обновляется запись.
Изменить логотип
файл 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 комментария
только вот вопрос-сделал все как Вы написали (вболее правильном варианте) а логотип(картинка) почему то смещается книзу (если смотреть от уровня images/header-bg.gif ) а я хочу чтоб она совпала с уровнем (header-bg.gif -двухцветный-вверху один цвет, внизу другой, и логотип такой же и по размеру такой же как header-bg.gif но смещается вниз. В чем тут трабл?
+ вам ;)
Поясню: по умолчанию ссылка — строковый (инлайновый) элемент. Задаем ему свойство display:block для отображения как блока. Ширина и высота ссылки задается исходя из размеров картинки логотипа. text-indent:-9999px нужен для того, чтобы SEO текст внутри ссылки не показывался поверх картинки-логотипа.
В итоге получим h1 логотип с SEO текстом.
конечно уплывёт. тут ключевая информация как раз в class=«lite-header». можно удалить, если потом нужные классы дописать в цсске
Как говорил конфуций «Одна картина стоит тысячи слов» ©
А уж видео туториал коль сделаете, так тут вас "+" закидают ,)
TITLE, KEYWORD задается автоматом для каждой страницы свои. title — из названия записи\блога. keyword — из тегов. так что не вижу смысла ставить везде все одинаково.
изменение title и keyword главной — в файле config/config.php
пользуйтесь поиском :)
Не у кого не было проблемы следующего рода: при добавлении комментария (до обновления страница в браузере) как бы появляется два комментария… В общем
Да, браузер FireFox
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» и кончается точкой с запятой включительно.
Вскоре выложу результат работы.
И еслм кто то осилил самостоятельно то не гните пальцы. На вас смотртят как на г…
Аффтарт ты лучший(ая)
и это:
Сильно отличаются? ))
Что-то мне подсказывает, что вместо «cfg name='path.root.web'» или "{$DIR_WEB_ROOT}", вообще, можно было прописать ссылку напрямую.
в шаблоне так:
в nav.css так: