воскресенье, 23 ноября 2008 г.

Куда же вставить этот CSS?

Я здесь довольно часто пишу про оформление вашей страницы Blogger, тюнинг blogspot-страницы с помощью стилей. И если с HTML всё более-менее понятно /* не понятно? -- пишите! :) */, то с CSS может быть далеко не так тривиально. Итак, куда же вставлять этот чёртов CSS?

Blogger CSS: Инструкция по применению


Способ первый (универсальный):
  1. Идем в настройки шаблона (Настроить - Макет - Изменить HTML)
  2. В поле шаблона находим закрывающий тег </head>
  3. Прямо перед этим тегом создаём собственный раздел стилей: <style>здесь пишите ваши стили</style>
    Дополнено: Еще лучше
    <style type="text/css">здесь пишите ваши стили</style>

Например:
<style type="text/css">
/* комментарий: стиль для параграфа */
p {color: #1A4676;}

blockquote {
line-height:1.3em;
}
.more span {
font-size:100%;
font-weight:bold;
color: #1A4676;
}
</style>
</head>


Способ второй (настройка скина):
  1. Шаг 1 из первого способа
  2. В поле шаблона находим строку ]]></b:skin>
  3. Прямо перед этой строкой добавляем собственные стили

Например:
p {color: #1A4676;}
blockquote {
line-height:1.3em;
}
]]></b:skin>

Инструкция дана.

10 Комментариев :

prokofevna комментирует...

Пришла прямо с форума по вашему совету...
Возможно я действительно не там вставляла эти
CSS?
Завтра буду пробовать опять, уже подглядывая и к вам на страничку...

Croaker комментирует...

Заглядывайте, конечно! На самом деле CSS на странице всегда вставляется внутри тегов <style type="text/css">...стили CSS...</style>
Даже псевдотег b:skin трансформируется движком Блоггер в тег style:
<style id='page-skin-1' type='text/css'>...</style>

MaximTr комментирует...

Спасибо ценная информация по настройке блога, нашел вас через поисковик. Рад что можно самому полностью уникализировать шаблон.

Анонимный комментирует...

А в какой тег HTML вставлять CSS если я хочу залить фон в ячейку таблицы? Сколько ни пыталась, следуя советам, так и не поняла как это делается. Сайтостроительство еще только начала изучать, азы HTML имеются. Пока моя пробная страничка создана в виде таблицы, где есть верхний блок (шапка), 2 боковых, середина (основная часть) и блок для счетчиков (узенький такой снизу). Задача: мне нужно задать фон для шапки. Ну и соответственно потом уже будет понятно как модернизировать остальные блоки.

Croaker комментирует...

Самое простое – указывать стили в ячейке таблицы. Для той же шапки блога:

<td style="background-color:#5DA9CF;">
…шапка блога…
</td>


Еще лучше – создать класс для шапки:

<td class="shapka">
…шапка блога…
</td>

а правила класса как в этой статье записывать в блоке style:
.shapka {
background-color:#5DA9CF;
}

На этом пока можно и остановиться (начинать лучше с простого). Но еще правильней вообще отказаться от таблиц в шаблоне. Например, таким образом: Третья колонка в шаблоне.

Nadia Dixon комментирует...

Какое же вам огромное спасибо!

Dexter-Razbor комментирует...

Привет.

Пытаюсь вставить вот этот код и не получается: https://codepen.io/scorch/pen/zdKErE

Это я что-то делаю неправильно или в Блоггере это по какой-то причине невозможно?

Croaker комментирует...

Привет!

А с примером попроще работает? Предположим, что у Блоггер нет каких-либо ограничений на animation и т.п. (точно не знаю).
Как я вижу -- возможно, слишком "общие" правила; они могут попросту "перекрываться". Для проверки я бы добавил какие-нибудь произвольные классы к элементам.

Ну и ещё момент, больше относящийся к разметке документа -- один тег h1 на документ.

Что-то типа того:
https://codepen.io/devlanev/pen/gOYwRKx

P.S. Ну и, разумеется, разметка html и стили css должны быть в нужных местах. Блоггер 2008 года изменился, сейчас не знаю, насколько сейчас эта инструкция актуальна )

Dexter-Razbor комментирует...

- Спасибо за ответ! Был готов, что его не будет вообще. Я, например, не получаю на почту уведомлений о том, что мне оставили в блоге комментарий. И где это настроить - не нашел. А Вы, наверняка, получили!

- Честно говоря, в этой тарабарщине я не очень разбираюсь. Так что про h1 я не понял.

Насколько я понял, Вы добавили только одну строку в HTML (наверно это то, что заложено в словах "Для проверки я бы добавил какие-нибудь произвольные классы к элементам"), оставив CSS тем-же, а установка этого CSS приводит к тому, что когда я хочу посмотреть блог - у меня зависает компьютер! Так что навряд ли Ваше изменение может мне что-то дать. :(

Я У Вас в блоге http://dotrb.blogspot.com/2009/09/javascript-css-in-blogger.html#.XVvfCOP7TIV прочитал, что код CSS надо как-то "утоптать" в одну строку, но когда я ее одну вставляю - автоматически все ставится "как надо" не в одну строку. Правда, я не вижу никаких добавлений-преобразований \n в
Может действительно в Блоггере не работает анимация?

- А что значит "разметка html и стили css должны быть в нужных местах"? Ну CSS я разместил как у Вас написано. А html? Это не там, где я хочу в посте применить это?

- Почему Блоггер такой дубовый? Даже комментарий на комментарий невозможно написать! Это-же великий Гугл! Почему они такую бедную систему сделали и не совершенствуют ее? Какое-то позорище!???

Croaker комментирует...

Привет!

- Я давно этот блог не веду, так что, скорее — это в порядке исключения :-). Ответы приходят автору блога. Ну и в форме для комментария есть чекбокс "Отправлять уведомления". Не знаю. насколько он рабочий.

- Про h1 и вообще — лучше начинать с основ. Пример кода, на мой взгляд, для сильно хорошего уровня знаний HTML, CSS.

Вот набросал пример — работает анимация в Blogger. Постарался прямо в сообщении важные моменты описать. И ссылка на новый код там же.

CSS Анимация - тест в Blogger

В одну строку код вытягивать уже не надо, но нужно, чтобы Настройки Сообщения были как указано (по ссылке).

Я давно не в теме Блоггера, может быть его уже Гугл не развивает, или просто "не в приоритете". Сильно тормозит местами, а в Firefox вообще подвисал.

Отправить комментарий

Жги!