Сам сабе дызайнэр, або як зьмяніць дызайн ЖЧ
У маім папярэднім дызайне ЖЧ мне вельмі не падабалася тое, што цэтлікі былі ў самым нізе старонкі. Не падабалася - аднак я не знаходзіла часу, каб нешта зьмяніць. І вось выпадкова даведалася, што можна самастойна зрабіць свой блог такім, як хочацца. Няўжо? А я была ўпэўненая, што гэта магчыма толькі для платных акаўнтаў…
Ну калі так, дык я заўжды з радасьцю! Нават час знайшла, бо хацелася парадаваць сябе. Я разумею, што зьмест у сто разоў важнейшы за выгляд (гэта ўва ўсім: у людзях, у кнігах, у цукерках і г.д.), аднак прага мець прыгожы блог прымусіла мяне прысьвяціць ледзь ня цэлы дзень вывучэньню кодаў. І я зрабіла сабе старонку, якая мне падабаецца!
А цяпер я магу навучыць іншых, як зрабіць сваю старонку ЖЧ на свой густ, зусім не разьбіраючыся ў праграмаваньні. Хаця калі хто хоча грунтоўна папрацаваць з кодамі - калі ласка, вам сюды - тут усё растлумачана так, што зразумела будзе нават гуманітарнікам. Але вывучэньне асноваў праграмаваньня зойме значна больш часу, чым калі проста кіравацца гатовымі пакрокавымі інструкцыямі, дзе разьбірацца ні ў чым ня трэба. Я сама лепш скарысталася б гатовымі інструкцыямі, чым некалькі гадзін вывучаць тое, што, хутчэй за ўсё, больш ніколі не спатрэбіцца (ну хіба калі хто-небудзь захоча замовіць мне распрацоўку дызайну за грошы :)) Аднак давялося самой пісаць гэтую пакрокавую інструкцыю - каб маглі карыстацца ўсе, каму трэба.
Пачнем?
А. Спачатку трэба выбраць сабе стыль, фон і колеры, якія будуць ужывацца ў часопісе.
1. Выбіраем не гатовы дызайн, які нам прапаноўвае ЖЧ, а выбіраем стыль у генэратары дызайнаў - каб атрымаць код, бо ЖЧ коду не паказвае і мы ня зможам у ім штосьці мяняць.
Выбраўшы стыль, націскаем яго і атрымліваем код. Ніякіх палёў не запаўняйце - усё патрэбнае мы зробім пазьней, зьмяняючы код. Што рабіць далей з атрыманым кодам (як яго ўставіць на сваю старонку, каб ён пачаў працаваць), вельмі падрабязна патлумачана тут. Калі ўставіце код у Custom CSS, не зачыняйце гэтую старонку: менавіта тут вы будзеце працаваць з кодам.
2. Што да агульнага фону, дык ёсьць тры варыянты: 1) можна скампанаваць фон самім - гэта можа быць любая невялікая выява; 2) можна выбраць фон і наладзіць яго на свой густ у генэратары фонаў; 3) можна замест выявы проста заліць фон упадабаным колерам. Калі вы выбралі адзін з двух першых варыянтаў - вам трэба будзе запампаваць выяву сабе ў галерэю ЖЧ ці ў іншае месца ў інтэрнэце, дзе захоўваеце выявы. Калі вы хочаце проста заліць фон упадабаным колерам (варынят 3), выбіраем колеры тут.
3. Акрамя агульнага фону, на той самай старонцы з табліцай колераў трэба выбраць колеры фону для шапкі і фону для тэкстаў. Можна асобна падабраць колер і для камэнтароў, і для цэлікаў - гэта калі вам падабаецца рознакаляровасьць.
4. Дадатковы пункт для тых, хто захоча зьмясьціць у шапцы блогу сваю выяву - гэта можа быць і асобны фотаздымак ці малюнак, і калаж. Калаж зручна рабіць тут. Гатовую выяву абавязкова трэба запампаваць сабе ў галерэю ЖЧ ці ў іншае месца ў інтэрнэце, дзе захоўваеце выявы.
Б. Далей працуем з кодам. Пры гэтым пасьля выкананьня кожнага пункту правяраем, што атрымліваецца: захоўваем зьмяненьні, абнаўляем сваю старонку і правяраем вынік зьмяненьняў. Калі гэтага не рабіць, мы не зразумеем, на якім этапе зрабілі памылку, і адпаведна пошук памылкі зацягнецца на доўгі час.
1. Каб зьмяніць агульны фон блогу, заходзім у першы блок
body{
Тут залежна ад таго, ці мы заменім толькі колер фону або заменім выяву фону, працуем з рознымі камандамі.
Каб зьмяніць колер фону, устаўляем код колеру:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
Каб замяніць выяву фону, устаўляем свой адрас выявы для фону:
background-image: url(УСТАЎЦЕ АДРАС ВЫЯВЫ ДЛЯ ФОНУ);
2. Каб зьмяніць колер для тэкставага поля свайго блогу, знаходзім блок
div.post-asset{
і пазначаем колер, у якім мы хочам бачыць тэкставае поле блогу:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
3. Каб зьмяніць колер для тэкставага поля камэнтароў, знаходзім блок
div#comments{
і пазначаем колер, у якім мы хочам бачыць тэкставае поле камэнтароў:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
4. Каб зьмяніць колер для тэкставага поля цэтлікаў, знаходзім блок
.lj-view-tags #alpha-inner
і пазначаем колер, у якім мы хочам бачыць поле цэтлікаў:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
5. Каб зьмяніць шапку блогу, ідзем у
/*----TOPMENU----*/
Тут мы можам павялічыць ці паменшыць вышыню шапкі. Калі мы ўстаўляем сваю выяву, тады абавязкова давядзецца мяняць вышыню шапкі, каб падагнаць яе да памераў выявы.
Калі вы не будзеце замяняць галоўную выяву, тады пункты 6-8 можна прапусьціць. Але пункты 7-8 усё роўна спатрэбяцца, калі захочацца зьмяніць вышыню шапкі.
Каб зьмяніць колер фону для шапкі (гэты самы фон будзе пад выявай), заходзім у блок шапкі
#header-photo{
і пазначаем колер, у якім мы хочам бачыць фон для шапкі:
background-color: #УСТАЎЦЕ НУМАР;
6. Каб замяніць галоўную выяву, заходзім у блок
#header-photo-inner{
і ўстаўляем адрас сваёй выявы:
background-image: url(АДРАС ВЫЯВЫ ДЛЯ ШАПКІ);
У гэтым самым блоку пазначаем вышыню нашай выявы:
height: 250px !important;
Тут стаіць вышыня 250 пікселяў. Калі гэтае значэньне меншае за вышыню вашай выявы, то выява стане ў шапку ў абрэзаным выглядзе. Рэгулюйце вышыню самі.
7. Каб зьмяніць вышыню фону для шапкі, заходзім у блок
#header-photo{
і пазначаем вышыню фону для шапкі (фон пад выявай):
height: 280px !important;
Тут стаіць вышыня фону 280 пікселяў. Калі вышыня вашай выявы большая за гэтае значэньне, то выява закрые сабой фон і стане ў абрэзаным выглядзе, таму гэтае значэньне абавязкова трэба павялічыць.
Каб атрымаць патрэбную вышыню фону для выявы, дададзім да вышыні нашай выявы 20-30 пікселяў. Напрыклад, у маім дызайне вышыня фону на 30 пікселяў большая за вышыню выявы - 10 пікселяў зьверху выявы і 20 зьнізу, дзе стаяць пункты мэню. Магчыма, вам захочацца зрабіць меншы памер фону ці, наадварот, большы. Экспэрымэнтуйце.
Для даведкі: візуальна на вялікім маніторы 1 піксель адпавядае 1 мм.
8. Калі мы замянілі выяву, неабходна адкарэктаваць вышыню ўсёй шапкі. Вяртаемся ўверх да
/*----TOPMENU----*/
У двух першых блоках
div#header{
і
div#header-inner{
выстаўляем патрэбныя значэньні вышыні для ўсёй шапкі, разам з загалоўкам. Не забываймася на вышыню сваёй выявы плюс дабаўлены фон плюс вышыня літараў загалоўка.
У гатовым кодзе стаіць вышыня шапкі
height: 368.5px;
Калі трэба зрабіць большую шапку, тады павялічваем 368,5 на патрэбнае значэньне. Памятаем пры гэтым, што на вялікім маніторы 1 піксель адпавядае 1 мм.
9. Калі ў нас зьехалі пункты мэню (а яны зьехалі, калі мы замянілі вышыню выявы і адпаведна вышыню шапкі), то трэба падцягнуць іх на патрэбнае месца. Зробім гэта ў блоку
ul.nav{
з дапамогай каманды
top: 320.5px;
Калі спасылкі мэню зьехалі ўверх на выяву, то значэньне top трэба павялічыць, калі ўніз - паменшыць. Экспэрымэнтуйце.
10. Не забываймася правяраць, што атрымліваецца! Мне, напрыклад, не спадабалася тое, што загаловак быў прыліплы да фону выявы. Можна прыпадняць яго ў блоку
div#header-name{
з дапамогай каманды
top: -2px;
Чым большае значэньне мы ўкажам, тым вышэй будзе разьмешчаны надпіс. Калі ж мы хочам, каб надпіс стаяў прама на выяве ці хаця б троху чапляў яе, трэба прыбраць знак “мінус” і папрацаваць зь лічбамі: чым большыя значэньні - тым далей ад цяперашняй пазыцыі.
У гэтым самым блоку можна зьмяніць стыль загалоўка. Каб зрабіць нахілены надпіс, уставім тут каманду
font-style: italic;
Калі геамэтрычна ўсё атрымалася як хацелася, папрацуем далей з колерамі надпісаў.
11. Каб зьмяніць колер загалоўка, заходзім у блок
#page div#header-name a
і пазначаем колер, у якім мы хочам бачыць загаловак блогу:
color: #УСТАЎЦЕ КОД КОЛЕРУ;
У гэтым самым блоку можна зьмяніць шрыфт і напісаньне загалоўка. Шрыфт мяняем з дапамогай каманды
font-family: УСТАЎЦЕ НАЗВУ ШРЫФТУ;
Каб зрабіць тлусты надпіс, скарыстаем каманду
font-weight: bold;
Каб зьмяніць кегль шрыфту, скарыстаем каманду
font-size: 45px;
Замест 45 устаўце патрэбную велічыню.
12. Каб зьмяніць колер спасылак мэню, заходзім у блок
#page .nav .item a{
і пазначаем колер, у якім мы хочам бачыць пункты мэню:
color: #УСТАЎЦЕ КОД КОЛЕРУ;
Гэтая каманда пафарбуе ўсе пункты мэню, акрамя аднаго - “Апошнія запісы”. Каб пафарбаваць і яго, заходзім у блок
#page .nav .current a
і пазначаем колер, у якім мы хочам бачыць спасылку “Апошнія запісы”:
color: #УСТАЎЦЕ КОД КОЛЕРУ;
Посьпехаў! Калі што не атрымліваецца - зьвяртайцеся з дакладным апісаньнем праблемы, паспрабуем разабрацца разам. Ну і калі што незразумела - пытайцеся таксама.
Ну калі так, дык я заўжды з радасьцю! Нават час знайшла, бо хацелася парадаваць сябе. Я разумею, што зьмест у сто разоў важнейшы за выгляд (гэта ўва ўсім: у людзях, у кнігах, у цукерках і г.д.), аднак прага мець прыгожы блог прымусіла мяне прысьвяціць ледзь ня цэлы дзень вывучэньню кодаў. І я зрабіла сабе старонку, якая мне падабаецца!
А цяпер я магу навучыць іншых, як зрабіць сваю старонку ЖЧ на свой густ, зусім не разьбіраючыся ў праграмаваньні. Хаця калі хто хоча грунтоўна папрацаваць з кодамі - калі ласка, вам сюды - тут усё растлумачана так, што зразумела будзе нават гуманітарнікам. Але вывучэньне асноваў праграмаваньня зойме значна больш часу, чым калі проста кіравацца гатовымі пакрокавымі інструкцыямі, дзе разьбірацца ні ў чым ня трэба. Я сама лепш скарысталася б гатовымі інструкцыямі, чым некалькі гадзін вывучаць тое, што, хутчэй за ўсё, больш ніколі не спатрэбіцца (ну хіба калі хто-небудзь захоча замовіць мне распрацоўку дызайну за грошы :)) Аднак давялося самой пісаць гэтую пакрокавую інструкцыю - каб маглі карыстацца ўсе, каму трэба.
Пачнем?
А. Спачатку трэба выбраць сабе стыль, фон і колеры, якія будуць ужывацца ў часопісе.
1. Выбіраем не гатовы дызайн, які нам прапаноўвае ЖЧ, а выбіраем стыль у генэратары дызайнаў - каб атрымаць код, бо ЖЧ коду не паказвае і мы ня зможам у ім штосьці мяняць.
Выбраўшы стыль, націскаем яго і атрымліваем код. Ніякіх палёў не запаўняйце - усё патрэбнае мы зробім пазьней, зьмяняючы код. Што рабіць далей з атрыманым кодам (як яго ўставіць на сваю старонку, каб ён пачаў працаваць), вельмі падрабязна патлумачана тут. Калі ўставіце код у Custom CSS, не зачыняйце гэтую старонку: менавіта тут вы будзеце працаваць з кодам.
2. Што да агульнага фону, дык ёсьць тры варыянты: 1) можна скампанаваць фон самім - гэта можа быць любая невялікая выява; 2) можна выбраць фон і наладзіць яго на свой густ у генэратары фонаў; 3) можна замест выявы проста заліць фон упадабаным колерам. Калі вы выбралі адзін з двух першых варыянтаў - вам трэба будзе запампаваць выяву сабе ў галерэю ЖЧ ці ў іншае месца ў інтэрнэце, дзе захоўваеце выявы. Калі вы хочаце проста заліць фон упадабаным колерам (варынят 3), выбіраем колеры тут.
3. Акрамя агульнага фону, на той самай старонцы з табліцай колераў трэба выбраць колеры фону для шапкі і фону для тэкстаў. Можна асобна падабраць колер і для камэнтароў, і для цэлікаў - гэта калі вам падабаецца рознакаляровасьць.
4. Дадатковы пункт для тых, хто захоча зьмясьціць у шапцы блогу сваю выяву - гэта можа быць і асобны фотаздымак ці малюнак, і калаж. Калаж зручна рабіць тут. Гатовую выяву абавязкова трэба запампаваць сабе ў галерэю ЖЧ ці ў іншае месца ў інтэрнэце, дзе захоўваеце выявы.
Б. Далей працуем з кодам. Пры гэтым пасьля выкананьня кожнага пункту правяраем, што атрымліваецца: захоўваем зьмяненьні, абнаўляем сваю старонку і правяраем вынік зьмяненьняў. Калі гэтага не рабіць, мы не зразумеем, на якім этапе зрабілі памылку, і адпаведна пошук памылкі зацягнецца на доўгі час.
1. Каб зьмяніць агульны фон блогу, заходзім у першы блок
body{
Тут залежна ад таго, ці мы заменім толькі колер фону або заменім выяву фону, працуем з рознымі камандамі.
Каб зьмяніць колер фону, устаўляем код колеру:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
Каб замяніць выяву фону, устаўляем свой адрас выявы для фону:
background-image: url(УСТАЎЦЕ АДРАС ВЫЯВЫ ДЛЯ ФОНУ);
2. Каб зьмяніць колер для тэкставага поля свайго блогу, знаходзім блок
div.post-asset{
і пазначаем колер, у якім мы хочам бачыць тэкставае поле блогу:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
3. Каб зьмяніць колер для тэкставага поля камэнтароў, знаходзім блок
div#comments{
і пазначаем колер, у якім мы хочам бачыць тэкставае поле камэнтароў:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
4. Каб зьмяніць колер для тэкставага поля цэтлікаў, знаходзім блок
.lj-view-tags #alpha-inner
і пазначаем колер, у якім мы хочам бачыць поле цэтлікаў:
background-color: #УСТАЎЦЕ КОД КОЛЕРУ;
5. Каб зьмяніць шапку блогу, ідзем у
/*----TOPMENU----*/
Тут мы можам павялічыць ці паменшыць вышыню шапкі. Калі мы ўстаўляем сваю выяву, тады абавязкова давядзецца мяняць вышыню шапкі, каб падагнаць яе да памераў выявы.
Калі вы не будзеце замяняць галоўную выяву, тады пункты 6-8 можна прапусьціць. Але пункты 7-8 усё роўна спатрэбяцца, калі захочацца зьмяніць вышыню шапкі.
Каб зьмяніць колер фону для шапкі (гэты самы фон будзе пад выявай), заходзім у блок шапкі
#header-photo{
і пазначаем колер, у якім мы хочам бачыць фон для шапкі:
background-color: #УСТАЎЦЕ НУМАР;
6. Каб замяніць галоўную выяву, заходзім у блок
#header-photo-inner{
і ўстаўляем адрас сваёй выявы:
background-image: url(АДРАС ВЫЯВЫ ДЛЯ ШАПКІ);
У гэтым самым блоку пазначаем вышыню нашай выявы:
height: 250px !important;
Тут стаіць вышыня 250 пікселяў. Калі гэтае значэньне меншае за вышыню вашай выявы, то выява стане ў шапку ў абрэзаным выглядзе. Рэгулюйце вышыню самі.
7. Каб зьмяніць вышыню фону для шапкі, заходзім у блок
#header-photo{
і пазначаем вышыню фону для шапкі (фон пад выявай):
height: 280px !important;
Тут стаіць вышыня фону 280 пікселяў. Калі вышыня вашай выявы большая за гэтае значэньне, то выява закрые сабой фон і стане ў абрэзаным выглядзе, таму гэтае значэньне абавязкова трэба павялічыць.
Каб атрымаць патрэбную вышыню фону для выявы, дададзім да вышыні нашай выявы 20-30 пікселяў. Напрыклад, у маім дызайне вышыня фону на 30 пікселяў большая за вышыню выявы - 10 пікселяў зьверху выявы і 20 зьнізу, дзе стаяць пункты мэню. Магчыма, вам захочацца зрабіць меншы памер фону ці, наадварот, большы. Экспэрымэнтуйце.
Для даведкі: візуальна на вялікім маніторы 1 піксель адпавядае 1 мм.
8. Калі мы замянілі выяву, неабходна адкарэктаваць вышыню ўсёй шапкі. Вяртаемся ўверх да
/*----TOPMENU----*/
У двух першых блоках
div#header{
і
div#header-inner{
выстаўляем патрэбныя значэньні вышыні для ўсёй шапкі, разам з загалоўкам. Не забываймася на вышыню сваёй выявы плюс дабаўлены фон плюс вышыня літараў загалоўка.
У гатовым кодзе стаіць вышыня шапкі
height: 368.5px;
Калі трэба зрабіць большую шапку, тады павялічваем 368,5 на патрэбнае значэньне. Памятаем пры гэтым, што на вялікім маніторы 1 піксель адпавядае 1 мм.
9. Калі ў нас зьехалі пункты мэню (а яны зьехалі, калі мы замянілі вышыню выявы і адпаведна вышыню шапкі), то трэба падцягнуць іх на патрэбнае месца. Зробім гэта ў блоку
ul.nav{
з дапамогай каманды
top: 320.5px;
Калі спасылкі мэню зьехалі ўверх на выяву, то значэньне top трэба павялічыць, калі ўніз - паменшыць. Экспэрымэнтуйце.
10. Не забываймася правяраць, што атрымліваецца! Мне, напрыклад, не спадабалася тое, што загаловак быў прыліплы да фону выявы. Можна прыпадняць яго ў блоку
div#header-name{
з дапамогай каманды
top: -2px;
Чым большае значэньне мы ўкажам, тым вышэй будзе разьмешчаны надпіс. Калі ж мы хочам, каб надпіс стаяў прама на выяве ці хаця б троху чапляў яе, трэба прыбраць знак “мінус” і папрацаваць зь лічбамі: чым большыя значэньні - тым далей ад цяперашняй пазыцыі.
У гэтым самым блоку можна зьмяніць стыль загалоўка. Каб зрабіць нахілены надпіс, уставім тут каманду
font-style: italic;
Калі геамэтрычна ўсё атрымалася як хацелася, папрацуем далей з колерамі надпісаў.
11. Каб зьмяніць колер загалоўка, заходзім у блок
#page div#header-name a
і пазначаем колер, у якім мы хочам бачыць загаловак блогу:
color: #УСТАЎЦЕ КОД КОЛЕРУ;
У гэтым самым блоку можна зьмяніць шрыфт і напісаньне загалоўка. Шрыфт мяняем з дапамогай каманды
font-family: УСТАЎЦЕ НАЗВУ ШРЫФТУ;
Каб зрабіць тлусты надпіс, скарыстаем каманду
font-weight: bold;
Каб зьмяніць кегль шрыфту, скарыстаем каманду
font-size: 45px;
Замест 45 устаўце патрэбную велічыню.
12. Каб зьмяніць колер спасылак мэню, заходзім у блок
#page .nav .item a{
і пазначаем колер, у якім мы хочам бачыць пункты мэню:
color: #УСТАЎЦЕ КОД КОЛЕРУ;
Гэтая каманда пафарбуе ўсе пункты мэню, акрамя аднаго - “Апошнія запісы”. Каб пафарбаваць і яго, заходзім у блок
#page .nav .current a
і пазначаем колер, у якім мы хочам бачыць спасылку “Апошнія запісы”:
color: #УСТАЎЦЕ КОД КОЛЕРУ;
Посьпехаў! Калі што не атрымліваецца - зьвяртайцеся з дакладным апісаньнем праблемы, паспрабуем разабрацца разам. Ну і калі што незразумела - пытайцеся таксама.