четверг, 11 февраля 2010 г.

Ширина шаблона Blogger

Ширина шаблона Blogger
«Ну-ка, морда, шире тресни!»

Как увеличить ширину шаблона Blogger


Тяжело будет впихивать третью колонку в шаблон, предварительно не расширив страницу. Добавить блогу ширины можно с помощью несложного тюнинга стилей CSS шаблона.



Разные шаблоны спроектированы по-разному, и основные блоки в них могут называться и задаваться по-разному. Хорошее правило: увеличивать ширину тех блоков, где она задана с использованием свойства width.


Я объясню на примере стандартного шаблона Minima. По-умолчанию этот шаблон составляет 660 пикселей в ширину. Я увеличу его до 1000 px.


Элементы шаблона Blogger


Я специально раскрасил их в попсовые цвета в стиле «вырви глаз» для пущей наглядности :).


#outer-wrapper #header-wrapper #footerЭлементы шаблона Blogger “Minima”

В общем случае, нужно будет увеличить следующие элементы:


«Обертка» страницы

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Меняю ширину с 660px на 1000px:
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Здесь и далее изменяется только свойство width; все остальное остается без изменений.


Заголовок

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Меняю:
#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

«Подвал»

#footer {
width:660px;
/* ... */
}

тоже увеличивается до 1000 пикселей в ширину
#footer {
width:1000px;
/* ... */
}

Теперь нужно сохранить шаблон.


После этого появится место для дополнительной колонки в блоге.


Пост скриптум


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


В шаблоне «Минима» это блок #content-wrapper, но ширина для него задается «автоматически» и тут ничего менять не надо.

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

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

А вот как перевести шаблон фикс. ширины (напр. 800 px) в растягивающийся?

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

Легко и не принужденно. Кстати во втором блоге, который энциклопедия я так и сделала ))) стоит просто поразбираться в построении, там все понятно, главное с картинками не намудрить )))

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

a13x4ndr, если вкратце – то ширину основных блоков нужно задавать в процентах.

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

Ну это я уже на своем опыте знаю.
Вопрос: какие там есть подводные грабли, такскать?
Это я так помогаю темы для будущих постов сочинять :)

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

У меня Заголовка как у Вас нет, а есть вот, что

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

Что делать?
А вот "Обертка" страницы получилась нормально, правда у меня 740 а не 660 как у Вас.

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

ну расскажите подробнее, как расширить шаблон, если у меня не МИНИМА. т.е. подробнее о ПОСТ СКРИПТУМЕ. ПЛИЗ!!

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

Lejik, тогда заголовок можно не трогать. По идее он должен подстроиться автоматически. Элементы HTML там те же самые – header-wrapper, header-inner, header.

box, шаблон TicTac – один из самых неудобных шаблонов для тюнинга, имхо. Слишком много статических фоновых изображений и т.п. Чтобы расширить его, придется помимо правки кода еще и в фотошопе повозиться.

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

Croaker, может посоветуете оптимальный из шаблонов, который и смотрелся бы хорошо и редактировать можно было без проблем. Спасибо.

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

Здравствуйте, три насущных вопроса)
1-й можно ли задать высоту шаблона?
2-й можно ли подложить картинку под элементы шаблона и как это лучше сделать? (с header'ом понятно)

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

Вечер добрый! :)

1. Высоту шаблона можно задать с помощью CSS стилей шаблона, например так:
#outer-wrapper {
height:1000px; /* высота */
overflow:auto; /* при переполнении - прокрутка */
}

2. Как подложить картинку ответил здесь: фоновое изображение.

3. А какой был третий насущный вопрос? :)

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

Да конечно когда знаешь где и что менять,всё намного проще,я как-то на другом шаблоне методом тыка,ничего не понимая в этих кодах,всё(вообще всё)менял,убил три часа.

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

Lejik, из шаблонов структурно мне нравится Minima – очень легко редактируется. А вот типографика в ней оставляет желать лучшего, но ее можно исправить.

KrD комментирует...
Этот комментарий был удален автором.
Croaker комментирует...

Стили для левого и правого сайдбара должны быть заданы отдельно.
Левый сайдбар и основной блок должны выравниваться влево (float:left), правый сайдбар – вправо (float:right).

Про принцип создания здесь: Третья колонка в шаблоне
Про размещение колонок: Колонка слева, колонка справа

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

Забудьте обо всем и точка! заходим на Панель инструментов Blogger'а не по обычному адресу, а через их испытательный полигон: http://draft.blogger.com Там на вкладке "Дизайн" теперь новая опция "Дизайнер шаблонов".

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

