Я довольно долго не мог решиться на смену дизайна блога, но после Нового
года я всё-таки сделал это.
С помощью Юли yoksel я немного разобрался с
CSS и теперь более-менее понимаю, как можно сделать с дизайном ЖЖ почти всё,
что угодно.
Причин смены дизайна было довольно много:
1. В старом дизайне под комментариями не было видно их количество.
2. Кнопка оставить комментарий была только под постом, но не под комментариями,
поэтому многие по ошибке оставляли комментарии не под самим постом, а под
чужими комментариями.
3. Мне давно хотелось сделать боковую панель (сайдбар), чтобы поместить там
поиск по блогу, ссылки, и прочие полезные вещи.
4. Новый дизайн "резиновый". Он уменьшает картинки на маленьких мониторах и
растягивает ленту на больших.
В память о старом дизайне оставлен цвет фона. :)
Надеюсь, что и мне и вам так будет удобней.
Технические детали нового дизайна под спойлером.
Дизайн сделан на базе стиля Chameleon Unstyled 02.
В CSS прописано следующее:
.j-l-page-inner { /*All*/
padding: 0 20px;
}
.j-l-container { /*All*/
padding: 15px 0;
}
.j-l-header { /*Shapka*/
margin-bottom: 20px;
border-radius: 5px; /*Skruglenie kraev*/
background: #ffffff;
background: url(http://nadezhin.ru/lj/bgo1.jpg) no-repeat left top;
padding: 10px; /*Smeshenie ot kraev*/
box-shadow: 15px 15px 5px -5px rgba(0,0,0,.2); /*prozrachaya ten` s kruglymi krayami*/
}
.j-header-user { /*Nazvanie v shapke*/
margin-left: 20px; /*Sdvig vpravo*/
/*display: none;*/
}
/*.j-header-user-name {
display: none;
}
.j-user-journal-title {
display: none;
}
.j-user-journal-subtitle {
display: none;
}*/
.j-header-user-pic { /*Userpic*/
border-top: 0px solid red;
}
.j-p-layout-wt .j-l-alpha-header,
.j-p-layout-wt .j-l-alpha-content,
.j-p-layout-wt .j-l-alpha-footer { /*Polozhenie sidebar'a*/
margin-right: 270px;
}
.j-l-beta-inner { /*Sidebar*/
padding: 15px;
border-radius: 5px;
background: #ffffff;
box-shadow: 15px 15px 5px -5px rgba(0,0,0,.2);
}
.j-e-buttons { /*Knopki nad postom*/
margin-top: 0px;
}
.j-e { /*Post*/
margin-bottom: 30px;
padding: 10px;
border-top: 8px solid #CCC; /*Seraya poloska sverhu*/
border-radius: 5px;
box-shadow: 15px 15px 5px -5px rgba(0,0,0,.2);
background: #ffffff;
}
.j-e:last-child { /*Nizhniy post*/
margin-bottom: 20px;
}
.j-page-nav { /*Knopki nazad-vpered*/
border-radius: 5px;
background: #ffffff;
padding: 10px;
box-shadow: 15px 15px 5px -5px rgba(0,0,0,.2);
}
.j-l-comments { /*Blok kommentariev*/
border-radius: 5px;
background: #ffffff;
padding: 10px;
box-shadow: 15px 15px 5px -5px rgba(0,0,0,.2);
}
.j-c { /*Kazhdyj kommentariy*/
background: #f0f0f0;
padding: 10px;
}
Так как я теперь могу делать с этим дизайном почти всё, что угодно, с радостью
принимаю любые пожелания.
Комментарии: Добавить комментарий
Пока нет комментариев.
Добавьте ваш комментарий:
Чтобы оставить комментарий вам нужно войти на сайт или зарегистрироваться.