Настройка дизайна шаблона с помощью CSS

<<

sv9t

Аватара пользователя

Автор темы

Сообщения: 729

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 07 май 2011, 03:03

Настройка дизайна шаблона с помощью CSS

Приглянулся недавно интересный дизайн шаблона. Я его установил, и решил несколько отредактировать. Как оказалось именно через меню "дизайн" этого сделать нельзя вплоть до настойки цвета и шрифта. Не знаю, может это в html коде шаблона где-то запретили или меню сторонние темы не редактирует - короче, решил через html настраивать. Поковырялся в инете в своем шаблоне, и честно, результатом доволен :) . Решил выложить что сам "наковырял", что в инете нашел.
С самого начала решил сделать пошире блог, т.к. уж по умолчанию узковатый был.
1)
  Код:
#outer-wrapper {
width: 1170px;
margin:0 auto;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

Это основной блок, с последними, по крайней мере у меня, статьями. Ширину(width) я выставил 1170px.

2)
  Код:
#header-wrapper

Это вид шапки блога, надо поставить такую же ширину как и #outer-wrapper.

После всех этих действий останется в постах пустое место, находим main-wrapper и также меняем, sidebar-wrapper также придется менять - это боковая панель. У меня их две по бокам, поэтому одна со значением float: right;, другая float: left; чуть ниже. Это самое долгое для меня было, т.к. тут все методом научного тыка происходит :) . Придется подбирать и смотреть, чтобы панели друг на друга не налазили и все слова отображались.

3)
  Код:
body {
background: #ffffff url(http://1.bp.blogspot.com/_ ... uGiVUD8/s1600/bg.jpg) top left repeat-x;
margin: 0;
padding: 0;
font: 10pt verdana, arial, helvetica, sans-serif;}
a:link {
margin-top: 5px;
text-decoration: none;
color: #cc3300;

5px; - отвечает за размещение картинок в постах. были ниже текста у меня - стали выше, подправил.

4)
  Код:
#header {
margin: 0;
text-align: left;
color:#fff;
width: 1150px;

width: 1150px; - отвечает за размеры "поля"(условно назовем), в которое можно разместить описание блога, оно пишется у меня под названием.

5)
  Код:
#header h1 {
margin: 0;
padding:15px 20px 0 0;
line-height:1.2em;
text-transform:normal;
letter-spacing:0em;
font: bold 60px Tangerine, Serif;
text-shadow: 1px 1px 1px #000;

15px - это расстояние по вертикали от самого верха до названия блога
letter-spacing:0em; - расстояние между буквами
60px - это размер названия блога

6)
  Код:
#content-wrapper {
margin-top: 100px;
}

100px - отвечает за положение ваших статей вместе с левой и правой колонокой(контент) на странице по ветикали, чем меньше значение тем выше располагаетя.

7)#rss - соответственно отвечает за rss(размер, цвет)

8)
  Код:
a:link {
margin-top: 5px;
text-decoration: none;
color: #cc3300;

Отвечает за отображение обычной ссылки.
a:visited чуть ниже слова link отвечает за цвет и размер посещенной ссылки, у меня был #cc3300 - оранжевый, я вписал blue - голубой, можно red и т.п.
a:hover отечает за ссылку, на которую навели мышью(курсором)

9)font-size – размер шрифта, но можно писать и px, em, pt
font-weight – насыщенность шрифта (bold, bolder, lighter, normal, 100, 200, 300, 400...)
line-height – устанавливает межстрочный интервал текста (normal, множитель, значение, проценты)

10)
  Код:
font: 8pt 'arial', verdana, arial, helvetica, sans-serif;

так пишется обычно размер шрифта и его стиль, в кавычках как я понял указывается стиль, который должен быть, но зачем остальные написаны не понял.
Вот как пробовал менять шрифт - соответственно, в меню "Дизайн" ничего не получается, но! в этом меню я просто смотрел какие шрифты мне нравятся и вписывал название шрифта в html страницы, соответственно шрифт чего хотел менять. Но вот русских красивых мало получилось, хотел прописью, но они не отображаются, значит сделаны для английского языка.
Вот пока все, если что интересное накопаю, дополню.

З.Ы. Язык html нигде специально не изучал, поэтому если неграмотно выразился - не поминайте лихом! :)
Последний раз редактировалось sv9t 07 май 2011, 16:04, всего редактировалось 2 раз(а).
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 07 май 2011, 13:42

Re: Настройка дизайна шаблона с помощью CSS

Инструкция отличная, спасибо. Подправила заголовок, т.к. все эти изменения - это не HTML, это CSS ;-) и раздел правильный. Как раз для этого.

Но хочу предупредить всех, кто будет читать инструкцию, и автора топика тоже, что крайне НЕ рекомендуется менять ширину блога до 1170px.
Помните о своих читателях, у всех разные мониторы. Когда вы работает на большом мониторе, ваш блог находится по серединке, а с двух сторон большие пустые поля. Когда у пользователя монитор меньше, чем у вас, у него и поля меньше, а на совсем небольших мониторах полей вообще нет. Когда вы делаете большую фиксированную ширину, то на небольших мониторах у ваших читателей появляется горизонтальный скрол - это не есть хорошо.

Что делать? Вариантов несколько.
1. Максимальная рекомендуемая ширина шаблона - 1000px. Чтобы поля не были пустыми, используется красивый background
2. В тех же самых CSS есть такое правило, как указать максимальную и минимальную ширину экрана. Браузер будет сам подгонять блог, но тут стоит учитывать и сайдбар, как он будет подгоняться.
3. Вообще делать резиновый шаблон, который при любых обстоятельствах будет сжиматься и растягиваться при любых размерах монитора.
<<

sv9t

Аватара пользователя

Автор темы

Сообщения: 729

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 07 май 2011, 15:45

Re: Настройка дизайна шаблона с помощью CSS

Admin писал(а):Инструкция отличная, спасибо. Подправила заголовок, т.к. все эти изменения - это не HTML, это CSS ;-) и раздел правильный. Как раз для этого.

:ok: будем знать.
Установил 1000px и правый сайдбар исчез, поэтому лучше
Admin писал(а):3. Вообще делать резиновый шаблон, который при любых обстоятельствах будет сжиматься и растягиваться при любых размерах монитора.

этот вариант попробовать. Только как это сделать?
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 07 май 2011, 15:54

Re: Настройка дизайна шаблона с помощью CSS

sv9t писал(а):Установил 1000px и правый сайдбар исчез, поэтому лучше

Но вы же кроме общего значения, какие-то ещё значения меняли? Теперь все надо подогнать под новое значение общей ширины.
sv9t писал(а):Только как это сделать?

Надо экспериментировать, я не пробовала.
<<

sv9t

Аватара пользователя

Автор темы

Сообщения: 729

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 08 май 2011, 23:25

Re: Настройка дизайна шаблона с помощью CSS

Admin писал(а):Но вы же кроме общего значения, какие-то ещё значения меняли? Теперь все надо подогнать под новое значение общей ширины.

Все подогнал,нормально стало.

Вот как можно вставить красивый разделитель между постами:
Сначала загружаем красивый разделитель(найти в интернете их несложно)на хостинг, подумав я решил в Picasa, тем более такие маленькие файлы там вообще не учитываются,т.е. в самый раз. Затем копируем ссылку на него.
ищем в редакторе html .post, меняем значение у него border-bottom:2px dotted #666; с dotted на none и вставляем, в моем случае, выше .post код
  Код:
.post {
background: url(http://1.bp.blogspot.com/-AJ8_t2GYsTg/TcZVOcddm7I/AAAAAAAAACo/W39ikb8VxyY/s1600/44760098_2bc8ea5fcdd1.gif) repeat-x;
background-position:bottom center;
}

Можно также менять значение dotted на:
none; - запрещает рисование границы (значение по умолчанию)
dotted; - рисует точечную линию
dashed; - рисует штриховую линию
solid; - рисует сплошную линию
double;- рисует двойную сплошную линию
groove; - рисует трехмерную вдавленную границу
ridge; - рисует трехмерную выпуклую границу
inset; - рисует трехмерную "ступеньку вверх"
outset; - рисует трехмерную "ступеньку вниз"
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 08 май 2011, 23:46

Re: Настройка дизайна шаблона с помощью CSS

sv9t писал(а):Вот как можно вставить красивый разделитель между постами:

А что за разделитесь, покажите на реальном блоге?
<<

sv9t

Аватара пользователя

Автор темы

Сообщения: 729

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 09 май 2011, 00:13

Re: Настройка дизайна шаблона с помощью CSS

Могу только свой показать :), вот он!
Позже уберу с главной LinkWithin, ярлыки и вообще красота будет.
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
<<

