deviaphan | ЖЖ-дизайн: Бетон

Entry tags:

hand-made:жж-дизайн

ЖЖ-дизайн: Бетон

Общая ширина 1250 пикселей, ширина постов 1050 пикселей.

Установка дизайна

Перейдите на страницу настройки дизайна ;
В разделе "Выбор дизайна" в поле поиска введите Blue Gray и выполните поиск;
Примените дизайн Blue Gray Flexible Squares от Yati Mansor;
В разделе "Выбор макета" выберите 2 колонки, панель слева.

Перейдите в настройки оформления.

Выберите раздел Custom CSS
В поле Custom stylesheet скопируйте описание стиля. Если в этом поле уже есть какой-либо текст, добавьте код дизайна после него.

Подробная инструкция по установке дизайнов

/*
Based on
Blue Gray
Flexible Squares of Yati Mansor
*/

body
{
background: #e2e0e1 url('http://lh3.ggpht.com/-8-HmV0KfKFc/T7EvmYxM_tI/AAAAAAAABSg/n7O_oDqC15w/s0/bg_clear.png');
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#content-outer
{
width: 1250px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#content
{
border:0px;
width:1250px;
padding: 0 0 0 0;
margin: 0 0 0 0;
background: transparent none;
}

#header
{
height:280px;
border:0px;
background-image: url('http://lh5.ggpht.com/-9BvJXPsRBI4/T65RxY1hyuI/AAAAAAAABRk/XQGefQ4wHck/s0/header.jpg');
margin:0 0 0 0;
padding: 0 0 0 0;
}

.skiplinks
{
background-color: transparent;
}

.clear
{
background-color: transparent;
border:0px;
}

.title
{
color:#fff;
font-size: 32px;
}

.subtitle
{
color: #fff;
font-size: 16px;
}

.navheader
{
position:absolute;
top:255px;
left:100px;
}

#sidebar
{
border: 1px solid #fff;
border-left:0px;
border-radius: 0px 16px 16px 0px;
width:166px;
padding:2px 2px 2px 2px;
margin: 0 0 0 0;
background-color: transparent;
}

#maincontent
{
padding: 0 0 0 0;
margin: 0 0 0 180px;
width:1070px;
background-color: transparent;
border: 0px;
}

.subcontent
{
width:1050px;
border:0px;
padding-left:10px;
padding-right:10px;
border: 1px solid #707070;
border-radius: 10px 10px 10px 10px;
background-color: #f0f0f0;
}

.datesubject
{
width: 1070px;
background-color: transparent;
padding: 0 0 0 0;
margin:0 0 0 0px;
}

.date
{
padding-top:40px;
}

.subject
{
height:90px;
font-size: 24px;
}

.entry
{
border:0px;
border-top: 1px solid grey;
background-color:transparent;
}

.userpic, .userpicfriends
{
background-color: #e2e0e1 !important;
margin-top:40px;
margin-right:16px;
border-radius: 5px;
}

.entry .clear
{
background-image: none;
}

.separator
{
height:8px;
background-color: transparent;
}

#comments
{
background-color: transparent;
padding: 64px 32px 0px 64px;
margin:0 0 0 0;
border:0px;
}

form div.box
{
border: 0px;
padding-left:64px;
padding-right:64px;
}

.commentbox
{
background-color:transparent;
border-radius: 0px 16px;
}

.userpiccomment
{
background-color: #e2e0e1 !important;
border-radius: 8px;
}

.ljtags
{
border-top:1px solid #e2e0e1;
margin-top:10px;
}

.comments
{
background-color: transparent;
color: #999;
}

div.comments a, div.comments a:link, div.comments a:visited
{
color: #666;
}
div.comments a:hover
{
color:#000;
}

.datesubjectcomment
{
border-radius: 4px 4px 10px 10px;
}

Flat | Top-Level Comments Only

Просто шикарный. Вот и мучайся теперь...

Спасибо.)
В смысле с установкой мучаться? Помимо краткого описания там ссылка на более подробное есть.
И если что, спрашивайте - я отзывчивый.)

