Как изменить стиль журнала

Февраль 16th, 2011 Автор grafchitaru Рубрики: Пользование ЖЖ

Вы уже много раз видели, что существуют красивые оформления журналов, но сколько не искали, не смогли найти или понять, как оформить свой журнал необычным способом? Тогда данная статья написана для вас. Хотя на вашем месте я бы попробовал Создать сайт на 1С Битрикс, а не возился с ЖЖшкой.
Первое, что вы должны сделать — это найти подходящее оформление для вашего журнала. Найти его можно не в стандартных темах, которые находятся в ваших настройках, а в глубинах интернета. Существуют различные сообщества, в которых разрабатывают и собирают оригинальные дизайны, к таким сообществам например относятся:journals_covers, gawariel_design, mintyapple
Для наглядности, я возьму своего виртуала и изменю ему стиль журнала:
Исходный стиль:

Допустим вы прошли по данным сообществам и нашли для себя подходящий стиль оформления, что дальше?
Я выбрал следующий стиль оформления(http://community.livejournal.com/mintyapple/564264.html):

Дальше идем по этому адресу: http://www.livejournal.com/customize/ и выбираем стиль Flexible Squares.
Нажимаем «Применить дизайн». Далее спускаемся вниз страницы и выбираем «Настроить выбранное оформление». Выбираем вкладку Custom CSS. И в Custom stylesheet вписываем следующее:

/* Cleaned CSS: layout by evangelinevio @ ocean_lounge */
 
 
    body {
        background: #f1b264 url(http://i45.tinypic.com/28qw2up.jpg) no-repeat;
 
        text-align: center;
        color: #ffffff;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        margin: 20px 0 20px 0;
        }
 
    a, a:link, a:visited {
        color: #790000;
        text-decoration: none;
        }
 
    a:hover {
        color: #ffffff;
        text-decoration: underline;
        }
 
    p, td, blockquote {
            font-size: 11px;
        }
 
    code, kbd, pre, tt {
            font-family: monospace;
        }
 
    #content
    {
        width: 700px;
        margin-left: 350px; margin-right: auto;
        background-color: transparent;
        border-width: 0px;
        border-style: solid;
        border-color: #ffffff;
        padding: 15px;
    }
 
     #maincontent {
        margin-top: 15px;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        background-color: transparent;
        color: #ffffff;
        border-style: solid;
        border-color: #ffffff;
        border-width: 1px;
        margin-right: 180px;
        text-align: left;
        }
 
    #sidebar {
 
        padding-top: 15px;
        margin-top: 15px;
        background: #b46b11 url(http://i50.tinypic.com/xoirk6.jpg) no-repeat;
        border-color: #ffffff;
        border-width: 1px;
        border-style: solid;
          font-size: 11px;
        font-family: "Verdana", sans-serif;
          color: #ffffff;
        width: 160px;
        float: right;
        text-align: left;
        }
 
    #header {
        padding: 10px 0px 20px 0px;
        margin: 0px;
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
        border-style: solid;
        border-color: #ffffff;
        border-width: 1px;
        background-color: #transparent;
        color: #222222;
        }
 
    #footer {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        background-color: #transparent;
        color: #222222;
        border-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        z-index: 100;
        clear: both;
        }
 
    /* header -- links to views; title of journal; subtitle of journal */
 
    div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, 
 
div#footer a:visited {
        color: #790000;
    }
 
    div#header a:hover, div#footer a:hover {
        color: #ffffff;
        text-decoration: none;
    }
 
    ul.navheader
        {
        padding: 0px;
        margin: 0px;
        }
 
    ul.navheader li  {
        display: inline;
        padding: 0 3px 0 3px;
        }
 
    .title    {
        font-family: "Verdana", sans-serif;
        font-size: 20px;
        font-weight: normal;
        line-height: 200%;
        top: 10px;
        color: #ffffff;
        }
 
    .subtitle{
        font-family: "Verdana", sans-serif;
        font-size: 14px;
        font-weight: normal;
        top: 10px;
        color: #ffffff
        }
 
 
    /* sidebar */
 
    div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
        color: #790000;
    }
 
    div#sidebar a:hover {
        color: #f4ad55;
        text-decoration: none;
    }
 
    .defaultuserpic {
        text-align: center;
        }
 
    .sbarheader {
        padding: 0px 5px 0px 5px;
        }
 
    .sbarbody {
        padding: 0px 5px 0px 5px;
        }
 
    .sbarbody2 {
        padding: 0 15px 0 15px;
    }
 
    #sidebar_summary li.sbaritem {
        margin: 0 10px;
        padding: 3px 0;
        border-bottom: 1px #ffffff solid;
    }
 
    table.calendar {
        margin-right: auto;
        margin-left: auto;
        }
 
    .sbarcalendar {
        border-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        }
 
    .sbarcalendarposts {
        border-color:  #ffffff;
        border-width: 1px;
        border-style: solid;
        background-color: #f4ad55;
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        }
 
    ul.sbarlist
    {
        padding-left: 0px;
        margin-left: 0px;
        list-style: none;
    }
 
    li.sbaritem, .tagcloud
    {
        padding-left: 15px;
        list-style: none;
    }
 
    li.sbartitle
    {
        padding-left: 15px;
        list-style: none;
        border-style: solid;
        border-width: 0px;
        border-color: #ffffff;
        background-color: transparent;
        margin-bottom: 10px;
        margin-top: 60px;
    }
 
 
    /* maincontent */
 
    .subcontent {
    }
 
    .entry    {
        margin: 0px 10px 10px 10px;
        padding: 10px;
        background-color: #f4ad55;
        color: #ffffff;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        text-align: left;
        border-width: 0px;
        border-color: #ca5d00;
        border-style: solid;
        }
 
    .entry ul li
        {
        padding-left: 5px;
        margin-left: 15px;
        }
 
    .entry ol li
        {
        padding-left: 5px;
        margin-left: 15px;
        }
 
    .userpic {
        position: relative;
        float: left;
        background-color: #ca5d00;
        padding: 5px;
        margin: 10px;
        z-index: 15;
        border-width: 0px;
        border-color: transparent;
        border-style: solid;
        }
 
    .userpicfriends {
        position: relative;
        float: left;
        padding: 5px;
        margin: 10px;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        border-color: #ca5d00;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        z-index: 15;
        }
 
    .date {
        line-height: 100%;
        top: 5px;
        color: #ffffff;
        font-family: "Verdana", sans-serif;
        font-size: 8px;
 
        }
 
    .subject {
        font-weight: bold;
        padding: 5px;
        color: #ffffff;
        font-family: "Verdana", sans-serif;
        font-size: 14px;
        }
 
    .subject a, .subject a:link, .subject a:visited, .subject a:hover  {
       color: #ffffff;
        /*color: #ecd6b2;*/
       text-decoration: none;
        }
 
    /*.subject a:hover {
        color: #790000;
        }*/
 
    .datesubject {
        background-color: #ca5d00;
        padding: 5px;
        }
 
    .currents, .currentmood, .currentmusic {
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        }
 
    .comments {
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        text-align: right;
        background-color: #ca5d00;
        padding: 0px 5px 0px 5px;
        position: relative;
        top: 15px;
        }
 
    div.comments a, div.comments a:link, div.comments a:visited{
        color: #ecd6b2;
    }
 
    div.comments a:hover {
        color: #790000;
        text-decoration: none;
    }
 
 
    /* maincontent --  entry, reply pages */
 
    .datesubjectcomment {
            background-color: #ecd6b2;
            padding: 5px;
            margin-top: 20px;
            }
 
    .userpiccomment {
        position: relative;
        border-width: 5px;
        border-style: solid;
        border-color: #f4ad55;
        background-color: #f4ad55;
        top: -30px;
        left: 0px;
        padding: 5px;
        margin: 10px 10px -20px 10px;
        z-index: 15;
        float: left;
        border-width: 1px;
        border-color: #ca5d00;
        border-style: solid;
        }
 
    .box {
        border-style: solid;
        border-width: 1px 0px 0px 0px;
        border-color: #ffffff;
        padding: 10px;
        clear: left;
        }
 
    input, textarea {
        background-color: #f4ad55;
        color: #ffffff;
        }
 
    textarea.textbox  {
          width: 95% !important;
           }
 
    .reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        line-height: 125%;
        background-color: #f4ad55;
        color: #ffffff;
        }
 
    .replytosubject {
        font-weight: bold;
        }
 
 
    .commentreply {
        position: relative;
        margin: 10px;
        font-size: 11px;
        font-family: "Verdana", sans-serif;
        color: #ffffff;
        }
 
    .commentbox {
 
        border-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #f4ad55;
        }
 
    .datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #ecd6b2;
        }
 
    .datesubjectcomment a:hover {
        color: #790000;
        }
 
    .commentboxpartial {
        border-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #f4ad55;
        }
 
    .commentinfo {
        background-color: #222222;
        margin-top: 10px;
        width: 100%;
        }
 
 
 
    /* maincontent -- year/achive pages */
 
    ul.year {
        text-align: center;
        padding-bottom: 40px;
        }
 
    ul.year li {
        display: inline;
        }
 
    table.yeartable {
        margin-left: auto;
        margin-right: auto;
        }
 
    table.yeartable td.yeardate, table.yeartable td.yearday {
        border-width: 1px;
        border-style: solid;
        border-color: #ffffff;
        }
 
    table.yeartable td.yearday {
        background-color: #f4ad55;
        text-align: center;
        }
 
    td.yearmonth {
        border-style: none;
        }
 
 
    /* footer */
 
    ul.navfooter{
        padding: 0px;
        margin: 0px;
        }
 
    ul.navfooter li  {
        display: inline;
        margin: 0 5px 0 5px;
        }
 
 
    .clearfoot {
        clear: both;
        }
 
 
    /* misc  */
 
    .clear {
        height: 15px;
        }
 
    .skiplinks {
        text-align: center;
        }
 
    .headerimage {
        /* for formatting header image */
        }
 
    .separator{
        /* for formatting separators between entries */
        height: 5px;
    }
 
    * html div.subcontent {
        /* fixes an IE reply page bug */
        height: 1%;
        clear: none;
    }
 
    * html div.box#commentform {
        /* fixes an IE reply page bug */
        position: absolute;
        border-width: 1px;
        border-style: solid;
        border-color: #ffffff;
        background-color: #b46b11;
    }

