Помогите внести изменения в шаблон

<<

PANIC

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

Автор темы

Сообщения: 42

Зарегистрирован: 11 апр 2011, 13:16

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

Сообщение 16 июл 2011, 22:21

Помогите внести изменения в шаблон

Нужна вот такая конструкция (см. рисунок). Что нужно поменять в стандартных шаблонах Blogger, что такое получилось? нечто похожее есть в шаблонах "простая" (зеленая) и "корпорация чудеса" (розовая и синяя).
шаблонами сторонних разработчиков не пользуюсь, слишком там все ограничено.

*упс, наверно, перепутан раздел. перенесите, если что не так.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось Admin 19 июл 2011, 23:22, всего редактировалось 2 раз(а).
<<

Admin

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

Сообщения: 1450

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

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

Сообщение 18 июл 2011, 11:19

Re: Шаблоны Blogger

PANIC писал(а):Нужна вот такая конструкция (см. рисунок). Что нужно поменять в стандартных шаблонах Blogger, что такое получилось?

Может я как-то не так поняла, но получается, что кроме шапки и основной колонки с сообщениями блога на картинке ничего нет.
Удалите все виджеты, которые есть справа/слева и получится шапка и основная колонка.
<<

PANIC

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

Автор темы

Сообщения: 42

Зарегистрирован: 11 апр 2011, 13:16

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

Сообщение 18 июл 2011, 16:41

Re: Шаблоны Blogger

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

Admin

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

Сообщения: 1450

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

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

Сообщение 18 июл 2011, 18:25

Re: Шаблоны Blogger

Все, что вы хотите сделать, делается с помощью стилей CSS, т.е. не имеет большого значения, какой шаблон вы выберите, все можно будет подогнать с помощью CSS. Просто чем менее шаблон будет изначально соответствовать вашим требованиям, тем больше изменений придется внести. По вашим описаниям самое сложное - это чтобы шапка растягивалась на всю ширину экрана (при этом основная колонка должна растягиваться или нет?), остальное - вообще не имеет значения. Лучше всего будет, если вы выберете шаблон, который максимально отвечает вашим требованиям по конструкции, а не по фонам и т.п. От этого и будем плясать. Пишите, какой шаблон выбрали, даете ссылку на блог, над которым проводим эксперименты, четко по пунктам исходя из выбранного шаблона пишите, что нужно изменить и будем изменять.
Последний раз редактировалось Admin 18 июл 2011, 18:26, всего редактировалось 1 раз.
<<

PANIC

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

Автор темы

Сообщения: 42

Зарегистрирован: 11 апр 2011, 13:16

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

Сообщение 18 июл 2011, 23:34

Re: Шаблоны Blogger

но ведь CSS по-разному отображаются в различных браузерах
<<

Admin

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

Сообщения: 1450

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

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

Сообщение 19 июл 2011, 00:06

Re: Шаблоны Blogger

PANIC писал(а):но ведь CSS по-разному отображаются в различных браузерах

Я большую тайну открою, если скажу, что абсолютно все сайты во всем мировом интернете создаются в том числе и с помощью CSS стилей? ;-) И вообще все, что вы видите перед собой в окне браузера, создано благодаря всего двум языкам - HTML и CSS.
Последний раз редактировалось Admin 19 июл 2011, 00:07, всего редактировалось 1 раз.
<<

PANIC

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

Автор темы

Сообщения: 42

Зарегистрирован: 11 апр 2011, 13:16

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

Сообщение 19 июл 2011, 16:25

Re: Шаблоны Blogger

не хотелось бы расписывать все для каждого браузера.
в общем, колдовать буду пока над черновиком. шаблон "путешествие" (рис.1)
001.png

что нужно сделать, чтобы получилось как на рис.2, основную колонку растягивать не нужно.
002.png
У вас нет необходимых прав для просмотра вложений в этом сообщении.
<<

Admin

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

Сообщения: 1450

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

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

Сообщение 19 июл 2011, 19:04

Re: Шаблоны Blogger

На цвет не смотрите, в общем у меня получилось так:
template1.PNG

чтобы так получилось, делаем следующее.
1. Нужно добавить в шаблон контейнер и присвоить ему стиль.
Ищем в шаблоне код:
  Код:
    <div class='fauxcolumn-outer body-fauxcolumn-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
    </div>
    </div>

Именно такой, т.к. в шаблоне есть несколько похожих.
и сразу после строчки:
  Код:
    <div class='fauxcolumn-inner'>

добавляем контейнер:
  Код:
<div id='myheader'></div>

