Редагуємо профіль автора

В наших блогах з’явився новий блок — «Про автора». І звісно, він також потребує дизайнерської уваги 🙂 В залежності від шаблона цей блок може по різному розміщуватися у вузькій шпальті та мати різні шрифти і кольори. За цей блок відповідають такі селектори: 

BlogAuthorsBox — сам блок 
BlogAuthorsTitle — напис «Про автора»
BlogAuthorsBox li — лінк на профіль автора блога

Пропоную обрати один з трьох варіантів дизайну блока:

Мінімалістичний

Якщо ви не хочете привертати особливу увагу користувачів до цього блока, але вам хочеться його трохи «причесати», цей варіант для вас.

 

В цьому варіанті було б гарно вирівняти блок.

1. Заходимо в CSS блога, шукаємо вищенаведені селектори. Видаляємо їх всі з CSS’у та прописуємо таким чином:

#BlogAuthorsBox {}
#BlogAuthorsBox li {}
#BlogAuthorsTitle {}


2. Заповнюємо селектори потрібним вам кодом. Як приклад, надаю код з вищенаведеного малюнка:

#BlogAuthorsBox {
background-color:#EFEFEF; /*Прописуємо колір фону блока*/
border:1px solid #AAAAAA; /*Прописуємо рамки блока*/
padding-top:10px; /*Прописуємо розташування блока у вузькій шпальті; в моєму прикладі блок зміщено на 10 пікселів вниз від попереднього блока, що над ним (календар або архів)*/
}

#BlogAuthorsTitle {
text-align:center;
/*Розміщення напису «Про автора» всередині блока*/
}

#BlogAuthorsBox li {
padding-left:40px;
/*Розташування лінка; в даному випадку його зміщено на 40 пікселів вправо*/
list-style-type:none; /*Відключає стилі списку. Якщо цього не прописати, навпроти лінку буде розташовано крапочку, цифру або квадратик — в залежності від вашого браузера*/
}

Графічний

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

1. Нам знадобиться тільки один селектор: #BlogAuthorsBox {}, спочатку, як і в першому прикладі, видаляємо ці три селоектори #BlogAuthorsBox #BlogAuthorsBox li #BlogAuthorsTitle {} з CSS’у блога. 

2. Переходимо на сторінку власного профіля; копіюємо до Блокноту чи іншого текстового редактору посилання на нього.

3. Прописуємо до CSS’у такий рядок:

#BlogAuthorsBox {visibility: hidden;}

4. Йдемо за цим посиланням і дізнаємося, яким чином вставляти аватар до вузької шпальти блога 🙂

Креативний

А може, вас привабить такий вигляд блока, як на принтскріні вище?

1. Видаляємо елементи CSS’у, як і в минулих прикладах.

2. Прописуємо такі рядки:

#BlogAuthorsBox {
background-image:url(
адреса вашого малюнка);
background-position:left top;
/*Розташування малюнка*/
background-repeat:no-repeat;/*За допомогою даної опції малюнок не повторюється*/
padding-top:10px;
}

#BlogAuthorsTitle {
text-align:center;
}

#BlogAuthorsBox li {
padding-left:40px;
list-style-type:none;
}

Бажаю вдалих експериментів! Якщо у вас щось не виходить, ви завжди можете звернутися до мене і попросити розробити потрібний код для вашого блога.

Нестандартні шрифти ІІ

Спосіб, за допомогою якого я використовувала нестандартні шрифти у блозі, базується на можливостях браузера (в данному випадку Експлорера) відмальовування векторної графіки. Ця можливість у браузерів існує давно. От тільки проблема в тому, що Файрфокс має підтримку об'єктів canvas і SVG, a IE підтримує VML, коди, які я знайшла на жаль, гарно працюють тільки з VML, а я ще не такий гарний спеціаліст, щоб там щось підправити — як то кажуть, ще навчатися і навчатися 🙂

Для тих, хто не дуже в темі, що таке той вектор, у який потрібно конвертувати шрифти truetype, поясню. Існує два види комп'ютерної графіки:

1. Растрова. З растровою графікою ми зустрічаємся кожного разу, коли вмикаємо комп'ютер. У растровому форматі виконано будь-які зображення — всі фотографії, малюнки і т. п. мають растровий формат, тобто — простий набір кольорових пікселів. Пікселі — то такі квадратики, які можна побачити, якщо сильно збільшити зображення. Збільшіть будь-який малюнок у 7-8 разів, і нічого, крім кольорових квадратиків, з яких цей малюнок складено, ви не побачите. Растрове зображення може важити досить багато — 5Мб для гарної фотографії це ще не межа.

2. Векторна. Векторну графіку ми спостерігаємо зазвичай у флеш-роликах, які можуть бути досить довгими, але у той же самий час у мегабайтах (кілобайтах) важать не так вже і багато. Чому? Бо всі малюнки у флеші — векторні. Тобто, це вже не пікселі, а набір математичних координат, що обробляються флеш-програвачем. Для векторних зображень немає значення, наскільки їх збільшувати — в 10 разів, чи в 100 — якість зображення залишиться тою ж самою, бо при збільшенні программа просто математично вирахує нові розміри зображення. Звичайно, зберігати у векторі фотографії неможливо. А от шрифти — будь-ласка. Чим ми зараз і займемося 🙂

Все, що нам потрібно, так це обрати кирілічний шрифт у форматі truetype, зайти на цей сайт, завантажити на нього свій шрифт і тицьнути на кнопку Convert Font. Таким чином замість шрифта truetype ми отримаємо файлик javascript з математичним описом шрифта. Завантажте його до файлів блога. Туди ж треба завантажити ще один файл — інтерпретатор, який дозволить браузеру відображати шрифт належним чином:

Беремо його тут

До речі, я не тестувала попередніх версій цього скрипта. Якщо буде час і бажання, можете спробувати їх знайти. Можливо, вони будуть підтримувати хоч яку кроссбраузерність.

Тепер черга за кодуванням. Скопіюйте код, наданий нижче, до HTML-поля блога. Увага! Шляхи до ваших файлів шрифта та інтерпретатора треба прописувати повністю:

Прописавши коди в HTML-полі ми маємо вказати на шрифт при редагуванні замітки. А для цього потрібно знати його справжню назву, інакше нічого не вийде. Справжня назва шрифта — це зовсім не обов'язково назва файла. Потрібна назва знаходиться наприкінці конвертованого файла з шрифтом. Відкрийте цей файл у текстовому редакторі, прокрутіть до самого низу і знайдіть відомості про нього. Скопіюйте назву куди-небудь, або запишіть (але краще скопіюйте) 😉

Тепер в замітці текст, який потрібно виділити нестандартним шрифтом, вставляємо у такі теги:

В графічному редакторі для вставки тегів потрібно клацнути на кнопочці HTML редактора.

Желаю успехов!