т.е. код, который был указан в сообществе.
И вуаля, получаем тот стиль, который хотели.
На этом можно закончить, но, что делать, если вы хотите чтобы в стиле были задействованы именно ваши картинки?
Здесь тоже все просто.
Просматриваем текст кода и сразу видим в нем адреса изображений, например вот:
Изображение находится по адресу http://i45.tinypic.com/28qw2up.jpg
Проходим по ссылке и видим изображение:
Сохраняем его к себе, модифицируем как вам нужно, или рисуем свое, затем заливаем например на Яндекс-фотки, копируем ссылку на уже свою картинку и полученную ссылку вставляем в код вместо изначальной.

Теги: ЖЖ

Получать обновления блога по почте:

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

Есть 14 коммент. к “Как изменить стиль журнала”

Fantine

Май 26th, 2011 at 07:02

1

Wow! That’s a really neat aneswr!
Medick

Октябрь 12th, 2011 at 21:36

2

не плохо….не плохо…ну думаю будет ещё лучше!!!
Ivan

Октябрь 13th, 2011 at 04:45

3

У вас замечательный сайт.
buy cheap oem software

Февраль 12th, 2012 at 14:50

4

7B56Rk A unique note..!
- Tanveer
  
  Август 8th, 2012 at 07:08
  
  5
  
  Stellar work there evreynoe. I’ll keep on reading.
- Paula
  
  Август 10th, 2012 at 04:43
  
  6
  
  Never seen a betetr post! ICOCBW
cost of viagra

Март 2nd, 2012 at 15:58

7

overdrawn dauphin splay brawley depravity degree deicide warning mesterbein
Sheryl Farwell

Сентябрь 27th, 2012 at 02:13

8

You’re so interesting! I do not think I’ve truly read through something like this before. So wonderful to discover another person with some original thoughts on this issue. Seriously.. many thanks for starting this up. This site is one thing that is needed on the internet, someone with some originality!
Nike TN Pas Cher

Ноябрь 14th, 2012 at 10:08

9

At money the associates recognize america; present in adversity we all know the associates.
cheap mulberry purses

Ноябрь 16th, 2012 at 06:53

10

If you’d like any kind of account statement for your value, quantity online friends.
louis vuitton schuhe

Ноябрь 20th, 2012 at 17:08

11

An actual coworker is just who exactly overlooks ones deficiencies not to mention can handle ones successes.
ugg uk

Ноябрь 21st, 2012 at 22:31

12

A colleague which you simply pay money for that has offers can be purchased in most people.
hollister shop

Декабрь 8th, 2012 at 15:57

13

Yes, 1900.
cheap moncler jackets

Декабрь 20th, 2012 at 16:24

14

Dome to do its threat assessment, triangulate, and launch.Btw, the «Israelis» are notoriously good at forgetting about where their interceptors might land.