Все вместе должно получиться так:
  Код:
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
<div id='myheader'></div>
    </div>
    </div>

После этого находим в шаблоне строчку:
  Код:
]]></b:skin>

и перед ней добавляем следующее:
  Код:
#myheader {
background-color:red;
width:100%;
height:378px;
}

Первая строчка - это цвет - указываем свой.
Вторую не меняем - это ширина, чтобы растягивалось на весь экран.
Третья - высота, размер подогнан, как в вашем примере под нижнюю границу горизонтального меню.

2. Следующий этап - избавляемся от оформления, которое уже есть в шапке блога.
Для этого, из этих блоков стилей:
  Код:
.content-inner {
    background: url("http://www.blogblog.com/1kt/travel/bg_container.png") repeat-x scroll left -5px #CFD9F6;
    padding: 20px;
}

.content-outer .content-cap-top {
    background: url("http://www.blogblog.com/1kt/travel/bg_container.png") repeat-x scroll center top transparent;
    height: 5px;
}

удаляем упоминания об изображениях. Код изображений - это строчка:
  Код:
    background: url("http://www.blogblog.com/1kt/travel/bg_container.png") repeat-x scroll left -5px #CFD9F6;

Возможно, данный код в шаблоне может выглядеть иначе, главное найти адрес картинки и удалить его.

P.S. Я тему переименую, например "Помогите внести изменения в шаблон"
У вас нет необходимых прав для просмотра вложений в этом сообщении.
<<

PANIC

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

Автор темы

Сообщения: 42

Зарегистрирован: 11 апр 2011, 13:16

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

Сообщение 19 июл 2011, 20:09

Re: Шаблоны Blogger

Огромнейшее спасибо за помощь!

Admin писал(а):
  Код:
#myheader {
background-color:red;
width:100%;
height:378px;
}

Первая строчка - это цвет - указываем свой.
Вторую не меняем - это ширина, чтобы растягивалось на весь экран.
Третья - высота, размер подогнан, как в вашем примере под нижнюю границу горизонтального меню.

т.е. при любых прочих изменениях в шапке, надо будет вновь менять эту величину?

Admin писал(а):2. Следующий этап - избавляемся от оформления, которое уже есть в шапке блога.
Для этого, из этих блоков стилей:
  Код:
.content-inner {
    background: url("http://www.blogblog.com/1kt/travel/bg_container.png") repeat-x scroll left -5px #CFD9F6;
    padding: 20px;
}

.content-outer .content-cap-top {
    background: url("http://www.blogblog.com/1kt/travel/bg_container.png") repeat-x scroll center top transparent;
    height: 5px;
}

удаляем упоминания об изображениях. Код изображений - это строчка:
  Код:
    background: url("http://www.blogblog.com/1kt/travel/bg_container.png") repeat-x scroll left -5px #CFD9F6;

Возможно, данный код в шаблоне может выглядеть иначе, главное найти адрес картинки и удалить его.

у меня адрес рисунка тут
  Код:
<Variable name="content.background" description="Content Background" type="background"
       color="$(content.background.color)" default="$(color) none repeat scroll top center" value="#ffffff url(http://www.blogblog.com/1kt/travel/bg_container.png) repeat-x scroll top left"/>

   <Variable name="content.imageBorder.top" description="Content Image Border Top" type="url" default="none" value="url(http://www.blogblog.com/1kt/travel/bg_container.png)"/>

и что там делать я не знаю, но если удалить все background из кода ниже, то исчезает и фон под сообщениями, который мне нужен (background-color), обозначен на рисунке
  Код:
.content-outer .content-cap-top {
  height: $(content.imageBorder.top.space);
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-inner {
  background: $(content.background);
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}

002a.png
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось PANIC 19 июл 2011, 20:41, всего редактировалось 3 раз(а).
<<

Admin

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

Сообщения: 1450

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

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

Сообщение 19 июл 2011, 23:21

Re: Шаблоны Blogger

PANIC писал(а):т.е. при любых прочих изменениях в шапке, надо будет вновь менять эту величину?

Да, но это же мелочи:) Иначе никак не получится. По крайней мере я не придумала другого варианта.

PANIC писал(а):у меня адрес рисунка тут

Вот этот свой код:
  Код:
.content-outer .content-cap-top {
  height: $(content.imageBorder.top.space);
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-inner {
  background: $(content.background);
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}

попробуйте привести к виду:
  Код:
.content-outer .content-cap-top {
  height: $(content.imageBorder.top.space);
}
.content-inner {
  padding: $(content.padding);
}
След.

Вернуться в Шаблоны для Blogger

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

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

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