Lejik спасибо кульный сервис у них получился. Хоть и не без изьяна. Неужели Пиндосы досих пор 15" мониторы используют, ширина максимум 1000рх делается. интересно вручную потом можно еще потянуть?

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

А вот это вопрос, растянуть больше 1000 будет наверное классно!

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

Кстати затестил, можно потянуть вручную, как тут в блоге описывается, без проблем)))

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

Да, но больше 1000 не дает, изменение ширины боковых колонок влияет на главную полосу

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

Не по теме конечно, но может кто подскажет как установить разрыв "Читать далее" на дополнительно созданных страницах. На Главной странице http://rabotaiinternet.blogspot.com получается, не вопрос, там в редакторе даже кнопочка есть, а вот в дополнительных ну хоть тресни, никак.
Прошу помощи!!!!

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

KrD - как удалось растянуть так шаблон на http://vseprogi.blogspot.com/, у меня с новым дизайном так не получается, чесно говоря даже не знаю где толком искать, там все в %.

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

Lejik:
В коде ищеш вот такой кусок b:template-skin и пальчиками вбиваешь нужный размер. Ток Смотри там первая величина дефолтная default='930px, а тебе нужна value='1100px. Потом "сохранить шаблон" и все вроде.

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

Замутил дизай через их испытательный полигон: draft.blogger.com. Все на первый взгляд ровно. Но не могу теперь писать посты (во бред). При оформлении могу только написать заголовок поста и поставить ссылку. А в поле для текста не ставится курсор и не печатается ни чего. Поможите Народ?

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

KrD:
Супер, все сделал так как ты посоветовал, даже поставил 1200px http://wedding-psd.blogspot.com/ для эксперемента, а на счет оформления новостей у меня все нормуль, чем помочь тебе я даже не знаю, в HTML не силен.
Удачи тебе.

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

KrD:
в поле для текста не ставится курсор и не печатается ни чего
Вряд ли тут дело в самом шаблоне. Скорей всего это глюк самого «драфта» (draft.blogger.com). Попробуй публиковать посты «традиционным» образом :)

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

НАРОД!!!
Мой вопрос остался открытым:
"кто подскажет как установить разрыв "Читать далее" на дополнительно созданных страницах. На Главной странице http://rabotaiinternet.blogspot.com получается, не вопрос, там в редакторе даже кнопочка есть, а вот в дополнительных ну хоть тресни, никак."
Прошу помощи!!!! Может у кого всетаки есть какие соображения

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

Lejik, дело в том, что любая дополнительная страница сама по себе – страница целиком, без «анонса». Тег “more” или разрыв «Читать далее» там попросту не предусмотрен – некуда идти далее. Страниц более глубокого вложения там просто нет.

Можно воспользоваться виджетом «Cкрытый текст».

Только что сделал на тестовом блоге: Пример.
Жмакать ссылку «Трехколоночный шаблон блога Blogspot».

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

Croaker
Спасибо попробую, но точно уверен, будет сложновато для меня, если бы загрузить этот виджет как обычный "добавить гаджет" было бы вообще супер.

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

Croaker:
Так еще хуже новости: на другом акке googla есть несколько блогов абсолютно стандартных. так там таже фигня творится. А при попытке редактировать уже вставленный текст, окно с текстом пустое только заголовок. Ребят помоможите как нить? что за бредовые глюки?

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

KrD, попробуй в основных настройках блога выбрать другой редактор. Я использую старый редактор без WYSIWYG (опция «Скрыть режим создания») и все ок.
Так же возможен глюк регионального сервера гугль. Как правило такие вещи они довольно быстро исправляют.

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

Croaker:
Ну так и делаю....

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

скажите пожалуйста как изменить в шаблоне начало окошки для комментариев

С.Ц. комментирует...

Скажите, как можно приблизить Блогспот по дизайну к ЖЖ: чтобы на главной странице были 2 колонки, а при открытии записи только одна колонка с текстом и никаких виджетов?

А то виджеты (типа Обо мне и Архив блога) появляются везде - и на главной странице, и на странице сообщения.

Использую шаблон Минима, потому что в других не получается разобраться. Заранее спасибо :)

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

как мне здесь изменить??? http://school-deneg.blogspot.com/

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

Изменить ширину .content-outer вот здесь:
.content-outer, .content-fauxcolumn-outer, .region-inner {
max-width: 930px;
min-width: 930px;
}

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

Жги!