Доопрацювання шаблону для wp напилком, рецепти для дівчаток
Парочка рецептів про те як зробити гумовий шаблон WP з Нерезіновую і ще трошки змінити його під свій смак. Рецепти для дівчаток, так як хлопчики все це і так знають.
Вирішила повернуться в цей блог, сподіваюся надовго)
Однак, коли я відкрила його в браузері, з'ясувалося, що мало того, що наявний шаблон дизайну мені вже не подобається (ну ось така я непостійна, так), так до того ж половина шаблону кудись загубилася. Чорт його знає, я над цим блогом чортову хмару експериментів ставила, поки з Вордпресс розбиралася. А лагодити лінь. У мене взагалі такий безглуздий характер - непосидючий. Я або роблю справу за один ривок (нехай навіть кілька діб з перервами на впасти поспати) або не роблю взагалі. Всякі правки, доопрацювання і вже тим більше «щодня витрачайте на це 15 хвилин і всього через 3 місяці ...» - це не про мене, на жаль.
Значить - однозначно йти в мережу за новим шаблоном. Чому я, як дизайнер, не малюю собі шаблон сама? Тому що, по-перше, я намагаюся постійно розвиватися, по-друге, верстати вмію струму html + css, а шаблони для ЦМС-ок поки немає. Де логіка? Мені стабільно не подобається дізи, які я робила два-три місяці тому, а виготовлення шаблону мені доведеться віддавати на аутсорс, а це грошик, а як тільки диз перестане мені подобається - ще грошик. ну її - таку дірку в кишені) Та й самостійно переробивши шаблон під себе я дізнаюся про сайтоделаніі більше, ніж віддавши цю роботу комусь.
Так ось, крок перший - гугл «шаблони WP» або йдемо на улюблений сайтик з темами. Не знаю як вам, мені сподобався один шаблон з, здається, декількох сотень знайдених (Shes-got-style, до речі). Окей, качаю, ставлю, відкриваю блог і. лякаюся. Я звичайно в процесі пошуку Новомосковскла про те, що в рунеті мало гумових шкурок на WP (чому, до речі,% поставити складніше, ніж px?), Та й Нерезіновую диз мене б теж влаштував, але тут під пости виявилося відведено (!) 300 пікселів. Текст, відповідно був донезмоги дрібним і нечитабельним. Справа, особисто у мене, виявилося пів екрану білого простору. Я розумію, велика картинка, підтримка користувачів зі старими моніторами. але не настільки ж). Самий логічний крок - викинути цю тему і йти шукати наступну, але я ж вже писала, що всі інші мені не подобаються.
а на превью все нормально)
Значить - будемо допрацьовувати цей. Проблема раз - роблю шаблон гумовим:
Відкриваю style.css (хто не в курсі - цсскі задають зовнішній вигляд сайтик: шрифти, кольори, межі, розміри об'єктів і ін.) Знаходжу такі рядки:
Міняю противні 300 px на 100%. (Відступ від лівого краю, щоб текст не налазив на картинку там заданий окремо властивістю margin, про це зараз можна не думати). Оновлюю сторінку - все вірно, текст зайняв 100% ширини, бічна колонка з меню у мене тепер під постами - непорядок. Напевно треба залишити меню теж трошки місця) А меню то у мене не гумове - йому треба залишити точну кількість пікселів. В результаті роблю ось так:
#content margin-right: 210px>
Все б нічого, але, хоча справа дірка для меню і з'явилася, воно все одно їде вниз. Та ще й «приклеюється» до правого краю - в оригіналі то там велика біла поле було. Пригадую що CSS влаштований послідовно, тобто спочатку малюється контент, а потім, щодо нього - меню, тобто справа-знизу від правого нижнього кута попереднього елемента. Це властивість position: relative, воно у них всіх за замовчуванням. Міняю на absolute (тобто щодо екрану а не інших елементів) і задаю йому невелике поле зліва:
#menu right: 20px;
width: 184px;
position: absolute;>
До речі, якщо задати position: fixed, то меню буде їздити за користувачем при прокручуванні сторінки, що досить забавно і зручно. Але у мене вся бічна колонка не влізла в один екран, тому хай висить зверху.
Ну і наостанок я поміняла кольори і властивості текстів, на ті, які мені подобаються. Це, до речі, дуже просто:
(Рецепт для дівчаток =) По-перше, шукаємо потрібну частину коду за кольором і розміром, Новомосковський код навколо знайдених значень (у одного сайтику зазвичай не так вже й багато різних квітів текстів, так що результатів пошуку буде кілька). Якщо не виходить - по черзі ставимо різних текстів, наприклад, червоний колір і перебором знаходимо потрібне. Мікроскопом цвяхи, але працює)
У тексту буває кілька основних властивостей (те що не потрібно, можна не вказувати, буде за замовчуванням):
font-family: tahoma; шрифт, точніше його сімейство. змінювати варто тільки на стандартні, чому - тема для окремого посту.
font-weight: bold; жирність (normal / bold / bolder / lighter)
font-size: 12px; розмір, буває в пікселях, пунктах, емах і ще багато в чому.
color: # 5E2200; колір. страшний номер можна підглянути наприклад в шопі, в палітрі, під значеннями G, G, і B.
text-align: right вирівнювання. як в ворде - left, right, center і justify.
До речі, нормальний варіант цієї теми (гумовий, з розміром шрифту як у мене і без інших багів, про які в следующе пості) я можу безкоштовно вислати будь-якого передплатнику на емейл, міняю на письмову подяку в блозі, звертайтеся.