У вас щяс "кот", так что вам только css подменить. Базовый стиль тот же самый тут используется.

Нет, с установкой я бы справилась, у меня же ваш кот. Просто не знаю, как быть: и кота люблю и этот нравится))
Пока с котом поживу))

эх, вот бы без тётьки...

Если надо, могу замазать и дать без неё. Хотя я из-за неё и стал делать.)

Тётька - самое то!

Вот без неё

/*
Based on
Blue Gray
Flexible Squares of Yati Mansor
*/

body
{
background: #e2e0e1 url('http://lh3.ggpht.com/-8-HmV0KfKFc/T7EvmYxM_tI/AAAAAAAABSg/n7O_oDqC15w/s0/bg_clear.png');
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#content-outer
{
width: 1250px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#content
{
border:0px;
width:1250px;
padding: 0 0 0 0;
margin: 0 0 0 0;
background: transparent none;
}

#header
{
height:280px;
border:0px;
background-image: url('http://lh3.ggpht.com/-eqYYfODzkf4/T7E4zCch5nI/AAAAAAAABS4/sQfXbg8B8_c/s288/header2.jpg');
margin:0 0 0 0;
padding: 0 0 0 0;
}

.skiplinks
{
background-color: transparent;
}

.clear
{
background-color: transparent;
border:0px;
}

.title
{
color:#fff;
font-size: 32px;
}

.subtitle
{
color: #fff;
font-size: 16px;
}

.navheader
{
position:absolute;
top:255px;
left:100px;
}

#sidebar
{
border: 1px solid #fff;
border-left:0px;
border-radius: 0px 16px 16px 0px;
width:166px;
padding:2px 2px 2px 2px;
margin: 0 0 0 0;
background-color: transparent;
}

#maincontent
{
padding: 0 0 0 0;
margin: 0 0 0 180px;
width:1070px;
background-color: transparent;
border: 0px;
}

.subcontent
{
width:1050px;
border:0px;
padding-left:10px;
padding-right:10px;
border: 1px solid #707070;
border-radius: 10px 10px 10px 10px;
background-color: #f0f0f0;
}

.datesubject
{
width: 1070px;
background-color: transparent;
padding: 0 0 0 0;
margin:0 0 0 0px;
}

.date
{
padding-top:40px;
}

.subject
{
height:90px;
font-size: 24px;
}

.entry
{
border:0px;
border-top: 1px solid grey;
background-color:transparent;
}

.entry_text img
{
max-width:970px !important;
height:auto !important;
}

.userpic, .userpicfriends
{
background-color: #e2e0e1 !important;
margin-top:40px;
margin-right:16px;
border-radius: 5px;
}

.entry .clear
{
background-image: none;
}

.separator
{
height:8px;
background-color: transparent;
}

#comments
{
background-color: transparent;
padding: 64px 32px 0px 64px;
margin:0 0 0 0;
border:0px;
}

form div.box
{
border: 0px;
padding-left:64px;
padding-right:64px;
}

.commentbox
{
background-color:transparent;
border-radius: 0px 16px;
}

.userpiccomment
{
background-color: #e2e0e1 !important;
border-radius: 8px;
}

.ljtags
{
border-top:1px solid #e2e0e1;
margin-top:10px;
}

.comments
{
background-color: transparent;
color: #999;
}

div.comments a, div.comments a:link, div.comments a:visited
{
color: #666;
}
div.comments a:hover
{
color:#000;
}

.datesubjectcomment
{
border-radius: 4px 4px 10px 10px;
}

чёрт... теперь придётся ставить стиль, да? а я вообще-то больше дерево люблю...

Я не настаиваю.)))

да не, красиво, я просто недавно дизайн обновил

а как вот такую хрень в коммент вставлять?

Так же, как и в пост: двойным тэгом <textarea> ... </textarea>

о, спасибо!

А что - неплохо)))

подскажите пожалуйста, а где можно в коде Вашем сделать побольше текст поста. и сделать его например черным:) Спасибо. И можно ли Ваш код с дизайном переделать, ну поменять заглавную картинку и т.д.?!. спасибо.

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