Admin

Аватара пользователя

Сообщения: 1450

Зарегистрирован: 21 мар 2011, 15:30

Благодарил (а): 66 раз.
Поблагодарили: 157 раз.

Сообщение 09 май 2011, 03:13

Re: Настройка дизайна шаблона с помощью CSS

sv9t писал(а):Могу только свой показать :), вот он!
Позже уберу с главной LinkWithin, ярлыки и вообще красота будет.

Да, такие разделители красиво смотрятся :good:
<<

Lev Kaplya

Аватара пользователя

Сообщения: 102

Зарегистрирован: 09 май 2011, 12:28

Откуда: Санкт-Петербург

Благодарил (а): 13 раз.
Поблагодарили: 0 раз.

Сообщение 23 май 2011, 01:08

Re: Настройка дизайна шаблона с помощью CSS

sv9t писал(а):Могу только свой показать :), вот он!
Позже уберу с главной LinkWithin, ярлыки и вообще красота будет.


Привет! Я тоже решил вставить красивые разделители между статьями... Подскажи пожалуйста, как найти нужный код в шаблоне? Ты написал "ищем в редакторе html .post, меняем значение у него border-bottom:2px dotted #666; с dotted на none и вставляем, в моем случае, выше .post код"... Я у себя нашел такой

  Код:
.post {
   margin-bottom: 2em;
   overflow: hidden;

это он? И как его изменить правильно?

P.S. Подскажи еще пжл., как ты убрал LinkWithin и ярлыки с главной? Я не могу найти точный код LinkWithin в шаблоне :dash: .
Школа Электронного Бизнеса
Все об Инвестициях и Бизнесе в Интернете
<<

sv9t

Аватара пользователя

Автор темы

Сообщения: 729

Зарегистрирован: 23 апр 2011, 01:14

Откуда: Киров

Благодарил (а): 8 раз.
Поблагодарили: 92 раз.

Сообщение 23 май 2011, 18:45

Re: Настройка дизайна шаблона с помощью CSS

Lev Kaplya писал(а):это он? И как его изменить правильно?

Привет! тебе не надо его изменять. Сразу после overflow: hidden; прописываешь свой background, в принципе должно получиться так:
  Код:
.post {
   margin-bottom: 2em;
   overflow: hidden;
   background: url(http://1.bp.blogspot.com/...c8ea5fcdd1.gif) repeat-x;
   background-position:bottom center;
   }

Но соответственно ссылку свою вставляешь.

Lev Kaplya писал(а):P.S. Подскажи еще пжл., как ты убрал LinkWithin и ярлыки с главной? Я не могу найти точный код LinkWithin в шаблоне :dash: .

Ищешь у себя <script>linkwithin_text='Читайте также:'</script> и перед ним вставляешь <b:includable id='main'><b:if cond='data:blog.url != data:blog.homepageUrl'>, далее чуть ниже ищешь for WordPress, Blogger..." style="border: 0" /></a> и после вставляешь </b:if>
</b:includable>

Теоретически должно подучится :) , еси напишет ошибку пиши какая. И не забудь "сохраниться" на всякий, а то вдруг чего, потом заморочки эти с восстановлением.
Путь сновидений - Hemi-sync, Астрал, ОС, Эзотерика, Йога
Sv9t.ru - CMS, Jquery, HTML5, CSS3, IT, PHP

"Делаю перелинковку на FAQ, телепат без отпуска, наивный оптимизатор, танцую с бубном"
След.

Вернуться в Учим HTML, CSS, XML

Кто сейчас на конференции

Зарегистрированные пользователи: нет зарегистрированных пользователей

cron
Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo