Як змінити стиль журналу в DW (докладна інструкція)

[gvynt]

http://gvynt.dreamwidth.org/64401.html

Коли я з ЖЖ перейшов на Dreamwidth, то відчув, що користуватися стандартними дизайнами журналу мені не дуже комфортно, м'яко кажучи. Тож я вирішив на базі одного з існуючих стандартних дизайнів створити щось звичне.

За основу було обрано шаблон під назвою Purple Love (автор ninetydegrees). На те є дві причини: по-перше, він пропорційно зменшує фотографії в тексті при зменшенні вікна браузера, а по-друге, він має хмарку тегів. Такі переваги мають небагато стандартних дизайнів, а займатись повноцінним програмуванням ми сьогодні не будемо (і завтра теж, бо не вміємо). 

Нижче описаний спосіб перетворити цей шаблон на щось таке: http://gvynt.dreamwidth.org/64401.html#cutid1 . Якщо ж ви хочете створити свій унікальний дизайн, то зможете використати для цього досвід, що здобудете сьогодні.

Рекомендую відкрити в одному вікні браузера сторінку з налаштуваннями, а в іншому - сторінку з вашим журналом. Після збереження кожної зміни ви можете оновити сторінку журналу та подивитися на результат. Завжди є можливість скасувати усі зміни дизайну, вибравши стандартний шаблон заново (докладніше буде нижче).

Почнемо. Натискаємо кнопочку Settings (на горі сторінки), потрапляємо на сторінку з налаштуваннями. Там тиснемо на journal style.







Тут нам пропонують багато красивих шкурок, але ми не дозволяємо емоціям взяти гору, і у полі пошуку твердою рукою вбиваємо назву лише одного дизайну - Purple Love. Знайшовши його, тиснемо кнопочку Apply Theme:





Наш журнал набув нового вигляду, але нас вже не спинити. Тиснемо Customize your theme (чи просто Customize), як показано на картинці:





Бачимо велике поле Customize Your Theme. Тут ми і будемо змінювати наш дизайн. До речі, не раджу робити це перед сном, бо попереду чимало монотонної кропіткої роботи (нічого важкого, але втомитися можна). Якщо не вірете, то наливайте собі чаю чи кави, і вперед.

Presentation - перший пункт, що нас цікавить. Натискаємо expand all ("розкрити все"), щоб впевнитись, що від нас не сховався жодний рядок таблиці. А потім робимо у себе все так само, як показано на картинці - усі ті галиці, позначки, цифри та літери. Наприкінці не забудьте натиснути кнопочку Save Changes, щоб зберегти результат! Це потрібно робити після кожного з етапів, що будуть нижче.





Colors - другий пункт. Тут ми встановлюємо всі кольори нашого журналу - і текстів, і тла, і елементів. Хто має Фотошоп і вміє визначати код кольору, той щасливчик. Хто не вміє - не біда, можна знайти колір "методом тику", змінюючи цифри та літери. Я використав звичні для себе кольори.




Fonts - тут ми встановлюємо назву шрифтів та їх розміри. Розмір, що дорівнює нулю, означає, що цей текстовий елемент не буде відображено у журналі. Тож якщо раптом якийсь напис вас дратує - знищуйте його за методом Кєрнєса Генадія Адольфовіча.




Images - тут я нічого не робив. Але якщо хтось захоче додати картинку на "капелюшок" свого журналу, або на його тло, то він може зробити це саме тут.

Modules - це модулі, тобто ті блоки, з яких складається ваш журнал: хмаринка тегів, ім'я автора дизайну та все таке інше. Якщо галиця навпроти стоїть, то модуль буде існувати. Якщо ні - він буде прихований. Наприклад, я зняв галички навпроти тих модулів, якими ніколи не користуюсь. Число навпроти модуля - це його порядковий номер, тобто циферками ви регулюєте черговість розташування модулів: що за чим стоїть, що вище, а що нижче.




Text - тут можна деякою мірою українізувати інтерфейс. Якщо у віконці ви не пишите нічого, то цей елемент буде прихованим (як у випадку з пунктом меню Tags у наведеному прикладі):



Custom CSS - незважаючи на всі попередні "фінти вухами", залишався певний дискомфорт. Настільки, що я звернувся до знайомої розробниці сайтів, та й вмовив її приділити хвильку уваги. Ця хвилька вилилася у такі зворушливі рядки, сповнені натхненням і глибоким ліризмом:

#header {
margin-bottom:0;
padding:1em 0 0 1.5em;
}
#header-footer {
display:none;
}
#header .module-wrapper, #footer .module-wrapper {
float: right;
margin-top: 1em;
}
.entry .poster {
font: 0.85em 'Arial Narrow', 'Arial', sans-serif;
font-weight:normal;
font-style:italic;
}
.entry-title a {
text-decoration:none;
}
.navigation .page-back a:before,
.navigation .page-forward a:after {
content: "" !important;
}
.navigation .page-back a,
.navigation .page-forward a {
float:right;
width:80px;
height:18px;
overflow:hidden;
background: url("http://i30.photobucket.com/albums/c321/gvynt/gvynt_blog/poperedni_button_zps5461e877.png") no-repeat;
text-indent:-9999px;
}
.navigation .page-forward a {
background: url("http://i30.photobucket.com/albums/c321/gvynt/gvynt_blog/nastupni_button_zps2ab83dab.png") no-repeat;
}
.navigation {
overflow: hidden;
}
.topnav ul {
float: right;
margin-bottom: 0;
overflow: hidden;
padding: 0;
}
.navigation ul li {
float: left;
list-style: none;
margin: 0 0 7px 6px;
padding: 0;
}
.navigation a:hover {
text-indent:-9999px;
}
.module a {
text-decoration:none;
}
.module-userprofile h2,
.module-syndicate h2,
.module-tags_cloud h2,
.module-credit h2 {
display:none;
}
.module-content .journal-name {
width:100px;
text-align:center;
}
.module-credit * {
font-size:0.95em;
}
.entry .footer ul.entry-interaction-links,
.comment .footer ul.comment-interaction-links {
text-align:center;
}
.entry .footer ul.entry-interaction-links a,
.comment .footer ul.comment-interaction-links a {
text-decoration:none;
font-size:1.2em;
padding: 0 11px;
}
.entry .footer .text-links li:after,
.comment .footer .text-links li:after {
content: " |";
}
.datetime a {
text-decoration:none;
}
.bottomnav ul {
margin:0;
float:right;
overflow:hidden;
padding:0;
}

Тож нам з вами, любі друзі, лишається тільки схилити голови, змахнути світлу сльозу і скопіювати цей код у поле Use embedded CSS, не забувши вкотре натиснути кнопочку Save Changes (код, звичайно, free software, і ви можете його використовувати та модифікувати. Автор не несе жодної відповідальності за наслідки). Вуаля!

Comments

[tiresome_cat]

Ааааа... А вот как раз нераскрытое в посте "Images" и есть самое заковыристое. Я так и не смог "вкурить" идеологию их установки/настройки/масштабирования в той теме, которую выбрал себе для настройки. Жуткий хардкор :(

[gvynt]

Яку саме тему ви обрали?

За стандартом, у розділі "Images" просто посилання на картинку, яку ви хочете розмістити на тлі всього сайту, заголовку, модуля чи статті. Та вишина заголовку, у пікселях.