Цвета проще всего поменять выбрав другую базовую схему оформления. У меня "Blue Gray
Flexible Squares of Yati Mansor" и все цвета в ней соответствовали общей идее дизайна. В других темах могут быть более подходящие цвета к твоей идее.

Размер шрифта задаётся кодом font-size: 16px; в соответствующем блоке. Для текста поста это блок .entry. Там же задаётся цвет букав.

Размер заглавной картинки должен быть 1250х280 пикселов, иначе придётся код править.

ок, большое спасибо:)))А еще подскажите пожалуйста как изначально писать код так что начал меняться тот стиль дизайна который я выбрала. Вот например я выбрала Under Fire,Smooth Sailing от Michael Raffoul - хочу его изменить, добавить картинку в шапку и поменять цветовую гамму. А все никак не выходит:(

В блок custom.css уточнять содержимое стилей для конкретных классов.
Лучше всего поставить WebDeveloper и FireBug и в них смотреть текущие стили и названия классов и сразу в них же корректировать код и смотреть изменения. А потом уже копировать нужный код в custom.css. Я вообще сохраняю на диск страницу с исходным стилем журнала (ленту и открытый пост с блоком комментариев), подключаю к этому html файл со стилями и редактирую всё в offline. А когда уже всё готово, то в блок custom.css копирую код. Некоторые проблемы при таком подходе есть, но в оффлайн гораздо быстрее процесс идёт.

WebDeveloper и FireBug куда точно поставить что-то не поняла.

блок custom.css открыла вставлять в то окно куда и код или в коде самом вставлять?:)))

Это названия дополнений для ФарФокса. Для других браузеров тоже что-нибудь такое есть наверняка.

"вставлять в то окно куда и код или в коде самом вставлять?"
*смайлик_взрыва_мозга_тут* .)))))))))

Все настройки стиля происходят только через блок custom.css. Поэтому вставлять именно туда.)
Ещё рекомендую блог http://ru-designhelp.livejournal.com/. В ру_лайаут ты уже задружена, этот блог тоже от Йоксель. Там на многие вопросы ответ найдёшь. А ещё там генератор дизайнов есть, советую сперва им поиграться, чтобы быть в курсе чего-куда-зачем.)
И знаки препинания ставь! А то мне теперь весь вечер порванный шаблон склеивать.))))

у меня тоже взрыв мозга:))))установила FireBug - буду морочить голову:))))Спасибо что ответил и помог:)

подскажите пожалуйста как сделать так чтобы код в дизайне ложился под любой размер экрана. а то вот что выходит после применения:(

(http://www.radikal.ru)

Edited 2012-08-13 13:53 (UTC)

Собственно, никак. Только на основе FlexibleSquare дизайны растягиваться умеют, при условии, что в коде дизайна размер фиксированно не задан. Все остальные делаются на конкретную ширину. Таков ЖЖ.

#content-outer
{
width: 1250px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#content
{
border:0px;
width:1250px;
padding: 0 0 0 0;
margin: 0 0 0 0;
background: transparent none;
}

получается размер задан?

Да. Фиксированная ширина 1250 пикселов.

не могу понять тогда почему идет такой большой отступ справа, а не посредине все?!
(http://www.radikal.ru)

Это из-за margin: 0 0 0 0; нужна auto вписать. auto 0 auto 0; Или местами поменять, я по памяти соврать могу.

ок, спасибо - сейчас попробую:)

Никак.(
Это либо есть в макете дизайна, либо нет. Файл css изменяет только стиль отображения, но не содержимое.
Ну ещё можно запрограммировать свой слой, в котором и добавить недостающий функционал, но для этого нужен платный аккаунт и знание внутреннего языка программирования ЖЖ. Т.е. опять же, никак.

ясно, спасибо еще раз:)

Обрашчайся.)

Flat | Top-Level Comments Only

ЖЖ-дизайн: Бетон

Установка дизайна

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject